Kategorien
Entwickler Wordpress

DDEV – Lokale Entwicklung und Wp-cli

Was ist DDEV?
DDEV ist eine lokale Entwicklungsumgebung auf basis von Docker. Es wurde entwickelt um per automitierten scripten Container für Webserver und Datenbanken (und mehr) schnell zu implementieren.

DDEV ist für folgende Projekt konzipiert:

WordPress, TYPO3, Drupal, Php-projekte (bis version 8) und für alle die sich etwas besser auskennen auch für pimcore und viele andere projekte.

Requirements:
DockerVersion => 18.06
Docker-compose => 1.21. (Mac, Linus oder Windows)
MacOS Version => Sierra oder neuer
Linus 0> Ubuntu 14.04, Debian Jessie+, Fedora 25+
Windows => 10Home

Hier ein kurze Auflistung der DDEV Befehle:
ddev auth ssh
ddev composer
ddev config
ddev describe
ddev exec
ddev list
ddev logs
ddev start
ddev stop

ddev config

PS ~\ddev\wp-meetup> ddev config
• Creating a new ddev project config in the current directory (~\ddev\wp-meetup)
• Once completed, your configuration will be written to ~\ddev\wp-meetup.ddev\config.yaml
• Project name (wp-meetup):
• The docroot is the directory from which your site is served.
• This is a relative path from your project root at ~\ddev\wp-meetup
• You may leave this value blank if your site files are in the project root
• Docroot Location (current directory):
• Found a php codebase at ~\ddev\wp-meetup.
• Project Type typo3, backdrop, php, drupal6, drupal7, drupal8, wordpress: wordpress
• Configuration complete. You may now run ‚ddev start‘.

Hilfe und Doku:

