Shopware 6

Theme-Entwicklung für Shopware 6: Twig-Templates und SCSS
Keine Kommentare

Mit einigen Anpassungen lässt sich jedes Shopware 6 Theme noch zusätzlich den eigenen Wünschen entsprechend umgestalten. Wir möchten an dieser Stelle genauer darauf eingehen, was sich mit Shopware 6 verändert und welche neuen Möglichkeiten sich im Hinblick auf Themes und Templates durch die Überarbeitung des Systems ergeben.

Nach dem großen Erfolg von Shopware 5 erfolgte nun die Veröffentlichung der neuen Version: Shopware 6. Die Vielzahl neuer Funktionen und die gründliche Überarbeitung der Administration sorgten dafür, dass bereits viele Shopbetreiber den Schritt zur neuen Version 6 wagten. Dabei stellt sich zusätzlich die Frage nach dem passenden Theme für den Shop, denn auch hier hat sich einiges geändert. Bereits für die Nutzung des standarisierten Shopware-6-Templates gibt es viele überzeugende Argumente. Schon bei der letzten Shopware-Version war das Standard-Theme responsive – es hat sich also flexibel an die Größe des Endgeräts angepasst. Beim Shopware-6-Template ist das nicht anders: Die Ansicht auf dem Mobiltelefon unterscheidet sich von der auf dem PC, was dem Anwender eine besonders leichte Bedienung ermöglicht. Gleichzeitig stellt Shopware 6 auf diese Weise sicher, dass sich das Theme positiv auf die Conversions auswirkt. Natürlich bietet das standarisierte Shopware 6 Theme zahlreiche neue Technologien und Features, durch die sich zahlreiche Anpassungen vornehmen lassen. Die Möglichkeiten der Individualisierung sind dadurch deutlich höher als das noch bei Shopware 5 der Fall war.

Responsive Templates von Shopware 6

Shopware 6 ist für Frontend-Entwickler eine echte Freude. Die unzähligen Möglichkeiten zur Individualisierung bieten die perfekte Grundlage für einen einzigartigen Shop mit Wiedererkennungswert. Dabei gibt es jedoch auch einige Fallstricke. Vorgefertigte Themes bieten dem Betreiber des Shops zwar oft die Möglichkeit, die Farben nach den eigenen Vorstellungen zu verändern und ein Logo an der gewünschten Stelle einzufügen, lassen sich allerdings im Großen und Ganzen nicht weiter anpassen. Die Crux: Wenn noch weitere Unternehmen auf dieses Shopware 6 Theme zurückgreifen, ähneln sich die Designs oft bis ins kleinste Detail – lediglich durch Logo und Farbgebung kann unterschieden werden. Der Wiedererkennungswert solcher vorgefertigten Themes ist daher eher gering. Auch sollte das Shopware 6 Theme immer auf die Bedürfnisse und Erwartungen der Kunden angepasst werden. Es ist zwar schön, wenn das Theme dem Betreiber des Shops gefällt, aber schlussendlich spielt vor allem der Geschmack der Zielgruppe eine essenzielle Rolle. Daher sollte bei einem Shopware 6 Theme immer darauf geachtet werden, dass das Design der Zielgruppe gerecht wird. Wer sich für ein Theme entscheidet, sollte immer im Blick haben, dass es noch zusätzliche Anpassungsmöglichkeiten und Features gibt, die beliebig genutzt werden können. Nur so kann sich der eigene Shop von den Shops anderer Anbieter unterscheiden und einen echten Wiedererkennungswert generieren.

Tipps zum Kauf eines Shopware 6 Themes

