Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst

Heute schauen wir uns die Shopware 5 Theme / Template Entwicklung genauer an. Zuerst die Theme Struktur und den Aufbau, danach was wir beachten müssen. Zum Schluss legen wir unser erstes eigenes Theme an und passen es mit LESS nach unseren Wünschen an. Viel Spaß wünscht dir deine Shopware Agentur 8mylez.

PS: kennst Du schon unseren Shopware SEO Guide?

Shopware Theme erstellen - Voraussetzung

Wir brauchen einen funktionierenden Shopware Shop für dieses Vorhaben. Entweder habt ihr schon einen Server (gemietet, gekauft oder geklaut) mit einer frischen Shopware 5 Installation. Oder (viel besser) ihr habt MAMP (oder WAMP) runtergeladen wie im Beitrag "4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst" installiert und arbeitet erstmal lokal an eurem (coolen) Theme. 

Das fertige Theme wird es kostenlos im Shopware Store geben, also falls ihr es einfach nur haben wollt ohne es selbst zu schreiben, könnt ihr es hier runterladen.

Fangen wir erst einmal mit der Theorie an. Wir machen nachher auch was praktisches, versprochen! Ihr könnt auch die Theorie überspringen (wer ließt schon die Anleitungen?).

Shopware 5 Template Struktur (Themeaufbau / Vererbung)

Die Shopware AG war so lieb und hat für Shopware 5 schon einmal zwei Themes bereit gestellt. Ein komplett nacktes, das Bare Theme und ein extrem cooles, das Responsive Theme.

Das Bare Theme ist sozusagen der Ursprung aller Themes. Hier sind alle wichtigen Dateien drin die als Grundlage für jedes Theme agieren. Sogar das Responsive Theme basiert auf dem Bare Theme. Zur Zeit benötigen wir es aber nicht direkt, da es wirklich keine Stylesheet Dateien und keine Javascript Dateien besitzt und alles somit extrem langweilig aussieht. Ihr könnt es aus Spaß mal aktivieren und schauen was ihr seht.

Das Responsive Theme ist abgeleitet vom Bare Theme und hat eben die ganzen Stylesheets und Scripts drin um toll auszusehen und auf jedem Endgerät zu funktionieren (daher auch der Name). Es ist wirklich eine Erleichterung wenn ihr mit dem Responsive Theme starten könnt, als alles von Grund auf aufzubauen. Werden wir aber demnächst auch machen.

Ihr könnt euch im Ordner Themes auch die beiden anschauen. Welche Dateien liegen drin usw. Ihr werdet eine bestimmte Ordnerstruktur im Bare Theme feststellen.

Die Ordnerstruktur in der Shopware Doku.

Beim Responsive Theme merkt ihr dann, dass es gar nicht so viele Ordner gibt. Das kommt daher, dass wir vom Bare Theme ableiten und nur die angepassten Dateien neu anlegen, welche in diesem Fall nur LESS/CSS und JavaScript Dateien sind.

Shopware Template erstellen: Es geht ans Eingemachte

Bei unserem Flat Theme wollen wir keine vorhandenen Elemente verschwinden lassen oder neue Elemente ergänzen, daher arbeiten wir nur mit LESS (das ist CSS in cool).

Legen wir zunächst ein neues Theme an

Es gibt natürlich wieder verschiedene Wege. Fangen wir mit dem Einfachsten an: Wir klicken uns durchs Backend von Shopware 5. 

Irgendwann schauen wir uns das Ganze mit der Konsole und den CLI Tools von Shopware an (auch sehr spannend).

Loggt euch ein, geht auf Einstellungen und auf den Theme Manager.

Dieser Manager verwaltet all eure vorhandenen Themes, wenn diese im Theme Ordner liegen. Ihr seht gegebenenfalls auch noch die alten Templates von Shopware 4, aber darum wollen wir uns erst einmal nicht kümmern.

Klickt oben im Fenster auf Theme erstellen und füllt die Felder aus. 

Wichtig: Wir wollen vom Responsive Theme ableiten. Überlegt euch einen coolen Namen, eine Kurzbeschreibung, eine Beschreibung, den Autor (cooler Hackername, ich nehme 8mylez),  die Lizenz (ich nehme MIT) und speichert das Ganze.

Wie hat sich das jetzt angefühlt? Schreibt mir gerne eine Mail mit euren Glücksgefühlen: [email protected].

