#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 (On Premise) umsetzen.

Hinweis: 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/"

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

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

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 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 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 %} 

Weiterführende Links:

• ThemeWare® Tutorial: "Individuelle Anpassungen mittels CSS"
• ThemeWare® Tutorial: "Individuelle Anpassungen mittels SCSS" (für erfahrende Anwender)