#2139 Individuelle Template-Anpassungen (Twig, HTML, SCSS)

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: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!

Wichtig: Das erstellen eines ThemeWare^® Duplikates ist für Template-Anpassungen nicht 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 "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.

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. 

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 Anpassungen mit SCSS/CSS
  • Dateipfad: "custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/"
  • In der Datei 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":
  • Dateipfad: "custom/plugins/TcinnCustomizing/src/Resources/views/storefront/page/product-detail/"
  • In der Datei sind Beispielanpassungen hinterlegt, die bearbeitet oder gelöscht werden können.

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

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.

{{ 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 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: Farbliche Änderung vom Artikelnamen auf der Artikelseite
// Example: Colour change of the article name on the article page

$eigene-variable: #FF0004;

.is-ctl-product {
  .product-detail-name {
    background-color: $twt-color-brand-primary-light;
    border: 1px solid $twt-color-brand-primary-dark;
    padding: 10px;
    color: $eigene-variable;
  }
}

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 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 durch die Position am HTML-Body für SCSS-Prüfungen 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 %}

Weiterführende Links:

• Anleitung: "Individuelle Anpassungen mittels CSS"
• Anleitung: "Individuelle Anpassungen mittels SCSS" (für erfahrende Anwender)