Änderungen am Template vornehmen

Version

6.1.0 oder neuer

Inhaltsverzeichnis

Allgemeine Informationen

Anpassungen am Theme sollten niemals direkt im Standard-Theme erfolgen, sondern immer in einem abgeleiteten Theme durchgeführt werden.

Bitte beachte, dass mit einem abgeleiteten Theme nicht ein Duplikat vom Standard-Theme, das über die Administration erstellt werden kann, gemeint ist.

Eigenes Theme erstellen

Ein eigenständiges Theme, in dem dann vom Standard-Theme abgeleitet werden kann, kannst Du wie folgt anlegen:

Zunächst wird über die Konsole mittels des Befehls 


php bin/console theme:create

das Theme generiert.
Dieses stellt dann ein Plugin bereit, das im Plugin-Manager (Einstellungen > System > Plugins) aufgelistet wird.
Damit das Theme verwendet werden kann, ist es dann noch erforderlich, dass Plugin im Plugin-Manager zu installieren und dann zu aktivieren.
Informationen zum Plugin-Manager findest Du hier

Anschließend steht das Theme zur Verwendung bereit und kann über die Einstellungen innerhalb des Verkaufskanals zugewiesen werden.

Grundlegende Funktionen

Datei im eigenen Theme ableiten

Wie eingangs erwähnt, sollten die Anpassungen immer in einem eigenen Theme erfolgen.
Hierzu kannst Du die entsprechende Datei, in der Du Anpassungen vornehmen möchtest, in Deinem Theme ableiten.
Als Grundlage für die Erweiterung des Frontend-Themes dienen die Dateien im Verzeichnis /vendor/shopware/storefront/Resources/views/storefront.
Die Ableitung erfolgt in der Datei und ist für die Storefront wie folgt möglich.


{% sw_extends '@Storefront/storefront/ordner1/ordner2/datei.html.twig' %}

Die abgeleitete Datei erhält ebenfalls die Dateiendung ".html.twig", sinnvollerweise auch den Namen der Originaldatei.
Anschließend legst Du die Datei im Verzeichnis /custom/plugins/DeinTheme/src/Resources/views/storefront/ordner1/ordner2 auf dem Server ab.

DeinTheme ist der Platzhalter für den Namen Deines Themes.
Die ordner1 und ordner2 entsprechen der Verzeichnisstruktur aus dem Originalverzeichnis. Hier setze die entsprechenden Originalbezeichnungen ein.

Funktionen innerhalb der .html.twig-Datei

Alle verfügbaren Variablen ausgeben


{{ dump() }}

Dies stellt eine Übersicht der auf der Seite verfügbaren Variablen im Frontend zur Verfügung. Um die Auflistung zu erhalten, ist es erforderlich, das Frontend in der Entwickler-Umgebung aufzurufen. Wie dies möglich ist, wird Dir hier näher erläutert.

Block aus der abgeleiteten Datei einbinden


{% block name_des_blocks %}

Hierüber kannst Du einen Block aus der abgeleiteten Originaldatei einbinden. Dadurch kannst Du den Inhalt des Blocks anpassen.

Inhalt des Elternblocks übernehmen


{{ parent() }}

Wenn Du zusätzlichen Inhalt in einem Block platzieren möchtest, ist es nicht erforderlich, den Inhalt der Originaldatei zusätzlich komplett einzufügen.

Beispielsweise kann dies wie folgt aussehen.


{% block name_des_blocks %}
    {{ parent() }}
    {{ "textbaustein"|trans }}
{% endblock %}

Hier wird der zunächst der Inhalt des ursprünglichen Blocks eingebunden. Anschließend wird unterhalb ein zusätzlicher Textbaustein eingefügt.

Einen Textbaustein einbinden


{{ 'TextbausteinName'|trans }}

Den Namen des Textbausteins kannst Du im Admin im Bereich Einstellungen > Shop > Textbausteine entnehmen. Weitere Informationen zu den Textbausteinen findest Du hier.
Der Zusatz "|trans" sorgt dafür, dass die Übersetzungen der einzelnen Textbaustein-Sets berücksichtigt werden.

Eigene Textbausteine im Frontend anzeigen

Solltest Du die gewünschten Textbausteine noch nicht angelegt haben, kannst Du dies im Admin unter Einstellungen > Shop > Textbausteine durchführen. Weitere Informationen zu den Textbausteinen findest Du hier.

Textbausteine einbinden

In diesem Beispiel soll ein eigener Textbaustein im Footer eingebunden werden. Die Vorgehensweise kann auch auf andere Seitenbereiche angewendet werden.

Für die Anpassung des Footers wird die Datei footer.html.twig aus dem Verzeichnis /vendor/shopware/storefront/Resources/views/storefront/layout/footer benötigt.
Diese Datei kannst Du dann in Deinem eigenen Theme unter /custom/plugins/DeinTheme/src/Resources/views/storefront/layout/footer ableiten.

Die Ableitung kann beispielsweise wie folgt aussehen
 


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

{% block layout_footer_service_menu_content %}
    {{ parent() }}
    {{ "sw.test.footer1"|trans }}
{% endblock %}

Als Beispiel wird hier der Textbaustein "sw.test.footer1" eingebunden.

Abschließend kann es erforderlich sein, den Shop-Cache zu leeren. Dies ist über die Server-Konsole mittels des Befehls


php bin/console cache:clear

möglich.
 

Anpassungen am Dokumenten-Template

Die grundlegenden Informationen für die Dokumente (Lieferschein, Rechnung usw.) können direkt in der Administration im Punkt Einstellungen > Shop > Dokumente gepflegt werden.
Solltest Du jedoch tiefergehende Anpassungen an den Dokumenten vornehmen wollen, ist dies auf Dateiebene möglich.

Die Dokumenten-Templates sind wie folgt aufgebaut.
Als Grundlage dient die Datei base.html.twig im Verzeichnis /vendor/shopware/Core/Framework/Resources/views/documents/.
Dieses Datei stellt alle wesentlichen Informationen bereit.
Zusätzlich ist für jeden Dokumententyp eine eigene Datei vorhanden (z.B. für Rechnungen die invoice.html.twig), die die base.html.twig um die für den Dokumententyp relevanten Informationen erweitert.

Im folgenden Beispiel wird die base.html.twig abgeleitet. Diese Datei ist die Grundlage für die einzelnen Dokumente und wird mittels abgeleiteter Dateien für die einzelnen Dokumententypen spezifiziert. So erweitert z.B. die invoice.html.twig die Grunddatei mit den Informationen für die Rechnung.
Alle Originaldateien sind im Verzeichnis /vendor/shopware/Core/Framework/Resources/views/documents/ hinterlegt.

Wie bereits am Anfang dieses Artikels beschrieben, sollten auf keinen Fall Anpassungen direkt an den Originaldateien durchgeführt werden, sondern immer in einer abgeleiteten Datei im eigenen Theme.
Der Pfad, in dem die abgeleiteten Dateien abgelegt werden, ist:
custom/plugins/DeinTheme/src/Resources/views/documents/

Bitte beachte, dass es erforderlich sein kann, einige der Verzeichnisse und die Dateien noch zu erstellen.

In der Datei kannst Du dann die ursprüngliche Datei ableiten und darin Deine gewünschten Anpassungen vornehmen.
Die Ableitung wird mittels

{% sw_extends '@Framework/documents/base.html.twig' %}

durchgeführt.
Nun kannst Du einzelne Blöcke überschreiben.
Wie die einzelnen Blöcke benannt sind, kannst Du in der Standard-Datei unter /vendor/shopware/core/Framework/Resources/views/documents/ einsehen.

Die Anpassung der Dokumenten-Templates wird unabhängig von der Aktivierung des Themes für alle Verkaufskanäle angewendet.
Wenn die Anpassung nur für einzelne Verkaufskanäle verwendet werden soll ist es erforderlich, diese innerhalb der Anpassung einzuschränken.

Anpassung auf einzelne Verkaufskanäle einschränken

Die Einschränkung auf einzelne Verkaufskanäle ist z.B. über eine IF-Abfrage innerhalb der abgeleiteten Datei möglich.

Exemplarisch kann eine Ableitung wie folgt aussehen:


{% sw_extends '@Framework/documents/base.html.twig' %}
{% block document_base %}
   {% if order.salesChannelId == "1438751ce3f0b496bbea293e096aec1fb" %}
      Test 123
   {% else %}
      {{ parent() }}
   {% endif %}
{% endblock %}


In dem o.g. Beispiel wird mittels der ID des Verkaufskanals über ein IF definiert, ob die Überschreibung des gesamten Blocks document_base erfolgen soll.
Stimmt die ID überein, wird der Inhalt durch ein Test 123 ersetzt.
Wenn die ID nicht übereinstimmt, wird mittels des


{{ parent() }}

der Block aus der Elterndatei eingebunden.

Die ID des Verkaufskanals kannst Du in der Datenbank in der Tabelle "sales_channel_translation" aus der Spalte "sales_channel_id" entnehmen. Beachte hierbei, dass das vorangestellte "0x" nicht zur ID gehört und im Template nicht mit angegeben werden darf.
 

War dieser Artikel hilfreich?