Änderungen am Template vornehmen

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, das 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.

Einen detaillierten Guide zum Erstellen und Bearbeiten findest Du hier in unserer Developer Dokumentation. 

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.

Fehlende Angaben in den Dokumenten hinzufügen

Du kannst in den Einstellungen eines Dokuments die E-Mail-Adresse und die Website des Unternehmens angeben. Diese werden im Standardtemplate jedoch nicht auf den Dokumenten ausgegeben. Um diese hinzuzufügen, ist eine Anpassung der base.html.twig erforderlich. Die Ableitung erfolgt im Verzeichnis custom/plugins/DeinTheme/src/Resources/views/documents/.
Sollte die Datei und/oder das Verzeichnis noch nicht vorhanden sein, lege sie entsprechend an.

In die Datei fügst Du folgendes ein:

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

{% block document_footer_first_column %}
    {{ parent() }}
    <ul>
        {% block document_footer_companyEmail %}
            {% if config.companyEmail %} 
                <li class="bold">E-Mail</li>
                <li><a href="mailto:{{ config.companyEmail }}">{{ config.companyEmail }}</a></li>
            {% endif %}
        {% endblock %}
        {% block document_footer_companyUrl %}
            {% if config.companyUrl  %} 
                <li class="bold">Webseite</li>
            <li ><a href="{{ config.companyUrl }}"> {{ config.companyUrl }}</a></li>
            {% endif %}
        {% endblock %}
</ul>
{% endblock %}

Ggf. ist es anschließend erforderlich, den Shopcache zu leeren. Dies kannst Du über die Konsole mittels des Befehls

php bin/console cache:clear

oder im Admin unter Einstellungen > System > Caches & Indizes > Caches leeren durchführen.

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.

Zusatzfelder in der Storefront ausgeben

Je nachdem, an welcher Stelle Du in der Storefront das Zusatzfeld ausgeben möchtest, ist es wichtig, beim Zusatzfeld die passende Verwendung ausgewählt zu haben. Dies ist über die Auswahl im Feld Verwenden für möglich und wird in der Dokumentation der Zusatzfelder näher erläutert.

Als Beispiel möchten wir ein Zusatzfeld auf Produktebene ausgeben. Der Inhalt soll auf der Produktdetailsseite im Tab Beschreibung eingebunden werden.

Hierzu ist eine Anpassung der Datei description.html.twig notwendig.
Daher wird nun eine Ableitung der Datei description.html.twig benötigt.
Diese wird im Verzeichnis /custom/plugins/DeinTheme/src/Resources/views/storefront/page/product-detail/
abgelegt. Sollten der Verzeichnispfad bzw. die Datei nicht vorhanden sein, lege Diese an.

Die Ableitung in der Datei beginnt mit der Zeile

{% sw_extends '@Storefront/storefront/page/product-detail/description.html.twig' %}

Der weitere Inhalt der Datei ist abhängig davon, an welcher Stelle der Inhalt des Zusatzfelds angezeigt werden soll.
In unserem Beispiel soll dies unterhalb des Beschreibungstextes erfolgen.
Im nächsten Schritt ist daher die Einbindung des Originalinhalts des Blocks page_product_detail_description_content_text notwendig.
Dies ist über

{% block page_product_detail_description_content_text %}

sowie

{{ parent() }}

möglich.

Für die Einbindung des Zusatzfeldes wird 

{{ page.product.translated.customFields.technischer_name_zusatzfeld }}

verwendet.
Den technischen Namen kannst Du in den Einstellungen des Zusatzfeldes entnehmen. Dieser beginnt im Standard mit custom_.

Die vollständige, abgeleitete Datei description.html.twig sieht dann wie folgt aus.

{% sw_extends '@Storefront/storefront/page/product-detail/description.html.twig' %}

{% block page_product_detail_description_content_text %}
    {{ parent() }}
    {{ page.product.translated.customFields.technischer_name_zusatzfeld }}
{% endblock %}

Aufbau der Variablen

Die Variablen der Zusatzfelder bestehen zum einen aus allgemeinen Teil und zum anderen aus dem technischen Namen. Der allgemeine Teil ist davon abhängig, für welchen Bereich das Zusatzfeld verfügbar gemacht wurde.
Beachte bitte, dass de Verfügbarkeit auch davon abhängt, auf welchem Seitentyp Du dich befindest.
Um alle verfügbaren Variablen aufgelistet zu bekommen, nutze die Dump-Funktion.

Kategorien
{{ page.footer.navigation.active.translated.customFields.technischer_name_zusatzfeld }}

Produkte
{{ page.product.translated.customFields.technischer_name_zusatzfeld }}

Hersteller
{{ page.product.manufacturer.translated.customFields.technischer_name_zusatzfeld }}

Kunden
Freitextfelder zu Kunden sind nur verfügbar, wenn der Kunde eingeloggt ist.
{{ page.customer.customFields.technischer_name_zusatzfeld }}
oder
{{ context.customer.customFields.technischer_name_zusatzfeld }}
Über die Variable {{ context... }} ist bei eingeloggten Kunden an vielen Stellen die Information verfügbar.

Adressen
{{ page.address.customFields.technischer_name_zusatzfeld }}

Verkaufskanäle
{{ context.salesChannel.translated.customFields.technischer_name_zusatzfeld }}

Shopware Logo und Schriftzug "Realisiert mit Shopware" entfernen

Im Standard-Theme wird im Footer der Zusatz "Realisiert mit Shopware" inklusive des Shopware Logos ausgegeben. Solltest Du dies nicht in Deinem Shop anzeigen wollen, beschreiben wir Dir hier die notwendigen Änderungen.

Entfernen des Logos

Solltest Du noch keine eigene Template-Struktur verwenden, lege diese bitte wie unter Eigenes Theme erstellen beschrieben an.

Ableiten der Template-Datei
In Deinem Template wird die Änderung in der Datei footer.html.twig durchgeführt. Die Datei legst Du im Verzeichnis /custom/plugins/DeinTheme/src/Resources/views/storefront/layout/footer ab. Sollte die Unterverzeichnisse views/storefront/layout/footer nicht vorhanden sein, lege diese an.

In die Datei fügst du folgendes ein:

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

    {% block layout_footer_copyright %}
        <div class="footer-copyright">
            {{ "footer.copyrightInfo"|trans|sw_sanitize }}
        </div>
    {% endblock %}

Anschließend wird das Shopware-Logo nicht mehr im Footer angezeigt.

Entfernen des Schriftzugs

Den Schriftzug "Realisiert mit Shopware" kannst Du über die Textbausteine entfernen. Hierzu navigierst Du in Deiner Administration zu den Einstellungen und öffnest unter Shop die Textbausteine. Nun wählst Du das gewünschte Textbaustein-Set aus und bearbeitest dieses. In dem Suchfeld am oberen Rand gibst Du den Namen "footer.copyrightInfo" ein. Anschließend wird Dir der gesuchte Textbaustein angezeigt, in welchem Du einfach den Wert "Realisiert mit Shopware" entfernst. Um die Änderung zu speichern, füge nach dem Entfernen des Textes ein Leerzeichen hinzu. Anschließend wird Dir in der Storefront der Schriftzug nicht mehr angezeigt.