Mein erster onlineshop
mit shopware 5
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!
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
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.
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.
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.
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.
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.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
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?
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
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?
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
Grüße
Andreas
vielen Dank für das Feedback! Wir arbeiten mit Hochdruck, weitere Blogposts und Videos für euch zu produzieren.
Gruß
Alexander
vielen Dank für dein Feedback. Es freut uns sehr, dass dich dieses Thema besonders anspricht.
Gruß
Alexander
Was denkst du?