Neben der Nutzerfreundlichkeit, dem Responsive Design und den Anpassungsmöglichkeiten gibt es noch einige weitere Faktoren, die beim Kauf eines Shopware-6-Templates beachtet werden sollten:

  • Kompatibilität: Die meisten Shopbetreiber nutzen nicht nur vorgefertigten Templates, sondern auch verschiedene Plug-ins, mit denen sich das Nutzererlebnis verbessern lässt. Wer viel Geld für zusätzliche Features ausgegeben hat, sollte daher auf Nummer sicher gehen, dass das gewählte Theme mit den vorhandenen Plug-ins kompatibel ist. Vor dem Kauf eines fertigen Themes sollte daher die Funktionalität im Zusammenspiel mit allen Plug-ins überprüft werden. Dafür bietet sich die dreißigtägige Testversion an, die Shopware im eigenen Store für jedes Theme zur Verfügung stellt. Natürlich sollten die Testläufe nie im aktiven Shop durchgeführt werden, da das Benutzererlebnis für die Kunden beeinträchtigt werden könnte.
  • Updates: Ein gutes Shopware 6 Theme sollte in regelmäßigen Abständen upgedatet werden. Da Shopware selbst immer wieder Updates und Verbesserungen veröffentlicht, müssen oft auch die Themes an neuen Gegebenheiten angepasst werden. Hier spielt auch die Schnelligkeit eine Rolle, denn nach dem Veröffentlichen eines Updates sollte das Theme so schnell wie möglich an die neuen Anforderungen angepasst werden, um ein reibungsloses Shoppingerlebnis für die Kunden und eine vollumfängliche Funktionalität des Onlineshops zu gewährleisten.
  • Support: Bei den regelmäßigen Updates setzt natürlich auch der Support des Themes an. Die möglichen Szenarien, die einen Support erfordern, sind vielfältig: viele Fehler, angefangen bei inkompatiblen Plug-ins über eine schlechte Performance bis hin zu Abstürzen, können auch beim besten Theme auftreten. Mit einem ordentlichen Support sollte das allerdings kein Problem sein.
  • Performance: Nur ein schnelles Theme bietet für den Kunden ein entspanntes Kauferlebnis. Ein Onlineshop, bei dem einzelne Bereiche des Themes oder gar die ganze Seite nur sehr langsam laden, ist tendenziell eher unattraktiv für Kunden. Aber auch auf das Suchmaschinenranking wirkt sich eine lange Ladezeit des Themes sehr negativ aus.

Die Alternative – ein eigenes Theme entwickeln

Wer bereits über grundlegende Kenntnisse über die Shopware-Kommandozeile, Sass/SCSS, Twig und Shopware 6 verfügt, kann sich auch an die Entwicklung eines eigenen Themes wagen. Dafür sollte mit Hilfe eines Konsolenbefehls zunächst ein Theme angelegt werden:

bin/console theme:create

Das System fordert den Nutzer nun dazu auf, einen Namen für das Theme einzugeben, unter dem die Vorlage abgespeichert wird. Damit das System die Eingabe als Theme erkennt, muss jeder Theme- bzw. Plug-in-Name in Camel Case geschrieben und mit einem Vendor Prefix angegeben werden. Daraufhin legt Shopware im Ordner /custom/plugins automatisch ein eigenes Verzeichnis an. Direkt im Anschluss folgen die Installation und Aktvierung des Themes. Hier stehen für den Nutzer gleich zwei unterschiedliche Möglichkeiten zur Auswahl: Die Aktivierung über das Backend direkt im Browser oder mit Hilfe der Konsole. Da die meisten Entwickler den Prozess über die Konsole bevorzugen, möchten wir hier genauer darauf eingehen.

Shopware 6 stellt einen allgemeinen Befehl zum Installieren und Aktivieren von Themes und Plug-ins zur Verfügung, der auch hier verwendet werden kann: bin/console plugin:install –activate NameDesThemes, wobei selbstverständlich der im Vorfeld hinterlegte Name des Themes angegeben werden muss. Damit das Theme auch im Frontend angezeigt wird, muss noch ein entsprechender Sales Channel zugewiesen werden. Auch dafür stellt Shopware 6 natürlich einen Konsolenbefehl zur Verfügung:

bin/console theme:change

Im Anschluss öffnet sich ein automatisiertes Skript, das die unterschiedlichen Channel auflistet, denen das Theme zugewiesen werden kann. Hier sollte für einen Onlineshop immer die Storefront gewählt werden. Das ist auf zwei Arten möglich: Vor dem entsprechenden Channel steht eine Zahl, die in die Konsole eingegeben werden kann. Alternativ lässt sich der gewünschte Channel mit Hilfe der Pfeiltasten markieren und durch ENTER auswählen. Im Anschluss fragt das Skript automatisiert das Theme ab, das mit dem Channel verbunden werden soll. Hier folgt man nun einem identischen Prinzip, bei dem man das neu kreierte Theme entweder über die vorgesehene Nummerierung oder mit Hilfe der Pfeiltasten auswählt. Für eine reibungslose Funktionalität sollte im Anschluss der Cache des Onlineshops gelöscht werden. Auch hierfür verwendet man einen gängigen Konsolenbefehl:

bin/console cache:clear

Die individuelle Konfiguration

