#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;
  }
}

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


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

129536477e525cdf824e20f4245ba22d
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