Twig-Templates & Blocks

Die Storefront von Shopware 6 basiert auf Twig und einem cleveren Vererbungssystem. Statt Templates zu kopieren, erweitert man sie gezielt – so bleiben Updates verträglich.

Templates erweitern statt ersetzen

Ein eigenes Template legt sich unter Resources/views/storefront/ an denselben Pfad wie das Original. Mit sw_extends erbt es vom Standard und überschreibt nur einzelne Blöcke:

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

{% block page_product_detail_buy %}
    {{ parent() }}
    <div class="swag-example-hint">
        Versand in der Regel innerhalb von 24 Stunden.
    </div>
{% endblock %}

Warum parent() wichtig ist

{{ parent() }} rendert den ursprünglichen Inhalt des Blocks. Lässt man es weg, ersetzt man den Block komplett – lässt man es stehen, ergänzt man ihn. Meistens will man ergänzen.

Daten ins Template bringen

Zusätzliche Daten reicht man über einen Subscriber (z. B. StorefrontRenderEvent oder das jeweilige PageLoadedEvent) an das Template weiter und greift sie dort ab:

{% if page.extensions.swagExample %}
    <p>{{ page.extensions.swagExample.hinweis }}</p>
{% endif %}

Merke: Blocknamen sind der Schlüssel zur Erweiterung. Ein Blick ins Original-Template zeigt, welche Blöcke es gibt – hier ansetzen, statt ganze Dateien zu überschreiben.

Für eigenes JavaScript und SCSS gilt dasselbe Prinzip: ergänzen über definierte Einstiegspunkte, nicht den Core anfassen.