#2139 Individuelle Template-Anpassung (twig, html, scss, css)

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


Weitere Artikel in der Kategorie ""

9e8e2e0c6c1bd4d7ee8f2c2a75dfacd1
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 undunsere 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