#2139 Individuelle Template-Anpassungen (Twig, HTML)

Wenn du das Erscheinungsbild von ThemeWare® mittels einer Template-Anpassung individuell verändern möchtest, dann kannst du diese Anpassung mithilfe dieses Artikels in deinem Shopware 6 Shop (Self-hosted) umsetzen.


Hinweis: Das erstellen eines ThemeWare® Duplikates ist für Template-Anpassungen nicht notwendig. 

Hinweis: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!


Lösungen

  1. Prüfe ob es im Shopware Community Store bereits ein passendes Plugin gibt.
  2. Alternativ kannst du die nachfolgende manuelle Methode nutzen.


Einsicht in den Quellcode

Den grundlegenden Aufbau (Template-Ordner, Template-Dateien, Twig-Blöcke, etc.) gibt das Shopware Theme "Shopware default theme" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.


Auch wenn du die originalen ThemeWare®-Dateien nicht bearbeiten darfst, ist es manchmal nötig, dass du hier etwas nachschaust. Du findest die Dateien unter folgendem Pfad in deinem Shopware Ordner (XXX = Modern, Living, Clean, etc.):

  • Twig: "custom/plugins/TcinnThemeWareXXX/src/Resources/views/storefront/"
  • SCSS: "custom/plugins/TcinnThemeWareXXX/src/Resources/app/storefront/src/scss/"


Individuelle Anpassungen mit dem ThemeWare® Customizing Plugin (für erfahrende Anwender)

Für die Integration von Template-Anpassungen kannst du unser kostenfreies Plugin "ThemeWare® Customizing" einsetzen oder ein eigenständiges Plugin entwickeln. Template-Anpassungen müssen bei Shopware 6 mit einem Plugin und nicht (wie z.B. bei Shopware 5) in einer Theme-Ableitung umgesetzt werden.

Alle Informationen zum Plugin, der Installation und den Download-Link findest du über folgenden Link:


Download ThemeWare® Customizing

1) Plugin vorbereiten

  1. Lade die Zip-Datei unseres Plugins über die Shopware 6 Erweiterungs-Verwaltung hoch.
  2. Installiere und aktiviere das Plugin danach.


2) Template-Dateien anlegen und bearbeiten

  1. Erstelle und bearbeite die gewünschten Template-Dateien
  2. Speichere die Änderung der Dateien und lade diese hoch.
    • Zum Ablegen deiner Anpassungen in der richtigen Ordnerstruktur, beachte bitte den oberen Abschnitt "Einsicht in den Quellcode".


3) Theme kompilieren

  • Öffne ThemeWare® im Theme-Manager und speichere die Einstellungen unverändert ab, damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront übertragen werden.


4) Cache leeren

  • Leere den Shopware Cache über die Hauptnavigation "Einstellungen" => "System" => "Caches & Indizes" > "Caches leeren".
Hinweis: Bei jeder Template-Änderung muss der Shopware- und ggf. dere Browser-Cache geleert werden damit Änderungen in der Storefront wirksam werden.


Hilfreiche Twig-Grundlagen

Eine Template-Datei ableiten

In der ersten Zeile der Datei muss definiert werden, von welcher übergeordneten Datei diese abgeleitet wird.

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

Block überschreiben 

Beispiel-Block "page_product_detail_name_container" der Artikelseite:

{% block page_product_detail_name_container %}
{# Platzieren Sie hier den neuen Inhalt #}
{% endblock %}

Block nach dem Inhalt ergänzen

{% block page_product_detail_name_container %}
{{ parent() }}
{# Platzieren Sie hier den zusätzlichen Inhalt #}
{% endblock %}

Block vor dem Inhalt ergänzen

{% block page_product_detail_name_container %}
{# Platzieren Sie hier den zusätzlichen Inhalt #}
{{ parent() }}
{% endblock %}

Anzeigen aller Variablen

Die Ausgabe von Variablen muss in einem Block erfolgen.

{{ dump() }}

Anzeigen einer ThemeWare®-Variable

Die Ausgabe dieser Variable muss ebenfalls in einem Block erfolgen. Das Beispiel zeigt die ThemeWare®-Konfiguration "Body-Klasse" (Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Feld "Body-Klasse"). Weitere Informationen zu "ThemeWare®-Variablen" folgt im unteren Abschnitt.

{# ab Shopware 6.4 #}
{{ theme_config('twt-body-class') }}

{# Shopware 6.3 oder darunter #}
{{ shopware.theme['twt-body-class'] }}
Wichtig: Änderungen werden erst nach dem erfolgreichen leeren des Shopware Caches angezeigt.


Hinweis: Weitere Informationen rund um "Twig" findest du unter: https://twig.symfony.com/


Zusätzliches ThemeWare®-Wissen

ThemeWare®-Variablen finden

Über unsere Feldsuchmaschine hast du die Möglichkeit alle ThemeWare®-Variablen anzeigen zu lassen. Der "technische Name" in dieser Übersicht ist der Name der entsprechenden Variable, die du in Twig oder SCSS verwenden kannst.


Abgrenzung für ThemeWare®-Anpassungen

Ist eine Template-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung beispielsweise über unsere ThemeWare®-Konfiguration mit der "Body-Klasse" einzuschränken. 

Hinterlege dafür im Theme-Duplikat für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal


Beispiel Body-Klasse: "meinshopname"


Dieser Name kann dann in einer zusätzlichen Schleife auch für Twig genutzt werden.


Eingrenzung im Twig:

{# Anpassung nur für Theme mit der Klasse meinshopname #}

{# ab Shopware 6.4 #}
{% if theme_config('twt-body-class') == "meinshopname" %}
  {# Theme hat die Klasse meinshopname #}
{% endif %} 

{# Shopware 6.3 oder darunter #}
{% if shopware.theme['twt-body-class'] == "meinshopname" %}
  {# Theme hat die Klasse meinshopname #}
{% endif %}



Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

36b35b6b0cec6143d9baf17e8bc7220a
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen