Frontend Workflow Magento2

0

Frontend Setup – Workflow mit Magento 2

Wichtige Information vorne Weg: In diesem Artikel gehen wir davon aus, dass der Entwickler-Modus über das Magento 2 Kommandozeilentool angeschaltet wurde.

Ist die Installation von Magento 2 über den bevorzugten Weg via Composer abgeschlossen, befinden sich nun alle Magento Spezifischen Module sowie Kernfunktionalität im vendor/magento Folder. Möchten wir nun Code hinzufügen arbeiten wir für das Frontend ausschließlich im app/code bzw im app/design Folder. Der app/design Ordner beinhaltet Theme-spezifische Dateien, die für die Frontend-Entwicklung von essentieller Bedeutung sind. Der app/code Ordner kann sowohl Backend-Logik als auch Frontend Files beinhalten, wird jedoch hier eher in den Hintergrund gerückt und im Artikel ‚Backend Development mit Magento 2‘ etwas ausführlicher erläutert.

Eine Vollständige bzw Ausführlichere Erklärung zu Magento 2 Modulen findet sich im Artikel ‚Magento 2 Module‘.

Ein Custom Theme in Magento 2 erstellen für das Frontend Setup:

In Magento 2 werden (frontend) Themes ausschließlich in folgender Verzeichnisstruktur angelegt:


app/design/frontend/Vendor/ThemeName/

Der Lieferumfang von Magento 2 enthält das Responsive Theme „Luma“. Auf dieses können Sie zurückgreifen, um ein minimales Set-up zu erzeugen. Es erbt von diesem Theme. Dazu werden die folgenden Files benötigt:


/* app/design/frontend/Vendor/ThemeName/registration.php */


/* app/design/frontend/Vendor/ThemeName/theme.xml */ Mein Custom Theme Magento/luma

Das Theme kann nach anlegen beider Files im Backend ausgewählt werden und somit aktiviert werden. Es befindet sich nun im 'Content' -> 'Configuration' -> Theme tab und sollte als letztes ausgewählt werden. Das Backend sowie das Parent Theme werden dann automatisch auf "Luma" gesetzt. Das Backend Theme kann man bei Bedarf durch Anlegen der selben Struktur im 'app/design' folder bzw. durch Ersetzen von 'app/design/frontend' mit 'app/design/adminhtml' modifizieren. Der File 'registration.php' müsste daraufhin angepasst werden. Das war der erste Schritt im Frontend Setup.

Das eigene Theme ist nun aktiviert und unsere Dateien befinden sich im app/design Ordner. Jetzt müssen wir Magento über seine Kommandozeilentool sagen, dass es unsere statischen Dateien (images, CSS, etc) in den 'pub/static/frontend' Ordner schieben soll und somit für uns sichtbar macht. Das erledigen wir mit dem folgenden Kommando:


bin/magento setup:static-content:deploy

Das Kommando wird sämtliche Files jeder Themes (backend, luma, blank) durchlaufen und die Images und anderen Statischen files in den pub Ordner kopieren. Sollte das neu erstellte Theme nicht angezeigt werden beim durchlaufen des 'setup:static-content:deploy' Kommandos, muss vorher mindestens ein Statischer File angelegt werden. Beispiel:


app/design/frontend/Vendor/ThemeName/web/css/_extend.less

Nachdem diese Datei angelegt wurde sollte ein erneuter Aufruf von 'setup:static-content:deploy' das gewünschte Theme anzeigen.

So werden Style Änderungen im Frontend sichtbar

Grundsätzlich gibt es zwei Wege Änderungen im Frontend Setup im Shop Frontend zu sehen.

1. Ein Löschen der 'pub/static/frontend/*' und 'var' folders ist in jedem Fall die schnellere Lösung. Dieser Weg ist ausreichend für CSS Änderungen. Im 'var' Folder ist der Cache Folder enthalten, somit ist ein separates Löschen des Caches nicht mehr nötig.

Nach jetzigem Stand (Magento 2.2.4) ist es im Rahmen des Frontend Setups nicht mehr nötig weitere Tools zur Frontend-Entwicklung zu benutzen.
Tools wie Grunt, Gulp oder ähnliche erleichtern einem jedoch die Arbeit signifikant und werden von uns in einem weiteren Artikel ausgiebig erläutert.

2. Für das Anlegen neuer Übersetzungen oder neuen Less files ist das Aufrufen des 'setup:static-content:deploy' Kommandos jedoch unerlässlich.

Empfehlen.

Über den Autor

Benjamin Vieren ist seit 2009 in der PHP-Entwicklung tätig und entwickelt Designs und User Interfaces auf Basis von HTML, PHP, CSS und Javascript. Der Fokus des Magento Frontend Developers der webvisum GmbH liegt auf der Entwicklung von E-Commerce-Lösungen.

Hinterlasse eine Antwort

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.