Shopware 5 Theming – Teil 1 – Vererbung

Shopware 5 Theming – Teil 1 – Vererbung

Alexander Wolf 15. November 2016 10

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.

10 Kommentare

  • Hallo!

    Erst einmal danke für die tollen Beiträge. Helfen mir oft weiter. Ich habe mal eine Anwenderfrage und denke in diesen Beitrag passt sie gut rein.

    Ich habe mir ein Child Theme vom Responsive Theme ausgehend über das Backend angelegt. Nun habe ich im frontend/index eine index.tpl eingepflegt die, die ursprüngliche Datei erweitern/verändern soll.

    Problem: Sobald ich da was einpflege, killt es das Theme. Wenn man die komplette Datei kopiert und in mein Child Theme anlegt, also also nicht korrekt ableitet, dann geht es.

    Aber wenn ich versuche einen Block zu erweitern, dann killt er jedes Mal das Theme. Das ist auch so, wenn da nur der Code aus der Doku drin steht. sprich der smarty parent blog oder das was ihr in eurem anderen Beitrag beispielhaft drin habt.

    Nun habe ich die Vermutung, das er im Responsive Theme nach der index.tpl sucht die er erweitern kann, da aber keine findet. Könnte das das Problem sein? Bin etwas ratlos. Wie gesagt, erweitern geht in dieser Konfiguration garnicht, aber Dateien komplett ersetzen schon. Muss ich vuelleicht vom Bare ableiten? Aber dann wören ja die Responsive Vorteile dahin. Gibts einen groben Fehler den man da machen kann?
  • Hey Matthias,

    du musst beim Erweitern von der Eltern Datei richtig erben und vom "parent" ableiten. Erst dann kannst du einzelne Bloecke ueberschreiben oder erweitern.

    Auf keinen Fall im Bare oder Responsive Theme Anpassungen machen. Wenn du vom Bare Theme ableitest, bekommst du genau das Problem, welches du hier beschrieben hast, daher ist dein Weg richtig :)

    Gruß
    Alexander
  • Hallo,

    gibt es auch eine Möglichkeit irgendwie zu sehen, welcher BEreich einer Webseite in welcher .tpl Datei erzeugt wird? Ich suche oft lange bis ich finden kann wo sich der Bereicht versteckt. Schön wäre hier eine Map auf der man sieht, welche Bereich auf der Webseite in welcher Template Datei generiert wird. GIbt es sowas?
  • Hey Dominic,

    das stimmt. Das Problem hatte ich anfangs auch immer!

    Mittlerweile kann das der FroshProfiler: https://github.com/FriendsOfShopware/FroshProfiler/releases

    Hinter dem Link versteckt sich die "Release" Seite des Plugins, sodass du es direkt runterladen und bei dir im Shop installieren kannst.

    Gruß
    Alexander
  • 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?

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Logo Größe mit Less für Shopware 5 anpassen
Shopware Theme: Eigenes Listing Layout erstellen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Plugin Themes überschreiben und anpassen
Staging Umgebung – Was ist das und warum brauchst du eine?
Shopware Theme Entwicklung: Der große Livestream!
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst

Bessere plätze bei google?

Sicher Dir unser neues Shopware SEO Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Über 8mylez

✓ 20 Mitarbeiter

✓ Shopware Solution Partner

✓ 22.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

© 2020 by 8mylez GmbH //  Impressum + Datenschutz