• Installation: https://ddev.readthedocs.io/en/latest/#installation
• Bugs: https://github.com/drud/ddev/issues
• Stack Overflow: https://stackoverflow.com/questions/tagged/ddev
• Doku: https://ddev.readthedocs.io/en/latest/
• Weitere Services:
https://ddev.readthedocs.io/en/latest/users/extend/additional-services/
• Video: DDEV in 90 Sekunden
(https://www.youtube.com/watch?v=rj4WTnZcjjY)
• Slack Channel: #ddev und #ddev-wordpress – typo3.slack.com

DDEV Projekt mit WP-CLI automatisieren

Was ist WP-Cli
wp-cli ist eine Sammlung von commandline befehlen für die Verwaltung und Installation von WordPress. Man kann Plugins installieren, aktualsieren, Multisite installation Konfigurieren ….
https://wp-cli.org/de/


Anpassungen der Wp-config.php wenn notwendig.

FALSCH

define( 'ABSPATH', dirname(__FILE__) . '/');

RICHTIG

if ( !define( 'ABSPATH' ) )
define( 'ABSPATH', dirname(__FILE__). '/');

Install ddev für WordPress

ddev config

Einfach mit Enter bestätigen wenn der Projekt name gleich ist.

Mit Enter bestätigen, da bei WordPress keine besonderer Folder mit einem Docroot ausgewählt werden muss

Im letzten Schritt „wordpress“ eingeben und mit Enter bestätigen.

Abschließend sollten nun beide im Bild angezeigten Dateien im Install Folder liegen. Mit dem Commandline befehl ls -a sieht man auch einen .ddev folder, darin befinden sich alle Scripte zur automatischen erstellung von Docker Webserver und Routing sowie Datenbanken.

Installation & Konfiguration von WordPress im DDEV Web-container

(1) Download und Installtion von wordpress

// Holen der letzten aktuell wordpress version in Deutsch
$> wp core download --locale=de_DE --version=latest

$> wp core install --url=$DDEV_URL --title="dein title" --admin_user="deinUsername" admin_email="deineEmail"

$>wp config set WP_POST_REVISIONS false --raw --add --anchor="/**Authentication Unique Keys and Salts. */"

$>wp config set WP_MEMORY_LIMIT 256M --add --anchor="/** Authentication Unique Keys and Salts. */"

$>wp config set WP_MAX_MEMORY_LIMIT 256M --add --anchor="/** Authentication Unique Keys and Salts. */"

$>wp config set DISALLOW_FILE_EDIT true --raw --anchor="/** Authentication Unique Keys and Salts. *

Weiter Konfigurationen

$>wp config set WP_DEBUG true --raw --add --anchor="/**
Authentication Unique Keys and Salts. */"

$>wp config set WP_DEBUG_LOG true --raw --add --
anchor="/** Authentication Unique Keys and Salts. */"

$>wp config set WP_DEBUG_DISPLAY false --raw --add --
anchor="/** Authentication Unique Keys and Salts. */"

$>wp config set SCRIPT_DEBUG true --raw --add --
anchor="/** Authentication Unique Keys and Salts. */"

$>wp config set SAVEQUERIES true --raw --add --anchor="/**
Authentication Unique Keys and Salts. */"

Anpassungen per commandline

## delete the first post and the comment
$>wp post delete 1 --force

## delete all default plugins
&>wp plugin delete $(wp plugin list --status=inactive --field=name)

## delete the default blogdescription
$>wp option update blogdescription ""

## hide for the search engines
$>wp option update blog_public 0

## disable the avatars
$>wp option update show_avatars 0

Installationen und Activeren von Plugins

## install and activate some plugins
$>wp plugin install contact-form-7 --activate
$>wp plugin install flamingo --activate

## after installing all plugins, update the language
$>wp language plugin install --all de_DE

Kategorien
Uncategorized

DDEV Pimcore install

Vorraussetzung für eine Pimcore installation ist DDEV und Docker.
Wenn dies erfüllt ist dann folgende Schritte gehen.

In der Konsole das Projekt (folder) anlegen und folgende Befehle nutzen.

mkdir pimcore-project
cd pimcore-project

ddev config --project-type=php

Anschließen das Projekt im Codeeditor öffnen und im Folder .ddev das File config.yaml öffnen.

und folgende Einstellungen an der config.yaml vornehmen.

name: pimcore
type: php
docroot: public
php_version: "8.0"
webserver_type: nginx-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: true
additional_hostnames: []
additional_fqdns: []
mariadb_version: "10.3"
mysql_version: ""
use_dns_when_possible: true
composer_version: 2.1.3
web_environment: []

Wichtig für eine Pimcore 10 installation ist die php-version 8.0 und ebenso die composer version von 2.1.3 in der Config zu hinterlegen.
Datei speichern und im selben Folder „.ddev“ die Datei „nginx-site.conf“ angelegen. Die Konfiguration für die nginx-site.conf findet man auf dieser Seite. Auf der Pimcore Dokumentation die Development Enviroment heraus kopieren und in die nginx-site.conf hinterlegen und speichern. Achtung, für dieses Tutorial wurde die pimcore Version 10.0 (current) genommen.

Anschließen in der console den Befehl ausführen

Es hat sich herausgestellt das die Nutzung des Nginx server problem hervorruft. Allen voran blockiert nginx das rendern von css javscript links.
Daher hier eine Einstellung für Apache

name: pimcore
type: php
docroot: public
php_version: "8.0"
webserver_type: apache-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: true
additional_hostnames: []
additional_fqdns: []
mariadb_version: "10.3"
mysql_version: ""
use_dns_when_possible: true
composer_version: 2.1.3
web_environment: []
ddev composer create pimcore/demo

// in der Pimcore 10 version gibt es keinen Folder <web> 
// dieser heißt nun public, also entsprechend anpassen

ddev config --docroot=public

ddev restart

Composer installiert nun alle Anhängigkeiten, mit dem ddev config -docroot Command setzen wir das Verzeichnis Public als DocumentRoot.

Jetzt noch anschließend folgende Consolen befehle ausführen.

ddev ssh

// damit der untere Befehl funktioniert sollte man sich im hauptverzeichnis seines projects befinden, ansonsten einfach den pfad anpassen. also statt vendor/bin/pimcore eben ../vendor/bin/pimcore-install.

export PIMCORE_INSTALL_MYSQL_HOST_SOCKET=db:3306; vendor/bin/pimcore-install

Mit dem letzten Befehl hinterlegen sie die admin zugangsdaten für Pimcore und geben die zugangsdaten für verbindung zur datenbank ein. Die db zugangsdaten sind für alle einstellungen db.


Für Pimcore Erweiterungen wie Datahub und Coreshop wird empfohlen zuerst die Anleitung von Datahub zu installieren und anschließend die von Coreshop.

Kategorien
Entwickler

WordPress Impreza

Wir arbeiten zur Zeit viel mit dem Theme Impreza, manchmal ist es notwendig die voreingestellten sachen etwas zu manipulieren

wp-content/plugins/us-core/config/elements/menu.php
Zeile: 181

‚mobile_width => array
old
‚max‘ => 2000

Dieser kleine Eingriff hat zur folge das im Backend das Mobilmenu besser kontrolliert werden.

Kategorien
Uncategorized

Woocommerce Versandlabel erstellung

Zu einem funktionierenden Woocommerce Shop gehört natürlich auch die Abwicklung der Bestellung. Hier besonder hervorzuheben die Konfiguation von Germanized, wenn DHL als Standard Dienstleister genutzt werden soll.

Als Grundlage wird ein Account im Geschäftkundenportal von DHL vorrausgesetzt. Daneben ist zu empfehlen sich im Entwicklerportal von Dhl einen Account zu registerieren. Beides ist wichtig um am Anfang Testbestellungen machen können und eben auch Versandlabel erstellung zu testen.

Hat man sich bei beiden Portalen angemeldet, braucht man zuerst die EKP nummer vom GeschäftkundenPortal.
Dafür im Geschäftskunden Portal anmelden und unter „Vertragsdaten -> Vertragspositionen“ die ekp nummer heraussuchen. Siehe Screen unten.

Hier bei dieser Nummer ist es wichtig zu wisssen das die ersten 10 stellen die EKP nummer ist. Die darauf folgenden zwei stellen ist die sogenannte Verfahrens-Kennziffer, z.B. DHL Paket International.
Die letzten beiden Stellen sind die Abrechnungsnummer.

Da wir diese nun haben, fangen wir mit der Config an.
Loggen wir uns in das wp woocommere backend ein und gehen auf Woocommerce->Einstellungen->Germanized.

Unter dem Reiter DHL sieht man den Konfig Punkt Kundennummer (EKP) Dhl Integration aktivieren.
Hier tragen wir die 10 stellige EKP nummer ein.

Zu dem Punkt API kommen wir gleich, diesen überspringen wir erstmal.

Scrollen wir weiter herunten und kommen zum Punkt
„Produkte und Teilnahmenummern“
Oben im Screen haben sie gesehen das wir eine 10 stellige EKP nummer haben, gefolgt von 2stellen welche die Verfahrensnummer ist.
Wir tragen bei Produckte und Teilnahmenummern folgendes ein.

DHL Paket 01
DHL Wahrenpost 01

usw.

Diese letzten beiden Ziffern finden sie im Geschäftkundenportal.


Kommen wir nun zur API.
Falls sie sich im Entwicklerportal Registriert haben, sollten Sie eine eindeutige Entwickler id haben. diese Findet man unter MEIN KONTO -> Entwickler id.

Nun zurück in das Wp-system. Woocommerce->Einstellungen->Germanzid->Post & Dhl

Sandbox benutzername == Entwicklername
Sandbox Passwort == Passwort welches zum Einloggen im entwicklerportal genutzt wurde.

Soweit sind wir nun erstmal fertig mit der Grundkonfiguration.


Der nächste sehr wichtig punkt wartet bei Adressen. Es ist wichtig die Absender Adresse des shops zu hinterlegen, da sonst die DHL API nicht funktioniert und immer eine fehlermeldung kommt.

Kategorien
Entwickler Wordpress

WordPress Woocommerce Snippets mit erweiterungen

Snippetssammlung:

https://wooexperte.de/woocommerce-snippets/

https://marketpress.de/tag/snippet/

https://marketpress.de/woocommerce-snippets/

Kategorien
Entwickler Webdesign Wordpress

WordPress Plugins für Barrierefreiheit

Da Barrierefreie Webseiten auf Seiten des Frontends mächtig viel arbeit macht hier ein Seite mit Plugins für Barrierefreiheit.
https://abilitools.com/2020/04/17/die-8-besten-wordpress-plugins-fuer-mehr-digitale-barrierefreiheit/

Kategorien
Entwickler

Woocommerce Login/Registrierung

Wenn es Troubleshooting gibt und es keine Anmelde link nach der registrierung versendet wird, unbedingt die Einstellung Woocoommerce->Emails die Konfiguration durcharbeiten. Siehe Screen

Kategorien
Uncategorized

Js/jquery Element prüfen auf Existens (block/none/visible)

Oft muss man im Javascript prüfen ob eine Element gerade angezeigt wird ( block or none) um es dann bei jeweiliger anzeigen zu validieren.
Die wohl sicherste Lösung hierfür wäre im jQuery bereiche folgende.

$('#yourID').is(':visible');

$('#yourID').is(':hidden');
Kategorien
Uncategorized

Phpmailer zweite Mail mit unterschiedlichen Content versenden

Phpmailer gibt uns die Möglichkeit mehrere Mails mit einer Instanz zu versenden. Hier muss darauf geachtet werden, das die function clearAllRecipients aufgerufen werden. Die Funktion löscht alle im addAddress gelisteten E-mail Adressen. Hier ein Beispiel einer phpmailer instanz.

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;


require 'vendor/autoload.php';

$mail = new PHPMailer(true);

try {
  
  	$mail->CharSet = 'UTF-8';
	$mail->isSMTP();                                            // Send using SMTP
    $mail->Host = 'deinMailHoster';                     
    $mail->SMTPAuth = true;                              
    $mail->Username = 'Username';
    $mail->Password = 'Passwort'; 
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
	$mail->Port = 587;
  
  	$mail->setFrom('test@testmail.com');
    $mail->addAddress('service@testmail.com');

	$customerName = strip_tags(trim($_POST['userName']));
    $email = strip_tags(trim($_POST['Email']));
  
	$mail->isHTML(true);
    $mail->Subject = $subject;

	$mail->Body = "Hier kommt dann der Text für den Email Body rein";

	$mail->send();


	// Hier kommt die Konfiguration für die Zeite Mail.
	// Die Empfänger werden alle auf null gesetzt
	$mail->clearAllRecipients();
  
    $mail->isHTML(true);
    $mail->addAddress($second_email);
    $mail->Subject = $subject;

    // Pfad angeben für das hinterlegte Email template
    $mailer_template = 'mailer-template/content-mail.php';

    // Liest die gesamte datei in einen STring.
    $template = file_get_contents($mailer_template);
  
    // der mail wir der eingelesene String
    // übergeben und in html gewandelt.
    $mail>msgHTML($template);


    // die zweite mail mit anderen Inhalt wir an
    // einen zweiten neuen Recipient versendet.
    $mail->send();
  
}catch(Exception $e){
  echo "Mailer Error {$mail->ErrorInfo}";
    $result = "Error";
}
Kategorien
Allgemeines Netzwelt

Digitale Zahlungen in Europa könnten 2020 um rund 10 % zulegen

Digital Payment scheint sich für immer mehr Menschen zur einfachen Alternative zum Zahlungsverkehr mit Bargeld und Karten zu entwickeln. Immer mehr Nutzer von mobilen Endgeräten (Smartphone, Tablet usw.) könnten dafür sorgen, dass digitale Zahlungen in Europa 2020 um rund 10 % zulegen könnten. Analysten erwarten, dass in diesem Jahr der Rekord-Transaktionswert von 802 Milliarden US-Dollar (rund 742 Milliarden Euro) erreicht werden könnte. Und in den kommenden Jahren könnte der Trend noch stärker nach oben zeigen.