Aber mal ehrlich, bisher war das doch ganz einfach oder? Sogar meine Oma kriegt das hin (würde sie nicht andauernd ihr Passwort vergessen).

Das Theme weisen wir noch dem Shop zu indem wir es anklicken und rechts in der Leiste auf zuweisen klicken.

Das Fundament ist gegossen und hart geworden. Wir können das Haus nun bauen. Oder besser gesagt: Das Fertighaus wurde bereits geliefert und wir können es jetzt streichen. Zu sehen gibt es im Shop noch nichts, jedenfalls nichts, was sich verändert hat.

Theme anpassen (nur LESS)

Bevor wir uns das coole Blocksystem von Shopware 5 anschauen, wollen wir zunächst nur LESS Anpassungen machen, die in der Regel etwas einfacher sind.

In dem Ordner

themes/Frontend/FlatResponsive/frontend/_public/src/less/

legen wir die Datei

all.less

an. Diese Datei ist sozusagen unsere Hauptdatei. In diese Datei werden alle anderen Dateien importiert. Was bringt das? Jede Menge Übersichtlichkeit, saubere Trennung der einzelnen Module und der Code ist insgesamt natürlich deutlich lesbarer, wenn ihr 50 anstatt 5000 Zeilen habt.

Damit das Ganze noch übersichtlicher ist, trennen wir auch die einzelnen Module. Dafür legen wir unter

themes/Frontend/FlatResponsive/frontend/_public/src/less/_modules

noch die

modules.less

an.

Krallen wir uns also die Navigation und verpassen im Shopware Responsive Theme dem aktiven Link einen Flat Style.

Dazu schauen wir uns im Responsive Theme die Ordnerstruktur an für die Navigation. Da es die Hauptnavigation ist, wird der LESS Code dafür im Ordner

themes/Frontend/Responsive/frontend/_public/src/less/_modules/main-navigation.less

liegen (Und wir hatten sogar Recht!).

Gehen wir wieder zu unserem Theme zurück und legen ebenfalls in dem Ordner, diesmal aber bei uns die LESS Datei an. Also im Ordner

themes/Frontend/FlatResponsive/frontend/_public/src/less/_modules

legen wir die Datei

main-navigation.less

an.

Zu guter Letzt kopieren wir den Code rüber und schmeißen alles raus, was wir nicht brauchen, denn wir wollen nur vorhandene Werte überschreiben (da wir das Theme abgeleitet haben).

Wenn wir uns den Code im Shop Frontend (im Browser) anschauen (Rechtsklick -> Untersuchen), merken wir schnell, dass dort ein Hintergrundbild mit einem linear-gradient genutzt wird für den wundervollen Verlauf. Im Flat Style gibt es keine Verläufe, also raus damit!

Dazu entfernen wir noch den Gradient (indem wir das

background-image: none;

setzen und die Funktion

.primary-gradient()

rausnehmen) und den runden Rand (indem wir bei der Funktion

.border-radius-multi(0, 0, 0, 0);

alle Werte auf 0 setzen).

Damit die Änderungen auch erkannt werden, müssen wir unserer modules.less noch sagen, dass wir eine main-navigation.less angelegt haben. Dazu schreiben wir in unsere modules.less

@import "main-navigation";

Jetzt muss die all.less noch die modules.less eingebunden bekommen.
Dafür fügen wir in die all.less noch

@import "_modules/modules";

ein.

Wir weisen das Theme im Backend nochmal zu, damit wir es kompilieren können (was bei LESS zwingend notwendig ist, warum kommt später) und erfreuen uns an dem neuen Flat Style des aktiven Link in der Hauptnavigation.

Und siehe da: die Navigation hat einen eleganten Flat Style. Kleine Anpassung und das Ganze sieht wie neu aus.

Das waren erstmal Anpassungen mit LESS. Ihr könnt auch ganze Elemente rausschmeißen oder hinzufügen. Das schauen wir uns im nächsten Beitrag an. Tragt euch in den Newsletter ein um nichts zu verpassen!

Tipp: 

Kennst du schon unser Shopware eBook? Verpasse nicht die wertvollen Tipps & Tricks für deinen Shopware Shop: Shopware Tutorial

Weitere Links

• Shopware Grunt
• Shopware Listing Layout