Shopware 6: Erster Überblick und Installation
Seit Januar 2020 ist Shopware 6.1 als Stable Version verfügbar. Die neue Version bringt dabei nicht nur neue Features mit, sondern stellt eine grundlegende Überarbeitung und Modernisierung des Systems dar. Dazu gehört unter anderem ein brandneuer Tech-Stack mit Twig, Sass, Bootstrap, Vue.js, Node.js und Webpack. Dem Backend wurde ebenfalls ein komplett neues Interface verpasst, was deutlich benutzer- und entwicklerfreundlicher ist.
Eine Übersicht der wichtigsten neuen Features fasst Shopware selbst am besten zusammen: https://www.shopware.com/de/produkte/shopware-6/
Was die neue Version für Entwickler konkret bedeutet und wie man am besten mit Shopware 6 durchstartet, möchten wir hier Schritt für Schritt zusammenfassen, indem wir unsere Erkenntnisse zu Installation, Theme-Entwicklung und Plugin-Entwicklung teilen.
Was ist neu?
Wie schon erwähnt ist einer der wohl deutlichsten Unterschiede zu Shopware 5 der neue Tech-Stack, der in der Frontend-Entwicklung zum Einsatz kommt.
Während Shopware 5 auf die Templating-Engine Smarty und den CSS-Preprocessor LESS setzt, nutzt Shopware 6 Twig und Sass für seine Templates und Stylesheets. Die Umstellung ist dabei reine Gewöhnungssache, da sich die Sprachen hauptsächlich syntaktisch unterscheiden und kaum neue Konzepte erlernt werden müssen.
Konzeptionell gilt es bei Shopware 6, sich vom “Bare”- und “Responsive”-Theme zu verabschieden. Es gibt ab sofort nur noch das “Storefront”-Theme. Das ist vergleichbar mit dem “Responsive”-Theme, jedoch um einiges schlanker, was Anpassungen an ein eigenes Design erleichtert. Durch neue Konfigurationsmöglichkeiten hat man nun die Möglichkeit, präzise zu steuern, ob und in welcher Reihenfolge man Templates, Stylesheets oder JavaScripts von übergeordneten Themes erben möchte.
Dazu kommt, dass das neue Shopware “Storefront”-Standardtheme mithilfe des weitverbreiteten Frontend-Frameworks Bootstrap aufgebaut ist. Das kommt vor allem Entwicklern entgegen, die bisher noch nicht mit Shopware gearbeitet haben. Aber auch für Entwickler, die mit Bootstrap nicht vertraut sind, wird durch eine ausführliche Dokumentation und vereinheitlichte Konzepte das Arbeiten erleichtert.
Neue Möglichkeiten gibt es auch bei den Erlebniswelten, ehemals bekannt als Einkaufswelten. Diese können nun auch benutzt werden, um Seiten mit dynamischen Inhalten wie Kategorie-Listings zu gestalten. Zukünftig sollen auch einzelne Produktseiten als Erlebniswelten gestaltet werden können.
Wer etwas tiefer unter die Haube blickt, wird feststellen, dass der Node Package Manager (npm) und für die Kompilierung von Themes der Modul-Bundler Webpack zum Einsatz kommen. Außerdem beschleunigt der neue “Hot Mode” das Erstellen und Testen von Stylesheets mithilfe des Hot Module Replacements (HMR).
Was geht (noch) nicht?
Da Shopware 6 noch in den Kinderschuhen steckt, gibt es einige Features und Funktionen, die man bislang noch vergeblich sucht. Dazu gehört unter anderem die in Shopware 5 enthaltene Blog-Funktion. Auch eine Händerregistrierung für B2B-Kunden gibt es noch nicht, ebenso vermisst man die Erstellung von weiteren Backend-Benutzern.
Überraschend ist, dass es noch keine Unterstützung für das fundamentale Feature von Sales bzw. Streichpreisen gibt. Auch in der Roadmap ist nirgends davon die Rede. Es bleibt aber abzuwarten, ob das Feature zum endgültigen Release nicht doch noch auftaucht.
Bis dahin muss man sich bei allen noch fehlenden Features vorerst mit Plugins behelfen, die die Funktionen ergänzen.
Verzeichnisstruktur
Die Verzeichnisstruktur hat sind im Gegensatz zu Shopware 5 deutlich verändert.
Eigene Themes bzw. Plugins liegen ab sofort im Ordner /custom/plugins. Der Shopware Core liegt nun gekapselt und als Composer-Dependency im Ordner /vendor/platform. Das Standard-”Storefront”-Theme findet man unter /vendor/platform/src/Storefront/Resources.
Stylesheets liegen, ausgehend vom Plugin-Root, im Ordner app/storefront/src/scss. Die Verzeichnisstruktur der Stylesheets folgt dabei der 7-1-Konvention. JavaScripts sind unter app/storefront/src zu finden, Templates unter views/storefront.
Hier ein Überblick über die wichtigstens Verzeichnisse:
.├── bin/| └── console| ╠══════════════════════════════╗| ║ PHP-Kommandozeilen-Interface ║| ╚══════════════════════════════╝├── custom/| └── plugins/| └── [Prefix][ThemeName]/| |╠══════════════════════╗| |║ Eigenes Theme/Plugin ║| |╚══════════════════════╝| ├── src/| | ├── Resources/| | | ├── app/| | | | └── storefront/| | | | ├── build/| | | | | └── webpack.config.js| | | | | ╠══════════════════════════════════════════════╗| | | | | ║ Zusätzliche Webpack-Konfiguration für Plugin ║| | | | | ╚══════════════════════════════════════════════╝| | | | ├── dist/| | | | | └── storefront/| | | | | └── js/| | | | | └── [prefix]-[theme-name].js| | | | | ╠═════════════════════════╗| | | | | ║ Kompiliertes JavaScript ║| | | | | ╚═════════════════════════╝| | | | └── src/| | | | └── storefront/| | | | ├── asset/| | | | | ╠════════════════════════╗| | | | | ║ Speicherort für Medien ║| | | | | ╚════════════════════════╝| | | | ├── scss/| | | | | └── base.scss| | | | | ╠═══════════════════════════════════════╗| | | | | ║ Einstiegspunkt für eigene Stylesheets ║| | | | | ╚═══════════════════════════════════════╝| | | | └── main.js| | | | ╠═══════════════════════════════════════╗| | | | ║ Einstiegspunkt für eigenes JavaScript ║| | | | ╚═══════════════════════════════════════╝| | | ├── config/| | | | └── config.xml| | | | ╠══════════════════════════════════════════════╗| | | | ║ Zusätzliche Backend-Konfiguration für Plugin ║| | | | ╚══════════════════════════════════════════════╝| | | ├── views/| | | | └── storefront/| | | | ╠═══════════════════════╗| | | | ║ Eigene Twig-Templates ║| | | | ╚═══════════════════════╝| | | └── theme.json| | | ╠═════════════════════╗| | | ║ Theme-Konfiguration ║| | | ╚═════════════════════╝| | └── [Prefix][ThemeName].php| | ╠════════════════════════════════╗| | ║ Einstiegspunkt für eigenes PHP ║| | ╚════════════════════════════════╝| └── composer.json| ╠══════════════════════╗| ║ Plugin-Konfiguration ║| ╚══════════════════════╝└── vendor/└── shopware/└── platform/└── src/└── Storefront/|╠════════════════╗|║ Standard-Theme ║|╚════════════════╝└── Resources/├── app/| └── storefront/| ├── build/| | ╠═══════════════════════╗| | ║ Webpack-Konfiguration ║| | ╚═══════════════════════╝| ├── dist/| | ╠════════════════════════════════╗| | ║ Kompilierte Scripts und Assets ║| | ╚════════════════════════════════╝| └── src/| |╠═════════════════════════════════════════════╗| |║ Hauptverzeichnis für Quelldateien (JS/SCSS) ║| |╚═════════════════════════════════════════════╝| ├── scss/| | └── base.scss| | ╠═════════════════════╗| | ║ Einstiegspunkt SCSS ║| | ╚═════════════════════╝| └── main.js| ╠═══════════════════╗| ║ JS-Einstiegspunkt ║| ╚═══════════════════╝├── views/| |╠════════════════╗| |║ Twig-Templates ║| |╚════════════════╝| └── storefront/| └── base.html.twig| ╠═════════════════════╗| ║ Einstiegspunkt Twig ║| ╚═════════════════════╝└── theme.json╠═════════════════════╗║ Theme-Konfiguration ║╚═════════════════════╝
Installation und Setup von Shopware 6
Nachdem wir nun die grundlegenden Unterschiede zu Shopware 5 betrachtet und uns einen ersten Überblick über Shopware 6 verschafft haben, können wir (fast) mit der Installation starten. Wir betrachten dabei die Installation über die Kommandozeile auf einem Unix-basierten Betriebssystem (Linux, Mac, etc.). Es gibt auch die Möglichkeit, den visuellen Installer zu nutzen, wovon wir aber abraten, da man in der Konsole bessere Kontrolle hat und Ursachenforschung bei eventuellen Problemen betreiben kann.
Bevor Shopware 6 installiert werden kann, muss allerdings zunächst sichergestellt werden, dass die folgenden Abhängigkeiten installiert sind:
| Abhängigkeit | Prüfen mit | Installieren z.B. mit |
| Composer | composer -v | brew install composer |
| Git | git –version | brew install git |
Außerdem muss sichergestellt werden, dass ein lokaler Webserver mit PHP 7 und MySQL installiert ist. Dazu empfiehlt sich die Verwendung von MAMP, womit sich virtuelle Hosts ganz einfach erstellen und verwalten lassen. MAMP bringt dabei auch PHP und MySQL mit.
PHP 7 und MySQL müssen auf der Kommandozeile verfügbar sein. Das kann man mit php -v bzw. mysql -v prüfen.
Nachdem alle Voraussetzungen erfüllt sind, kann folgender Befehl ausgeführt werden, um das aktuelle Repository von Shopware 6 lokal zu klonen:
git clone https://github.com/shopware/development MeinShopware6Projekt
Nachdem das Repository geklont wurde, lässt man den lokalen Webserver auf das Verzeichnis /public zeigen.
Nun geht man in das neue Verzeichnis: cd MeinShopware6Projekt
Dort führt man nun das Setup-Skript mit folgendem Befehl aus: bin/setup
Das Skript fragt nach diversen Daten wie Datenbank-Host, -Nutzer, und -Passwort. Nachdem diese eingegeben sind, führt das Skript automatisch alle notwendigen Schritte aus, um Shopware 6 zu installieren.
Nachdem das Setup abgeschlossen ist, ist das Backend unter /admin mit dem Benutzernamen admin und dem Passwort shopware erreichbar.
Auch für das Frontend hat das Setup einen Testzugang generiert. Eingeloggt werden kann sich unter /account/login mit dem Benutzernamen test@example.com und dem Passwort shopware.
Fazit
Shopware 6 bringt neben grundlegenden Modernisierungen zahlreiche Neuerungen mit sich, die die Entwicklung erleichtern. Gerade Shopware-Neulingen sollte der Einstieg dank zeitgemäßer Technologien wie Twig, Sass, NPM und Bootstrap nun deutlich leichter fallen. Auch dem Endnutzer werden neben Zukunftssicherheit und deutlich verbesserter User Experience im Backend viele neue Möglichkeiten geboten.
Wir haben uns in diesem Artikel die Unterschiede zu Shopware 5 angesehen und einen ersten Überblick über Shopware 6 verschafft und dabei gelernt, wie wir Shopware 6 über die Kommandozeile lokal installieren können.