#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; } }
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 %}
Weiterführende Links:
- ThemeWare® Tutorial: "Individuelle Anpassungen mittels CSS"
- ThemeWare® Tutorial: "Individuelle Anpassungen mittels SCSS" (für erfahrende Anwender)
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, kannst du hier ein Support-Ticket eröffnen.