Mini-Guide zum Templating mit Twig bei Shopware 6

Die Basis für die Template-Entwicklung von Shopware ist das PHP-Webframework Symfony. Hierbei verwendete Shopware bisher die Template-Engine Smarty. Dies hat sich jetzt mit dem Update auf Shopware 6 geändert – hier ist die Template-Engine Twig im Einsatz. Viele Dinge sind gleich oder zumindest sehr ähnlich, dennoch kann der Einstieg in Shopware 6 mit dem neuen Template-System sehr verwirrend sein.

Um einen groben Überblick über Twig zu bekommen, haben die Experten unserer Shopware-Agentur Stuttgart, Heilbronn und Nürnberg die wichtigsten Informationen zusammengefasst und kurz erklärt. Für dieses Tutorial ist es von Vorteil, wenn Sie bereits grundlegende Erfahrungen mit Smarty besitzen und bereits ein Shopware 6 Theme erstellt und bereits installiert haben.

Twig-Blöcke

Ebenfalls wie in Smarty wird bei Twig der HTML-Code in Blöcke unterteilt. Diese Unterteilung ist dafür da, den Code zu strukturieren und vor allem die Blöcke gezielt wiederzuverwenden und/oder zu überschreiben. Je mehr Blöcke man verwendet, desto flexibler ist man in der Wiederverwendung und erhöht bis zu einem gewissen Maße die Übersicht seines Codes dank der Strukturierung. Laut Shopware beeinflusst die Verwendung von vielen Blöcken nicht bzw. nicht unbedingt merkbar die Performance des Shops.

Shopware-Template erweitern

Um ein Template zu erweitern, muss dieselbe Datei mit gleicher Ordnerstruktur im eigenen Theme erstellt und der sw-extends-Befehl verwendet werden. Shopware hat den Twig-Befehl extends hier erweitert, um eine Multivererbung zur Verfügung zu stellen.

Beispiel: Wir wollen die Suche aus dem Header entfernen.

Für die Header-Suche ist folgende Template-Datei verantwortlich: views/storefront/layout/header/search.html.twig. Um diese Datei zu überschreiben, muss im Theme eine gleichnamige Datei unter gleicher Ordnerstruktur erstellt werden:

Schritt 1 – Twig-Datei erstellen

• Erstellen Sie die Datei search.html.twig unter views/storefront/layout/header in Ihrem Theme.

Schritt 2 – sw-extends-Befehl verwenden

• Erweitern Sie mit folgender Code-Zeile die Originaldatei der Header-Suche. Der sw-extends-Befehl referenziert sich auf die Originaldatei:
  

  {% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}

  
  

10h

pro Monat

Sie benötigen Shopware-Support?

Sprechen Sie mit zertifizierten Entwicklern

• Support ab 10 Stunden / Monat
• Kompetente Beratung
• Lösungen von zertifizierten Shopware-Entwicklern

Jetzt Support-Kontingent sichern

Schritt 3 – Header-Suche ausblenden:

• Erstellen Sie einen leeren Block, um den Inhalt zu löschen: Wenn Sie den obersten Block der Originaldatei kopieren und leerlassen, wird kein Inhalt für die Header-Suche ausgegeben.
  

  {% block layout_header_search %}
  {% endblock %}

Die Header-Suche wird jetzt ausgeblendet.

Elternelemente

Um neue Inhalte vor oder nach dem Originalinhalt des Blocks zu platzieren, muss nicht der komplette Code der Originaldatei kopiert werden – hierfür wird der sogenannte parent-Befehl verwendet. Am besten erklärt sich dieser Befehl anhand folgenden Beispiels, in dem vor und nach der Header Suche Inhalt ausgegeben wird:

{% block layout_header_search %}
    Inhalt vor der Suche
    {{ parent() }}
    Inhalt nach der Suche
{% endblock %}

Der parent-Befehl gibt den Inhalt des Original-Templates an der Stelle aus, an der der Befehl verwendet wird. So lässt sich ganz simpel Inhalt davor und danach platzieren.

Textbausteine verwenden

Um Default-Shopware-Textbausteine an beliebiger Stelle im Theme zu verwenden, benötigt man den Namen des Textbausteines. Den richtigen Namen kann im Backend über Einstellungen > Shop > Textbausteine und schließlich über die Auswahl des Textbaustein-Sets heausgesucht werden.

Im Template selbst verwendet man bspw. den Textbaustein für den Placeholder der Header-Suche so:

{{ "header.searchPlaceholder"|trans }}

Der trans-Filter nach dem Textbaustein-Aufruf sorgt dafür, dass der Textbaustein automatisch in der jeweiligen Übersetzung verwendet wird.

Template-Dateien inkludieren

Möchte man bspw. den Preis des aktuellen Produktes auch an einer anderen Stelle verwenden, kann man diesen Teil mit Twig inkludieren. Der zugehörige Befehl lautet sw-include. Auch hier hat Shopware den Standard-Befehl include aufgrund der Mehrfachvererbung erweitert. Ein Code-Teil könnte hier wie folgt lauten:

{% block component_product_box_price %}
    {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
{% endblock %}

Nun sind Sie gewappnet, für erste kleinere Twig-Anpassungen in Ihrem Theme wie bspw. ein Template erweitern oder die Verwendung von Textbausteinen. Für einen tieferen Einblick in die Twig-Features empfehlen wir die offizielle Twig-Dokumentation. Zudem finden Sie im offiziellen Shopware 6 Theme-Guide mehrere Anwendungsbeispiele für Ihren Shop.