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 (On-Premises) umsetzen. In der Shopware Cloud sind aktuell keine individuellen Anpassungen möglich.


Wichtig: Das erstellen einer ThemeWare Ableitung ist für diese Anpassungen nicht mehr notwendig. 



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 Ableitung 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



ThemeWare Customizing Plugin

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 den Ordnern der Theme-Ableitung umgesetzt werden.


Download ThemeWare Customizing


Installation

Das Plugin muss nach dem Download über die Administration von Shopware unter "Einstellungen => System => Plugins => Plugin hochladen" installiert werden. Nach der Installation muss das Plugin über den Bereich "Status" aktiviert werden. 


Wichtig: Durch die Installation werden Beispielanpassungen in der Storefront sichtbar.


Funktion und Aufbau 

Durch ThemeWare Customizing ist es jetzt möglich individuelle Template-Anpassungen hinterlegen zu können. Die nachfolgenden Plugin-Ordner und Dateien sind dabei besonders interessant. 


Datei main.scss | Basis für alle Template-Anpassungen mit Scss/Css

Dateipfad: "/custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/main.scss"

In der Datei main.scss sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können.


Ordner storefront | Ausgangsordner für alle Template-Anpassungen mit Twig/Html

Ordnerpfad: "/custom/plugins/TcinnCustomizing/src/Resources/views/storefront"


Datei headline.html.twig | Beispielanpassung der Headline auf der Artikelseite

Dateipfad: "/custom/plugins/TcinnCustomizing/src/Resources/views/storefront/page/product-detail/headline.html.twig


Im Ordner storefront kannst du alle Template-Dateien (.twig) anpassen oder überschreiben, die ThemeWare® oder das Shopware Theme "Shopware default theme" verwenden. Zum Ablegen deiner Anpassungen in der richtigen Ordnerstruktur, beachte bitte den oberen Abschnitt "Einsicht in den Quellcode".


Hilfreiche Twig-Grundlagen

Ableitung in neuer Template-Datei hinterlegen

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.

{{ shopware.theme['twt-body-class'] }}

Wichtig: Änderungen werden erst nach dem erfolgreichen leeren des Shopware Caches angezeigt. 


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


Hilfreiche Sass/Scss-Grundlagen

Individuelle Anpassungen müssen in der Datei main.scss hinterlegt werden. Zur besseren Strukturierung ist es möglich bei zahlreichen Anpassungen auf zusätzliche Ordner und Dateien zurückzugreifen. Diese können ganz einfach per @import "deine-datei.scss" integriert werden.


Beispielanpassung in der Datei main.scss

In diesem Beispiel verwenden wir auch die ThemeWare-Variablen twt-color-brand-primary-light (Tab "Layout" => Bereich "Hauptfarben" => Feld "Primärfarbe Hell") und twt-color-brand-primary-dark (Tab "Layout" => Bereich "Hauptfarben" => Feld "Primärfarbe Dunkel").

// Beispiel nur für die Artikelseite
.is-ctl-product {
  
  // Anpassung Artikelname
  .product-detail-name {
    background-color: $twt-color-brand-primary-light;
    border: 1px solid $twt-color-brand-primary-dark;
    padding: 10px;
    color: #FF0004;
  }
}

Wichtig: Änderungen werden erst nach dem erfolgreichen kompilieren des aktiven Themes angezeigt.


Weitere Informationen rund um Scss findest du unter https://sass-lang.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 auch der Name der Variable, die du in Twig oder Scss verwenden kannst.


Abgrenzung für ThemeWare-Ableitungen

Ist eine Template-Anpassung nur für ein bestimmtes Theme relevant, hast du die Möglichkeit diese Anpassung beispielsweise über unsere ThemeWare-Konfiguration "Body-Klasse" einzuschränken. Hinterlege dafür in der Theme-Ableitung unter Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Feld "Body-Klasse" einen eindeutigen Namen. 


Beispiel Body-Klasse: "meinshopname"


Dieser Name kann dann durch die Position am HTML-Body für Sass-Prüfungen genutzt werden und in einer zusätzlichen Schleife auch für Twig genutzt werden.


Eingrenzung im Scss

// Anpassung nur für Theme mit der Klasse meinshopname
.meinshopname {
  h1 {
    // Anpassung...
  }
}


Eingrenzung im Twig

{# Anpassung nur für Theme mit der Klasse meinshopname #}
{% if shopware.theme['twt-body-class'] == "meinshopname" %}
  {# Theme hat die Klasse meinshopname #}
{% endif %}