Nach dem Aufsetzen und der Aktivierung eines neues Themes werden Sie feststellen, dass zunächst kein Unterschied zum bisherigen Storefront-Theme zu sehen ist. Das ist von Shopware 6 allerdings durchaus so gewollt, da zunächst alle Templates, Assets und Einstellungen des bisherigen Themes weitergegeben werden, um eine vollständige Funktionalität sicherzustellen. Für eine individuelle Konfiguration wird auf die Datei theme.json im src/resources-Ordner des Themes zurückgegriffen. Hier bieten sich dem Entwickler zahlreiche Möglichkeiten, mit denen eine Anpassung nach eigenen Vorstellungen umgesetzt werden kann. Die Werte lassen sich dadurch einstellen, dass die Standardvariablen des ursprünglichen Themes aus der Storefront überschrieben werden.

webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

IT Security Summit 2020

Zero Trust – why are we having this conversation?

mit Victoria Almazova (Microsoft)

Digitaler Ersthelfer

mit Martin Wundram (DigiTrace GmbH)

Mit Twig-Templates für ansprechende Themes sorgen

Von Shopware 5 werden viele Entwickler vermutlich noch Smarty kennen, die hauseigene Template-Engine, mit deren Hilfe Anpassungen am Theme sehr leicht möglich waren. Bei Shopware 6 nennt sich der Nachfolger dieser Template-Engine Twig – und die Anwendungsmöglichkeiten ähneln sich stark, sodass den meisten Entwicklern die Umstellung sehr leichtfallen wird. Die benötigten Templatedateien sind zu Beginn der Arbeiten noch nicht vorhanden. Zunächst muss ein entsprechendes Verzeichnis angelegt werden: /custom/plugins/NameDesThemes/src/resources/views/storefront, wobei auch hier der Name des Themes entsprechend eingefügt werden muss.

Direkt im Browser kann nun ein bestimmtes Element des Themes gesucht werden, das bearbeitet werden soll. Dafür greift man zunächst auf das bereits vorhandene Template in der Storefront zurück, in dem die benötigten Dateien vorzufinden sind:

/vendor/shopware/platform/rc/storefront/resources/views/storefront

Die Datei, die im Anschluss im eigenen Theme überarbeitet werden soll, kann nun mit wenigen Handgriffen kopiert und gespeichert werden. Hier lassen sich Veränderungen vornehmen, die nicht in das Storefront Theme übertragen werden. Anhand des Namens der Datei lassen sich die Änderungen jedoch automatisch in Shopware speichern. Auch bereits vorhandene Templates können auf diese Weise angepasst und verändert werden.

Die Alternative: Stylesheets auf Grundlage von SCSS

Auch mit eigenen Stylesheets lässt sich das Design der Shopware 6 Themes anpassen. Dafür findet man im Ordner /custom/plugins/NameDesThemes/src/resources/app/storefront/src/scss eine Datei mit dem Namen base.scss, die als Grundlage für alle eigenen Stylesheets dient. Direkt in dieser Datei können flexibel die Werte angepasst werden, um beispielsweise die Farbgestaltung im Frontend anzupassen. Dabei sollten nicht alle SCSS-Regeln in einer einzigen Datei gespeichert werden. Stattdessen greifen die meisten Entwickler auf sogenannte Imports zurück. Aber Vorsicht: Mit Shopware 6 profitieren Anwender nur im Hot Mode von einem LibSass-Compiler. Grundsätzlich unterstützt das System nur eine Sass-Implementierung, sodass die SCSS-Syntax verwendet werden kann.

Themes kompilieren

Insbesondere im Zusammenspiel mit Stylesheets ist es wichtig, ein Theme zu kompilieren. Der gängigste Befehl, der dafür verwendet wird, lautet:

./psh.phar storefront:build

Dabei handelt es sich um einen einmaligen Befehl, durch den unmittelbar nach der Anwendung das Theme kompiliert wird. Abhängig von der eigenen Hardware und dem Umfang der durchgeführten Arbeiten nimmt dieser Prozess mitunter einige Minuten in Anspruch. Alternativ kann der Anwender zum sogenannten Hot Mode von Shopware 6 greifen, sodass alle Änderungen, die mit Stylesheets oder via JavaScript umgesetzt wurden, sofort im Browser sichtbar werden. Dabei muss weder die Seite aktualisiert noch die Kompilierung bei jeder Änderung durchgeführt werden. Wer den Hot Mode von Shopware 6 nutzen möchte, kann folgenden Befehl in der Konsole eingeben:

./psh.phar storefront:hot-proxy

Schon wenige Augenblicke später öffnet sich automatisiert ein neues Browserfenster, in dem der Hot Mode aktiviert wurde. Alle Änderungen, die in den SCSS-Dateien vorgenommen werden, sind sofort in diesem Browsermodus sichtbar. Das spart bei der Entwicklung eines eigenen Themes deutlich Zeit.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -