Erfahrungen aus dem ersten Shopware PWA Projekt

Unser erster Online Shop auf Basis von Shopware PWA steht in den Startlöchern, daher will ich meine Erfahrungen teilen, die ich auf dem Weg gesammelt habe. Vielleicht helfen sie dem ein oder anderen beim Start eines neuen Projekts mit Shopware PWA.

Eigenes Base Theme oder Default Theme?

Zu Beginn eines neuen Projekts stellt sich die Frage, ob man als Basis für das Projekt das Default Theme oder ein eigenes Base-Theme (z.B. aufbauend auf dem Default Theme) verwendet.
Vorab: Das Theme kann jederzeit ausgetauscht werden, das ist also keine endgültige Entscheidung. Man kann immer erst einmal ohne eigenes Basis Theme beginnen. Sollte man dann irgendwann merken, dass ein eigenes Basis Theme doch sinnvoll wäre, kann man seine Änderungen im Normalfall einfach in das Theme übernehmen.

Hier einmal ein paar Kriterien, die Indizien für die eine oder andere Variante sein können.

Default Theme

• Shop hat nur eine Sprachvariante
• Shop hat mehrere Sprachvarianten mit dem gleichen Funktionsumfang (reine Übersetzung)

Eigenes Theme

• Shop hat mehrere "Store Views" mit unterschiedlichem Feature-Set
• evtl. mehrere ähnlich aufgebaute Projekte, die sich in mehreren Merkmalen deutlich vom Default-Theme unterscheiden.

Ein eigenes Theme lohnt sich also immer dann, wenn Abweichungen vom Default Theme mehrere Projekte betreffen. Diese Abweichungen können dann einmal zentral verwaltet werden, ohne sie in jedem Projekt einzeln pflegen zu müssen.

Regelmäßig Updates des Default Themes integrieren

Aktuell gibt es sehr regelmäßige Updates, die man auch zügig in das eigene Projekt integrieren sollte, um die Differenz zwischen dem eigenen Stand und des Default Themes nicht zu groß werden zu lassen. So bekommt man nicht nur schnell Bugfixes und neue Features hinzu, die Änderungsliste bleibt auch überschaubar. Im Normalfall gibt es zu jedem Release auch einen Changelog, der oft Update-Anweisungen bei Breaking Changes oder Deprecations enthält.

Bugs & Feature-Requests melden

Findet man einen Bug oder fehlt ein elementares Feature, sollte man dies über ein Github Issue melden. Wenn man sich dazu im Stande fühlt, sollte man den Fehler auch selbst fixen bzw. das Feature selbst implementieren und einen Pull Request stellen. Diese werden vom Core Team (nach eigener Erfahrung) auch zeitnah angesehen, Feedback geliefert und/oder gemerged. Diese Eigeninitiative ist der schnellste Weg, einen Fix oder ein Feature in das nächste Release des Default Themes zu bekommen.
Außerdem finde ich, dass man über diesen Weg bei einer kostenlos nutzbaren Software etwas von dem Wert zurück geben kann, den die Software einem bietet 😉

Dokumentation und Slack Community nutzen

Viele anfänglichen Fragen sind bereits in der Dokumentation erläutert. Sie bietet einen Überblick über das Setup, grundlegenden Konzepte und FAQs.

Über den offiziellen Slack-Channel kann man direkt mit dem Core Team in Kontakt treten und Antworten auf seine Fragen bekommen. Aber auch die Community wächst stetig und man hat so die Möglichkeit, sich mit Entwicklern in der gleichen Situation zu vernetzen. Ich persönlich bin dort auch sehr aktiv und versuche anderen zu helfen.

Composition API verwenden

Wenn man in einzelnen Komponenten des Default Themes Anpassungen in der Logik machen will, sollte man aus meiner Erfahrung in der überschriebenen Komponente die Vue Composition API verwenden. Der Grund ist, dass man so die Anpassungen in der Komponente selbst minimal halten kann, da man die Logik über eine Composition Funktion in eine seperate Datei auslagern kann. In die so nur minimal geänderte Komponente kann man zukünftig viel einfacher Updates aus dem Default-Theme integrieren, da der Vergleich der Default und der eigenen Komponente hauptsächlich nur die Änderungen aus dem Update zeigt.

Keine Scheu vor eigenen Komponenten

In manchen Fällen kann es vorkommen, dass die notwendigen Anpassungen in einer Komponente so groß sind, dass das Überschreiben dieser Komponente aufwändiger ist, als eine eigene Komponente hinzuzufügen. Man sollte sich dann auch nicht scheuen das zu tun, da erfahrungsgemäß auch die Integration von Updates aus dem Default Theme ansonsten nachträglich deutlich schwieriger ist.

Style Änderungen über CSS-Variablen

Soll eventuell nur das Styling einer Komponente angepasst werden, ist ein Überschreiben der Komponente nicht unbedingt notwendig. Viele Styles können mit Hilfe von CSS-Variablen z.B. in src/assets/scss/main.scss überschrieben werden. Gerade die oft zugrunde liegenden Vue-Komponenten aus Storefront UI sind zu einem sehr großen Teil rein über CSS Variablen anpassbar.