Shopware 5 Theming – Teil 1 – Vererbung

Bisher haben wir in einigen Tutorials gezeigt wie etwas angepasst oder erweitert wird.

Funktioniert auch bisher super!

Allerdings braucht man immer genau die Anpassung, die nicht im Tutorial erklärt wird.

Deswegen wollen wir heute etwas mehr in Richtung Theorie gehen, sodass Du bei den zukünftigen Anpassungen genau weißt, warum wir das machen und was im Hintergrund passiert.

So kannst Du in Zukunft Dein Theme nach Deinen Wünschen gestalten!

Template Engine Smarty

Das Frontend in Shopware arbeitet sehr viel mit der Smarty Template Engine. Hört sich kompliziert an, ist es aber nicht.

Smarty erlaubt es uns erst die Template Dateien zu schreiben, wie wir sie kennen. Ohne Smarty wäre das Frontend deutlich komplexer.

Im Prinzip hat Shopware die meiste Arbeit schon erledigt und ermöglicht uns die Anpassung und Erweiterung der Themes per Template Dateien .tpl, sowie LESS (oder CSS).

Es schadet nicht sich die Dokumentation von Smarty anzuschauen, denn die Befehle können wir auch in den Themes verwenden: Smarty Dokumentation

Vererbung / Ableitung

In dem Tutorial: Was Du über die Shopware 5 Theme Struktur wissen musst und wie Du ein erstes eigenes Theme erstellst haben wir Dir gezeigt, wie Du ein eigenes Theme erstellst.

Da haben wir auch vom Ableiten gesprochen.

Das Bare Theme von Shopware stellt die Grundlage für unsere Themes dar. Alle wichtigen Elemente sind in dem Bare Theme vorhanden.

Jedoch ohne Styling. Wenn wir das Bare Theme aktivieren, sehen wir zwar, dass die meisten Elemente vorhanden sind, aber alles durcheinander ist.

Das liegt daran, dass das ganze Styling in dem Responsive Theme von Shopware verfügbar ist.

Du kannst auch komplett bei 0 anfangen und ein eigenes Theme mit eigener HTML Struktur aufbauen. Jedoch ist das sehr aufwändig!

Deswegen arbeiten wir mit den beiden Themes von Shopware, leiten die Funktionalität und das Styling davon ab und überschreiben die Werte die uns nicht gefallen.

Aufbau der einzelnen Seiten

Im Prinzip besteht das Bare Theme von Shopware aus einigen Hauptdateien (Haupttemplates) von denen immer wieder abgeleitet wird, sodass der Shop einen einheitlichen Look bekommt.

Das bedeutet, dass der Header oder Footer in einer Datei erstellt werden. Diese Datei wird dann in andere Dateien eingefügt. Der große Vorteil ist, dass die Änderungen nur an einer Stelle gemacht werden müssen, da wir auf jeder Seite denselben Header und Footer haben wollen.

index.tpl

Fast alles beginnt mit der index.tpl in dem Ordner:

/themes/Frontend/Bare/frontend/index/

Diese index.tpl ist die Mutter aller anderen Template Dateien. Was gibt es alles in dieser Datei?

Sie besteht aus HTML Code, Smarty Blöcken und etwas JavaScript. Im Grunde ist das die grobe Struktur, der Aufbau unseres Shops.

Ganz oben befindet sich der Header, die Navigation mit den Kategorien, der Inhalt mit den Einkaufswelten und am Ende der Footer.

Außerdem gibt es in dieser Datei noch wichtigen Code, um die anderen JavaScript Bibliotheken einzubinden.

Wie funktioniert der Rest?

Die anderen Templates nutzen die index.tpl als Basis und erweitern oder ersetzen die Smarty Blöcke mit eigenem HTML Code, Smarty Blöcken oder JavaScript.

Das ganze System ist im Frontend so aufgebaut. Deswegen können wir in unseren Plugins eigenen Code in unseren Shop einbinden.

Schauen wir uns zunächst an wie die anderen Template Dateien aussehen und wie diese vom Haupttemplate ableiten.

Die Übersicht der Kategorie, auch Listing genannt, finden wir in dem Ordner:

/themes/Frontend/Bare/frontend/listing/

Hier gibt es auch eine index.tpl. In fast jedem Ordner des Bare Themes gibt es eine eigene index.tpl.

In der ersten Zeile der index.tpl im listing Ordner finden wir:

{extends file='frontend/index/index.tpl'}

Mit dieser Zeile leiten wir vom Haupttemplate index.tpl aus dem index Ordner ab. Das heißt, dass wir alle Smarty Blöcke aus dem Haupttemplate haben und anzeigen.

Das Listing unterscheidet sich von dem Haupttemplate!

Wenn Du Dir die restlichen Zeilen anschaust, siehst Du, dass da gleiche Smarty Blöcke auftauchen. Jedoch ist der Inhalt dieser Smarty Blöcke anders.

Der Code wird ersetzt, d. h. der Code aus der Haupt index.tpl aus dem index Ordner wird überschrieben.

Ein Beispiel:

In der index.tpl in dem Ordner:

/themes/Frontend/Bare/frontend/index/

finden wir in Zeile 110 folgenden Block:

{block name='frontend_index_content'}{/block}

Es ist ein leerer Smarty Block mit dem Namen frontend_index_content. Dieser Block wird in anderen Templates dazu verwendet den Inhalt (Content) der jeweiligen Seite einzubinden.

In der index.tpl des Listing im Ordner:

/themes/Frontend/Bare/frontend/listing/

finden wir diesen Block wieder. In den Zeilen 12 - 66 siehst Du, dass da einiges an Code dazu kommt.

Das ist die typische Listing Ansicht. Ganz oben werden entweder Banner, Einkaufswelt oder Topseller angezeigt und dann die Artikel selbst.

Schau Dir auch andere Blöcke an um Erweiterungen zu Entdecken.

Zusammenfassung

In diesem Teil haben wir erklärt, wie die Themes in Shopware 5 arbeiten. Dabei lag das Hauptaugenmerk auf der Vererbung (Ableitung) der einzelnen Templates. Im nächsten Teil zeigen wir Dir, wie Du ganze Templates ersetzen kannst. Außerdem wollen wir ein paar Smarty Blöcke erweitern, ersetzen und löschen.