Zertifizierung zum Shopware 6 Certified Template Designer

Am 6. August 2019 fand bei Shopware in Schöppingen ein Live-Training zum Shopware 6 Template statt. Voraussetzung für die Teilnahme waren gute HTML- und CSS-Kenntnisse sowie Erfahrung mit responsivem Webdesign.

Pausenbereich zwischen den Schulungsblöcken: Sand und Palmen direkt vor dem Gebäude.

Erste Schritte in Shopware 6

Das Training behandelte zunächst die verschiedenen Installationsmethoden: Vagrant, Docker, MAMP beziehungsweise XAMPP und Valet Plus. Anschließend ging es an die zentralen Technologien hinter dem Storefront-Template von Shopware 6.

Die Technologien im Überblick

• Symfony 4.3.2 als zugrunde liegendes Framework
• Twig als Template Engine, die den aus Shopware 5 bekannten Smarty-Ansatz ablöste
• Bootstrap 4 mit konsequentem Mobile-First-Ansatz
• SASS/SCSS anstelle von LESS
• ECMAScript 6 als standardisiertes JavaScript
• webpack als Build-Tool

Warum diese Liste den Ausschlag gegeben hat

Für mich persönlich ist genau diese Aufzählung der Grund, Shopware 6 ernst zu nehmen und den eigenen Schwerpunkt in diese Richtung zu verschieben. Symfony, Twig, Bootstrap, SCSS, ECMAScript 6, webpack: Das sind keine hauseigenen Erfindungen, sondern Werkzeuge, die außerhalb dieses Shopsystems verbreitet sind. Für jedes davon gibt es Dokumentation, Antworten in öffentlichen Foren und Entwickler, die es können, ohne je einen Shop gesehen zu haben.

Wer lange in Systemen gearbeitet hat, die vieles selbst gebaut haben, weiß, was dieser Unterschied wert ist. Eigene Frameworks binden Wissen an ein Produkt. Läuft das Produkt aus, läuft das Wissen mit aus. Verbreitete Werkzeuge halten dagegen: Twig-Kenntnisse gelten in jedem Symfony-Projekt weiter, ganz gleich, was aus dem Shopsystem wird.

Dazu kommt, was ein Template-Training noch gar nicht zeigt: die Administration als eigenständige Anwendung, eine API, die von Anfang an mitgedacht ist, und damit die Möglichkeit, den Shop auch ohne die mitgelieferte Storefront zu betreiben. Das ist der Teil, der über die nächsten Jahre entscheidet.

Was der Wechsel praktisch bedeutet

Diese Liste liest sich wie eine Modernisierung, und das ist sie auch. Der eigentliche Punkt liegt aber woanders: Jede einzelne Position ersetzt etwas, das in Shopware 5 anders hieß und anders funktionierte. Für Template-Arbeit heißt das, dass vorhandene Routine nur begrenzt trägt.

Der Wechsel von Smarty zu Twig ist dabei der sichtbarste. Twig ist außerhalb von Shopware verbreitet, was zwei Vorteile bringt: Die Vorlagensprache lässt sich unabhängig vom Shopsystem lernen, und Entwickler mit Symfony-Erfahrung finden sich sofort zurecht. Wer dagegen jahrelang Smarty-Templates gepflegt hat, muss umdenken, besonders beim Vererbungssystem der Blöcke.

Bootstrap 4 als Grundlage ist eine bewusste Entscheidung gegen ein hauseigenes Grid. Sie nimmt Freiheit und gibt dafür Verbreitung: Wer Bootstrap kennt, kann ein Shopware-6-Template anfassen, ohne die Konventionen des Herstellers erst zu lernen. Für Auftraggeber senkt das die Abhängigkeit von einem einzelnen Dienstleister, was aus deren Sicht ein Vorteil ist.

Am meisten Umstellung bringt der Build-Prozess mit webpack. Ein Template ist damit kein Satz Dateien mehr, den man auf den Server legt, sondern ein Projekt, das gebaut werden muss. Das verlangt eine lokale Entwicklungsumgebung und macht Änderungen direkt auf dem Produktivsystem endgültig zur schlechten Idee. Genau deshalb stand die Einrichtung der Umgebung am Anfang des Trainings und nicht am Rand.

Das Blocksystem als eigentlicher Hebel

Am meisten Zeit spart oder kostet in der Theme-Entwicklung ein Detail, das auf keiner Technologieliste auftaucht: das Blocksystem von Twig. Shopware zerlegt seine Templates in benannte Blöcke, und ein eigenes Theme überschreibt gezielt einzelne davon, statt ganze Dateien zu kopieren.

Der Unterschied zeigt sich nicht beim Bauen, sondern beim Update. Wer eine komplette Template-Datei kopiert und anpasst, muss nach jeder neuen Version von Hand vergleichen, was sich im Original geändert hat. Wer nur einen Block überschreibt, bekommt die übrigen Änderungen ohne Zutun mit.

In der Praxis ist das die Stelle, an der sich sorgfältige von schneller Arbeit unterscheidet. Beide Wege funktionieren am ersten Tag gleich gut. Der Unterschied wird beim dritten Update sichtbar, und dann deutlich.

Praxis: Produktdetailseite mit Bootstrap Cards

Im praktischen Teil wurde die Produktdetailseite anhand von Bootstrap Cards neu aufgebaut. Die Balance zwischen Theorie und praktischen Übungen war gut, der Schulungsraum modern ausgestattet: 24 Plätze mit Linux-Desktops, PhpStorm und einer vorinstallierten Shopware-6-Umgebung.

Fazit

Im Anschluss an das Training gab es einen Link zur Online-Zertifizierung. Für alle, die sich 2019 auf Shopware-6-Projekte vorbereiten wollten, war die Schulung eine solide Grundlage.

Ehrlich bleibt festzuhalten, was so ein Zertifikat leistet und was nicht. Es belegt, dass jemand die Konzepte einmal geordnet vermittelt bekommen und die Prüfungsfragen beantwortet hat. Es belegt nicht, dass ein Template unter Last funktioniert, in drei Sprachen sauber umbricht oder nach dem nächsten Update noch baut. Das zeigt sich erst im Projekt.

Sein eigentlicher Wert liegt in der Reihenfolge: Ein Training zwingt dazu, den Stoff vollständig durchzugehen, statt nur die Teile zu lernen, die das aktuelle Projekt gerade verlangt. Gerade bei einer Version, die vieles neu sortiert, verhindert das blinde Flecken, von denen man sonst erst erfährt, wenn sie stören.