Erste Schritte in Shopware 6

In den vergangen Tagen hat Shopware nach der Developer Preview jetzt auch die Shopware 6 Early Access Variante bereit gestellt. Wer schon jetzt Erfahrung mit Shopware 6 sammeln möchte, findet bereits jetzt zahlreiche Quellen mit Informationen. Neben der offiziellen Dokumentation gibt es auch Quickstart-Videos zur Einführung in die Installation, der Template-Gestaltung sowie der Plugin-Programmierung auf Youtube.

Schulungen zu Shopware 6

Neben den Online-Varianten gibt es jedoch auch die Möglichkeit, Live-Schulungen direkt im Hauptquartier von Shopware in Schöppingen zu besuchen. Aktuell gibt es das Template Training sowie das Developer Training. Die Advanced-Kurse sind bereits buchbar, die ersten Kursen scheinen jedoch erst Ende September stattzufinden. Da Shopware nur 25km Luftlinie vom Büro entfernt ist, bietet sich eine Schulung vor Ort natürlich an. Somit habe ich die Gelegenheit genutzt und am 6. August an einer Live-Schulung teilgenommen.

Angekommen in Schöppingen wird man an der Rezeption in Empfang genommen. Direkt im Anschluß ging es in den modernen Schulungsraum mit immerhin 24 Schulungsplätzen. Diese waren an diesem Tag jedoch nur halb besetzt. Jeder Teilnehmer sass an einem Entwicklungsrechner inkl. Linux Desktop, PhpStorm und einer vorinstallierten Shopware 6 Developer-Version.

• 

• 

• 

Shopware 6 Template Training

Einzige Voraussetzung für die Schulung sind gute Kenntnisse in HTML und CSS. Wer sich bereits mit Smarty/Twig sowie Responsive Webdesign auskennt, hat es noch ein wenig leichter. Die Schulung war gut aufgebaut und es gab immer wieder ein Wechsel zwischen Theorie und Praxis. Teilweise wurde live gecodet und man konnte das Gelernte dann am eigenen Rechner nachprogrammieren. Es gab zwischendurch kleinere Pausen sowie eine einstündige Mittagspause. Anfangs wurde auf die Installation von Shopware 6 auf Basis von Vagrant, Docker, MAMP/XAMPP eingegangen. Auch mein persönlicher Favorit Valet Plus blieb nicht unerwähnt. Danach wurden die eigentlichen Technologien Symfony, Twig, Bootstrap 4, SASS/SCSS, ECMAScript 6, webpack sowie die Frontend-Entwicklung vorgestellt.

Symfony

Shopware 6 setzt mittlerweile vollständig das Symfony 4 Framework ein. Aktuell ist es die Version 4.3.2. Für den Frontend-Entwickler ist dies nicht wirklich wichtig, er hat damit relativ wenig zu tun. Jedoch wird man die Developer Toolbar von Symfony zu schätzen wissen. Diese ermöglicht die schnelle Fehlersuche, wenn mal etwas schief geht.

Twig

Wurde in Shopware 5 noch Smarty als Template Engine eingesetzt, so wird in Shopware 6 jetzt vollständig auf Twig gesetzt. Da dieses auch zum Symfony Projekt gehört, ist eine enge Integration gewährleistet. Wer sich bereits mit der Smarty-Syntax auskennt, muss sich nur ein wenig an die leicht geänderte Syntax gewöhnen, kann dann aber direkt loslegen.

Zu Twig gibt es eine ausführliche Dokumentation für Template Designer.

Bootstrap 4

Shopware 6 setzt konsequent auf Bootstrap 4 und verfolgt dabei den Mobile First-Ansatz. Auch hier gibt es eine hervorragende Dokumentation. Wer sich bereits mit HTML und CSS auskennt, wird sich schnell in Bootstrap einarbeiten können. Da Bootstrap bereits in vielen Projekten genutzt wird, dürfte Kennern der Einstieg sehr leicht gelingen. Bootstrap setzt auf jQuery setzt, deshalb wird zusätzlich die jQuery Slim-Version eingesetzt.

Wir haben in dem Workshop verschiedene Blöcke überschrieben und die Produkt-Detailseite komplett auf Basis von Bootstrap Cards neu aufgebaut.

SASS/SCSS

Wurde in Shopware 5 noch LESS genutzt, so wird auch hier jetzt konsequent auf SASS/SCSS gesetzt. In der Schulung lernt man, wie man durch eigene SCSS-Dateien das Theme anpasst und erweitert. Hierbei wurde die oben erwähnte Produkt-Detailseite neu gestaltet.

ECMASript 6

Shopware 6 setzt komplett auf ECMAScript 6 (ES6). Bei ES6 handelt es sich um standardisiertes JavaScript, das auf allen modernen Browsern unterstützt wird. Auf weiteren Javascript-Bibliotheken wurde bewusst verzichtet. Nur jQuery wird aufgrund von Bootstrap als Slim-Version eingebunden. Das ist auch ein guter Ansatz für Plugin-Enwickler, da ansonsten vermutlich jedes zweite Plugin seine eigene jQuery-Bibliothek mitbringt.

webpack

webpack wird genutzt, um JavaScript-Dateien zusammen zu fassen und zu minimieren. Webpack kann jedoch mehr. Es lassen sich auch CSS, LESS und andere Resourcen transformierne, Bündeln und Zusammenpacken. Dabei liefert Shopware 6 ein fertig konfiguriertes webpack. Wer sich bereits mit Gulp und Grunt auskennt, dürfte es nicht schwer haben.

Fazit

Die Schulung hat einen guten Einblick in die Theme-Gestaltung mit Shopware 6 gegeben. Dabei wurden alle wichtigen Themen angesprochen, um sich tiefer mit dem System beschäftigen zu können. Am Ende des Workshops bekam jeder Teilnehmer einen Einladungslink zur Online-Zertifizierung. Wer es besonders eilig hatte, konnte den Test direkt am Schulungsrechner absolvieren. Viele zogen es vor, den Test im gewohnten Umfeld durchzuführen. Wenn man hier halbwegs gut aufgepasst hat, sollte der Test nicht schwer fallen.

Natürlich ist Shopware 6 noch nicht für den Produktiv-Einsatz vorgesehen. Es geht aber in großen Schritten voran und zum Ende des Jahres wird Shopware 6.1 angekündigt. Wer sich jetzt bereits in das System einarbeitet, kann gut vorbereitet mit dem ersten Shopware 6 Projekt starten. Wer tiefer in das Thema einsteigen möchte, findet eine komplette Anleitung zur Erstellung eines Plugins inkl. Frontend und Backend.