Shopware 5 Theming – Teil 1 – Vererbung

Shopware 5 Theming – Teil 1 – Vererbung

Alexander Wolf 15. November 2016 6

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 schreiben. 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 da. 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 den selben 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. Dann die Artikel selbst und am Ende noch eine Tag Wolke, falls aktiviert.

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.

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

6 Kommentare

  • Super freue mich schon wenn es weitergeht. Hab vom programmieren absolut keine Ahnung aber man ist ja lernfähig.
    Grüße
    Andreas
  • Hallo Andreas,

    vielen Dank für das Feedback! Wir arbeiten mit Hochdruck, weitere Blogposts und Videos für euch zu produzieren.

    Gruß
    Alexander
  • Daumen hoch! Jetzt wird es richtig interessant in der Reihe glaube ich. Weiter so!
  • Hallo Marcel,

    vielen Dank für dein Feedback. Es freut uns sehr, dass dich dieses Thema besonders anspricht.

    Gruß
    Alexander

Was denkst du?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Shopware 5.3 - Wichtige Neuerungen auf einen Blick
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.