Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
In diesem Artikel erfährst du, wie du individuelle Template-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Wenn du das Erscheinungsbild von ThemeWare® mittels einer Template-Anpassung individuell verändern möchtest, findest du in diesem Artikel nützliche Tipps für die Arbeit mit Template-Dateien.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für Template-Anpassungen nicht notwendig.
Für individuelle Template-Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung.
Prüfe ob es im Shopware Community Store bereits ein passende Erweiterung gibt.
Alternativ kannst du die manuelle Methode mit unserem "ThemeWare® Customizing Plugin" bzw. der "ThemeWare® Customizing App" nutzen (siehe Abschnitt "Template Anpassungen integrieren (für erfahrene Anwender)").
Den grundlegenden Aufbau (Ordner, Template-Dateien, Twig-Blöcke etc.) gibt das Shopware Theme "" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.
ThemeWare® leitet im Rahmen unserer HC-Architecture® nur die nötigsten Template-Dateien ab und ergänzt für eigene Funktionen und Features (z.B. Widgets) eigene Template-Dateien.
Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf . Im Ordner "views/storefront" befinden sich alle Template-Dateien die für die Storefront relevant sind.
Wenn du eine bestimmte Stelle in den Templates suchst, kannst du z.B. über den Inspektor deines Browsers eine CSS-Klasse suchen die sich an dem entsprechenden Element oder zumindest in unmittelbarer Umgebung des entsprechenden Elementes befindet.
Diese CSS-Klasse kannst du dann im suchen. Meist findet man so recht schnell eine passende Template-Datei.
Möchtest du beispielsweise etwas unterhalb der Produktbeschreibung ergänzen, schau dir den HTML-Code der Beschreibung einmal genauer an:
Der Beschreibung ist von einem <div> mit der Klassse product-detail-description-text umgeben.
Wir durchsuchen das Git-Repository also einmal nach dieser CSS-Klasse und finden die Datei description.html.twig (siehe ).
Ein Blick in den Quellcode dieser Datei zeigt, dass der <div> mit der Klassse product-detail-description-text sich im Twig-Block component_product_description_content_text befindet.
Leite also die Datei description.html.twig für deine Template-Anpassung ab und erweitere den Twig-Bock component_product_description_content_text.
Weitere Informationen zum ableiten und erweitern von Template-Dateien findest du nachfolgend.
In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies "ThemeWare® Customizing Plugin" bzw. eine "ThemeWare® Customizing App" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.
Alle Informationen zu den Erweiterungen, zur Installation und die Download-Links findest du in folgenden Artikeln:
Shopware 6 nutzt als Template-Engine Twig und nicht mehr Smarty wie in Shopware 5. Viele Dinge sind in Twig aber gleich oder zumindest sehr ähnlich. Damit du einen groben Überblick über Twig bekommst, haben wir nachfolgend die wichtigsten Informationen kurz zusammengefasst.
In der ersten Zeile der Datei muss definiert werden, von welcher übergeordneten Datei diese abgeleitet wird.
Um eigne Inhalte vor oder nach dem eigentlichen Inhalt des Blocks zu platzieren, musst du nicht den kompletten Code des Blocks kopieren. Du kannst dafür den parent-Befehl wie folgt nutzen:
Möchtest du den Originalinhalt des Blocks vollständig austauschen, kannst du auf den parent-Befehl verzichten um den Block zu leeren.
Die Ausgabe aller auf der Seite verfügbaren Variablen erreichst du mit dem dump-Befehl. Die Ausgabe muss in einem Block erfolgen und ist nur im verfügbar.
Den Namen des gewünschten Textbausteins kannst du der Textbaustein-Verwaltung deiner Administration ("Einstellungen" => "Shop" => "Textbausteine") entnehmen.
Damit die Übersetzungen der einzelnen Textbaustein-Sets berücksichtigt werden nutze den Zusatz |trans.
Ein Zusatzfeld auf Produktebene wird wie folgt ausgeben:
Ein Zusatzfeld für Kategorien wird wie folgt ausgegeben:
Die Abfrage einer Theme-Variable (z.B. die ThemeWare® Konfiguration "Body-Klasse") in einem Twig-Block funktioniert wie folgt:
Die Ausgabe einer Theme-Variable muss ebenfalls in einem Twig-Block erfolgen. Das folgende Beispiel zeigt die ThemeWare® Konfiguration "Body-Klasse" (Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse").
Über unseren 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.
Ist eine Template-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung beispielsweise über die ThemeWare® Konfiguration mit der "Body-Klasse" einzuschränken.
Hinterlege dafür im Theme-Duplikat für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B. meinshopname).
Dieser Name kann dann in einer zusätzlichen Schleife auch für Twig genutzt werden.
Alternativ kannst du deine Anpassung auch an die ID des Verkaufskanals binden:
custom/plugins/TcinnThemeWareXYZ/src/Resources/views
custom/plugins/TcinnThemeWareXYZ/src/Resources/views/themewarecustom/apps/TcinnThemeWareXYZApp/Resources/views/storefront
custom/apps/TcinnThemeWareXYZApp/Resources/views/storefront/themeware...
<div class="product-detail-description tab-pane-container">
<h2 class="product-detail-description-title">
Product information "Main product with reviews"
</h2>
<div class="product-detail-description-text" itemprop="description">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...
</div>
</div>
......
{% block component_product_description_content_text %}
<div class="product-detail-description-text" itemprop="description">
{{ product.translated.description|raw }}
</div>
{% endblock %}
...{% sw_extends '@Storefront/storefront/page/product-detail/headline.html.twig' %}{% sw_extends '@Storefront/storefront/themeware/extensions/twt-hero-section.html.twig' %}{% block name_des_blocks %}
{{ parent() }}
{# Platziere hier den neuen Inhalt #}
{% endblock %}{% block name_des_blocks %}
{# Platziere hier den neuen Inhalt #}
{{ parent() }}
{% endblock %}{% block page_product_detail_name_container %}
{# Platziere hier den neuen Inhalt #}
{% endblock %}{{ dump() }}{% block name_des_blocks %}
{{ parent() }}
{{ "twt.widget.communities.headline"|trans }}
{% endblock %}{{ page.product.translated.customFields.technischer_name_zusatzfeld }}{{ page.footer.navigation.active.translated.customFields.technischer_name_zusatzfeld }}{% if theme_config('twt-body-class') %}
...
{% endif %}{{ theme_config('twt-body-class') }}{# Anpassung nur für Theme mit der Body-Klasse z.B. "meinshopname" #}
{% if theme_config('twt-body-class') == "meinshopname" %}
{# Theme hat die Body-Klasse "meinshopname" #}
...
{{ parent() }}
{% else %}
{# Theme hat nicht die Body-Klasse "meinshopname" #}
{{ parent() }}
{% endif %}{# Anpassung für einen Sales channel mit der ID "..." #}
{% if context.salesChannel.id == "..." %}
{# Sales channel hat die ID "..." #}
...
{{ parent() }}
{% else %}
{# Sales channel hat nicht die ID "..." #}
{{ parent() }}
{% endif %}Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
Tipp: Mehr Informationen zu Zusatzfeldern und dem einbinden in die Storefront findest du im Artikel .
In diesem Bereich findest du viele nützliche Anleitungen rund um das Thema "individuelle Anpassungen".
Individuelle Anpassungen sind individuelle Programmierungen (= individueller Code) die über den Rahmen der von ThemeWare® bereitgestellten Funktionen und CSS-Klassen hinaus gehen. Dazu gehören beispielsweise:
CSS-Anpassungen
Also das Schreiben und/oder Hinzufügen von individuellen CSS-/SCSS-Code
z.B. .my-shop { color: red; }
JavaScript-Anpassungen
Das Schreiben und/oder Hinzufügen von individuellem JavaScript-Code
z.B. <script src="myScript.js">
z.B. <script>function myFunction() { ...
Template-Anpassungen
Das Schreiben und/oder Hinzufügen von individuellen HTML-/Twig-Code
ThemeWare® bietet dir mit den Anleitungen in diesem Bereich, der Experten-Konfiguration oder dem kostenfreien Customizing-Plugin verschiedene Möglichkeiten eigenen Code in der Storefront zu ergänzen. Dies richtet sich in erster Linie an Profis und Experten, die genau wissen, was Sie tun, denn durch individuellen Code können diverse Problem in der Storefront entstehen oder potentielle Schwachstellen aufgemacht werden!
Wenn du dir nicht absolut sicher bist, kannst du über das ThemeWare® Service-Portal Unterstützung bei der Erstellung deiner gewünschten Anpassung anfragen:
Tipp: Falls du Unterstützung bei Anpassungen benötigst, helfen wir dir gerne, deinen Shop genau so zu gestalten, wie du es dir wünscht:
In diesem Artikel erfährst du, wie du individuelle Anpassungen per CSS mit ThemeWare® durchführen kannst.
Du hast mit ThemeWare® verschiedene Möglichkeiten, um eigenes CSS-Styling zu deinem Shop hinzuzufügen. Je nachdem, was du ändern möchtest und wie umfangreich die Änderungen sind, wählst du die für dich passende Methode.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für CSS-Anpassungen nicht notwendig.
Bitte beachte, dass individueller Code nicht automatisch komprimiert wird. Komprimiere deinen individuellen Code am besten manuell, bevor du diesen einbindest.
Bevor wir zu eigentlichen Einbindungen kommen, möchten wir noch darauf hinweisen, in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes) zu bearbeiten. Das kann zu diversen Problemen führen.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes).
Damit du dich möglichst leicht für einen Weg entscheiden kannst, haben wir dir jeweils die Vor- und Nachteile aufgelistet:
Über die ThemeWare® Konfiguration ist es möglich schnell und unkompliziert kleine CSS-Anpassungen zu hinterlegen. Dieser Code wird zwar nicht komprimiert und es ist lediglich CSS-Syntax möglich, dennoch ist dies der einfachste Weg für Einsteiger.
1.1) CSS-Code mit Textbaustein integrieren
Vorteile
schnelle Vorgehensweise (über die Shopware 6 Textbaustein-Verwaltung)
Nachteile
veraltetet Methode
ausschließlich CSS-Syntax möglich
CSS-Code wird nicht automatisch komprimiert
1.2) CSS-Code mit Konfigurationsfeld integrieren
Vorteile
schnellste Vorgehensweise (über die ThemeWare® Konfiguration)
empfohlene Methode
Die ThemeWare® Konfiguration bietet dir ebenfalls die Möglichkeit eine externe Datei über eine URL einzubinden. Damit kann auch eine Datei welche über ein CDN (Content Delivery Network) verfügbar ist integriert werden.
Vorteile
externe Datei integrierbar
Nachteile
Die derzeit professionellste Methode SCSS-Code zu integrieren, ist die Verwendung eine separaten Erweiterung. Hierfür gibt es spezielle Erweiterungen (Plugins oder Apps) im .
Alternativ kannst du unser kostenfreies "ThemeWare® Customizing Plugin" (Self-managed) bzw. die "ThemeWare® Customizing App" (Cloud) für die Integration von individuellen Anpassungen und eigenen Dateien nutzen.
Vorteile
professionelle Vorgehensweise
SCSS-Syntax möglich
SCSS-Variablen möglich
Hinterlege den gewünschten CSS-Code im Textbaustein "twt.custom.css" und aktiviere das folgende Konfigurationsfeld: Tab "Weiteres" => Bereich "Veraltet" => Feld "Individueller CSS-Code (Textbaustein)"
Hinterlege den gewünschten CSS-Code in folgendem Konfigurationsfeld: Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individueller Code" => Feld "Individueller CSS-Code"
Der Inhalt der Konfigurationsfeldes wird 1:1 in einem <style> Tag im "Head" der HTML-Seite hinzugefügt. Trage hier einfach den gewünschten CSS-Code ein.
Um eine Datei lokal auf deinem Server zu hinterlegen und diese in die Storefront zu integrieren, gehe bitte wie folgt vor:
Logge dich per FTP auf deinem Server ein und wechsle in den Ordner "css".
Ordnerpfad: "public/css/"
Erstelle die Datei "styles.css".
Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "CSS-Datei".
Trage im Feld "CSS-Datei" den Pfad zur "styles.css" ein. (z.B. "deinshop.de/css/styles.css")
Wähle die Option "Ja" im Feld "CSS-Datei laden" aus.
Eine ausführliche Anleitung findest du im Artikel:
Ist eine CSS-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung über unsere ThemeWare® Konfiguration mit der "Body-Klasse" einzuschränken.
Hinterlege dafür in der Konfiguration vom entsprechenden Theme (bzw. Theme-Duplikat) für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B.: meinshopname).
Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.
Ist eine CSS-Anpassung nur für eine bestimmte Seite relevant, hast du die Möglichkeit deine Anpassung über das ThemeWare® Zusatzfeld "Body-Klasse" einzuschränken.
Hinterlege dafür im Zusatzfeld "Body-Klasse" von der entsprechenden Seite (Kategorie) im Tab "Allgemein" => Bereich "Zusatzfelder" => Tab "Kategorien (ThemeWare® ...)" => Zusatzfeld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B.: meinshopname).
Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.
Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne !important Anweisungen vermeiden.
Mehr Informationen dazu findest du in folgender Anleitung:
ausschließlich CSS-Syntax möglich
CSS-Code wird nicht automatisch komprimiert
CSS-Code wird nicht automatisch komprimiert
in der Shopware 6 Cloud nur eingeschränkt möglich
SCSS-Funktionen möglich
SCSS-Code wird automatisch komprimiert
Nachteile
eher für erfahrene Anwender
nur über eine externe Erweiterung möglich
Speichere die Änderung der Datei "styles.css" und lade diese ggf. erneut hoch.
.my-class { color: #000000; }// Anpassung für den Verkaufskanal mit der Klasse "meinshopname"
.meinshopname h1 {
// Anpassung...
}// Anpassung für die Kategorie mit der Klasse "meinshopname"
.meinshopname h1 {
// Anpassung...
}Wichtig: Diese Option war ein Workaround bis Option 1.2 möglich war. Die Option ist "deprecated" und wird von uns nicht mehr empfohlen und mit einem späteren Update entfernt.
Tipp: Damit die "Experten-Einstellungen" in der Storefront angewendet werden aktiviere bitten den "Experten-Modus" und deaktiviere den "Debug-Modus" von ThemeWare®:
Tab "Weiteres" => Bereich "Experten-Einstellungen" => Experten-Modus
In diesem Artikel erfährst du, wie du deinen eigenen JavaScript-Code mit ThemeWare® einbinden kannst.
Du hast mit ThemeWare® verschiedene Möglichkeiten, um eigenen JS-Code in deinen Shop einzubinden.
Bitte beachte, dass individueller Code nicht automatisch komprimiert wird. Komprimiere deinen individuellen Code am besten manuell, bevor du diesen einbindest.
Beachte zudem, dass individuelle Skript nicht in automatisch in den Cookie-Consent-Manager von Shopware übernommen werden. Nutzt du Cookie relevanten JS-Code, sorge für eine korrekte Einbindung in den Cookie-Consent-Manager.
Wichtig: Bitte beachte, dass individuelles JavaScript nicht automatisch in den Cookie-Consent-Manager integriert wird.
Bevor wir zu eigentlichen Einbindungen kommen, möchten wir noch darauf hinweisen, in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes) zu bearbeiten. Das kann zu diversen Problemen führen.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
Zudem weisen wir darauf hin, das die Funktionalität von Shopware, ThemeWare® und Erweiterungen Dritter durch fehlerhaftem JavaScript-Code erheblich gestört werden können. Achte daher unbedingt darauf, sauberen und fehlerfreien JS-Code zu schreiben!
Vorsicht: Individuelle JavaScript-Code kann zu Problemen führen die verschiedenste Funktionen von Shopware, ThemeWare® oder Erweiterungen Dritter stören können! Nutze JavaScript nur, wenn du dir absolut sicher bist.
Hinterlege den gewünschten JS-Code in folgendem Konfigurationsfeld: Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individueller Code" => Feld "Individueller JavaScript-Code"
Der Inhalt der Konfigurationsfeldes wird 1:1 am Ende der HTML-Seite hinzugefügt. Trage hier daher bitte den vollständigen <script> Tag ein.
Um eine Datei lokal auf deinem Server zu hinterlegen und diese in die Storefront zu integrieren, gehe bitte wie folgt vor:
Logge dich per FTP auf deinem Server ein und wechsle in den Ordner "js".
Ordnerpfad: "public/js/"
Erstelle die Datei "script.js".
Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "JavaScript-Datei".
Trage im Feld "JavaScript-Datei laden" den Pfad zur "script.js" ein. (z.B. "deinshop.de/js/script.js")
Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront wirksam werden.
Die derzeit professionellste Methode JavaScript-Code zu integrieren, ist die Verwendung eine separaten Erweiterung. Hierfür gibt es spezielle Erweiterungen (Plugins oder Apps) im .
Alternativ kannst du unser kostenfreies "ThemeWare® Customizing Plugin" (Self-managed) bzw. die "ThemeWare® Customizing App" (Cloud) für die Integration von individuellen Anpassungen und eigenen Dateien nutzen.
Zusatzfelder sind eine Grundfunktion von Shopware 6 und bieten dir die Möglichkeit, Produkte, Kategorien oder Hersteller individuell zu erweitern. Mit Zusatzfeldern kannst du flexibel zusätzliche Informationen speichern und bei Bedarf in der Storefront ausgeben.
Da weder Shopware noch ThemeWare® wissen können, in welche Datei bzw. in welchem Twig-Block dein individuelles Zusatzfeld integriert werden soll, müssen individuelle Zusatzfelder manuell in die Storefront eingebunden werden.
Dies geht entweder mit einem CMS-Element in einem Erlebniswelt-Layout oder über eine individuelle Template-Anpassung:
Vorteile
Umsetzung ist sehr einfach
Nachteile
erst ab Shopware 6.6.9 verfügbar
keine Abfrage ob ein Zusatzfeld leer ist möglich
Vorteile
schon vor Shopware 6.6.9 verfügbar
eine Abfrage ob ein Zusatzfeld leer ist möglich
Nachteile
In dieser Anleitung erklären wir dir wie du Zusatzfelder mit einer Template-Anpassung in der Storefront ausgeben kannst.
In der folgenden Schritt-für Schritt-Anleitung binden wir das individuelle Zusatzfeld "Sicherheitshinweis" mit unserem kostenfreien auf der Produktdetailseite (PDS) in die Storefront ein.
Die Produktbeschreibung wird über die Template-Datei description.html (siehe ) in die Storefront geladen.
Erstelle also die Datei description.html.twig in folgendem Ordner vom Customizing Plugin:
Leite nun die Originaldatei von Shopware wie folgt ab:
Die Beschreibung befindet sich im Twig-Block component_product_description_content. Wir vererben den Block nun wie folgt:
Füge nun nach dem eigentlichen Twig-Block-Inhalt (⇒ {{ parent }}) das Zusatzfeld (z.B. custom_gpsr_sicherheitshinweis) ein:
Optional: Du kannst die Einbindung auch noch mit einem if verbinden, das prüft, ob das Zusatzfeld überhaupt befüllt ist und einen Überschrift ergänzen:
Lade die neue Template-Datei nun auf deinen Webserver in das Verzeichnis:
Leere abschließend einmal den Shopware- sowie deinen Browser-Cache damit die Änderung auch in der Storefront korrekt angezeigt wird.
Mehr Informationen zum Thema "Zusatzfelder" findest du in folgendem Artikel:
In dieser Anleitung erfährst du, wie du individuelle Anpassungen mit dem "ThemeWare® Customizing Plugin" vornehmen kannst.
Wie du das Erscheinungsbild von ThemeWare® in Shopware 6 (self-managed) mittels einer individuellen Anpassung und mit unserem kostenfreien "ThemeWare® Customizing Plugin" verändern kannst, erfährst du in diesem Artikel.
Für individuelle Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung.
Prüfe ob es im bereits eine passende Erweiterung gibt.
Umsetzung ist recht komplex
Tipp: Wie du ein individuelles Zusatzfeld anlegst, erfährst du in der Anleitung Zusatzfelder (Custom Fields)
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
Tipp: Ergänze beschreibende Kommentare zu deinen Anpassungen. Diese erleichtern es dir dich später zurecht zu finden.
Tipp: Für mehrsprachige Storefronts bietet es sich an, die Überschrift als Textbaustein zu verwenden.
src/Resources/views/Storefront/component/product/{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}
{# GPSR: Zusatzfeld "Sicherheitshinweis" ausgeben #}
{% block component_product_description_content %}
{# Default block #}
{{ parent() }}
{% endblock %}{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}
{# GPSR: Zusatzfeld "Sicherheitshinweis" ergänzen #}
{% block component_product_description_content %}
{# Default block #}
{{ parent() }}
{# Zusatzfeld "Sicherheitshinweis" ausgeben #}
{{ page.product.customFields.custom_gpsr_sicherheitshinweis|raw }}
{% endblock %}{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}
{# GPSR: Zusatzfeld "Sicherheitshinweis" ergänzen #}
{% block component_product_description_content %}
{# Default block #}
{{ parent() }}
{# Zusatzfeld "Sicherheitshinweis" samt Headline ausgeben (wenn befüllt) #}
{% if page.product.translated.customFields.custom_gpsr_sicherheitshinweis %}
<h3>Sicherheitshinweis:</h3>
<div>{{ page.product.customFields.custom_gpsr_sicherheitshinweis|raw }}</div>
{% endif %}
{% endblock %}custom/plugins/TcinnCustomizing/src/Resources/views/storefront/component/productSpeichere die Änderung der Datei "script.js" und lade diese ggf. erneut hoch.
<script>
alert( 'Hello, world!' );
</script>Tipp: Damit die "Experten-Einstellungen" in der Storefront angewendet werden aktiviere bitten den "Experten-Modus" und deaktiviere den "Debug-Modus" von ThemeWare®:
Tab "Weiteres" => Bereich "Experten-Einstellungen" => Experten-Modus
Nachfolgend erklären wir dir den Weg über unser "ThemeWare® Customizing Plugin".
Dieser Artikel richtet sich an erfahrene Anwender. Wir gehen in diesem Artikel daher davon aus, dass du die Grundlagen für Anpassungen via SCSS und Twig bereits verinnerlichst hast.
Falls du nicht erfahren im Umgang mit SCSS und Twig bist findest du hilfreiche Grundlagen zum Thema individuelle SCSS- und Template-Anpassungen findest du in den folgenden Artikeln:
In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies "ThemeWare® Customizing Plugin" für die Integration von individuellen Anpassungen und eigenen Dateien in Shopware 6 (self-hosted) entwickelt.
Alle Informationen zum "ThemeWare® Customizing Plugin", der Installation und den Download-Link findest du im folgenden Artikel:
Lade die Zip-Datei unserer Erweiterung herunter
Entpacke die Zip-Datei mit "Hier entpacken"
Im Ordner TcinnCustomizing findest du alle Dateien der Erweiterung.
SCSS-Anpassungen
SCSS-Datei(en)
Erstelle eine neue SCSS-Datei und importiere diese über die Datei "base.scss"
Pfad: "src/Resources/app/storefront/src/scss"
Tipp: Orientiere dich bezüglich Datei-Name und -Pfad einfach an den Quelldateien.
Hinweis: Erstelle benötigte oder fehlende Ordner.
Du kannst deinen SCSS-Code auch direkt in der "base.scss" hinterlegen.
Füge deinen gewünschten SCSS-Code ein
Speichere die Änderung der Datei(en)
Template-Anpassungen
Erstelle eine neue Template-Datei und leite darin die gewünschte Quelldatei ab
Pfad: "src/Resources/views/storefront"
Tipp: Orientiere dich bezüglich Datei-Benennung einfach an der Quelldatei.
Hinweis: Erstelle benötigte oder fehlende Ordner.
Füge deinen gewünschten Twig-Code ein
Speichere die Änderung der Datei
Deaktiviere und deinstalliere das "ThemeWare® Customizing Plugin" falls du dies bereits installiert und aktiviert hast
Zippe den Ordner "TcinnCustomizing"
Lade die Erweiterung über Shopware 6 Erweiterungs-Verwaltung in deinen Shop
Installiere und aktiviere die Erweiterung danach
Öffne das aktive ThemeWare® in der Theme-Verwaltung und speichere die Einstellungen unverändert ab, damit das Theme kompiliert wird und deine Änderungen in die Storefront übertragen werden.
Leere den Shopware Cache in den Shopware Einstellungen ("Einstellungen" => "System" => "Caches & Indizes" > "Caches leeren").
Leeren den Browser-Cache
Windows: Strg + F5
Mac: Command (⌘) + Shift (⇧) + R oder Command (⌘) + Option/Alt (⌥) + R
Die Änderung sollte nun in deiner Storefront sichtbar sein.
Du kannst die Erweiterung auch direkt auf dem FTP bearbeiten. Deaktiviere dieses bevor du Änderungen vornimmst und aktiviere es wieder wenn du fertig.
Möchtest du zu einem späteren Zeitpunkt Änderungen vornehmen, deaktiviere die Erweiterung über die Erweiterungs-Verwaltung vor dem Upload und aktiviere es wieder wenn du fertig.
Hinweis: Es kann nötig sein, dass du die Erweiterung auch einmal deinstallierst damit Änderungen in die Storefront übernommen werden.
Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne !important Anweisungen vermeiden.
Mehr Informationen dazu findest du in folgender Anleitung:
Seit Shopware 6.4.12 kann man mit der Methode getTemplatePriority() die Renderreihenfolge von Erweiterungen bestimmen (Default: -1).
Damit du mit dem "Customizing Plugin" andere Erweiterungen überschreiben kannst, musst du die Priorität über eine Funktion in der TcinnCustomizing.php ändern:
Tipp: Das erstellen eines ThemeWare® Duplikates ist für SCSS- bzw. Template-Anpassungen nicht notwendig.
public function getTemplatePriority(): int
{
return 100; // hohe Priorität
}Tipp: Bist du unerfahren im Umgang mit SCSS und Twig empfehlen wir dir Unterstützung zu suchen. Gern können wir dich natürlich auch bei individuellen Anpassungen unterstützen:
In dieser Anleitung erfährst du, wie du individuelle Anpassungen mit der "ThemeWare® Customizing App" in der Shopware Cloud vornehmen kannst.
Wie du das Erscheinungsbild von ThemeWare® in der Shopware 6 Cloud mittels einer individuellen Anpassung und mit unserer kostenfreien "ThemeWare® Customizing App" verändern kannst, erfährst du in diesem Artikel.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für SCSS- bzw. Template-Anpassungen nicht notwendig.
Für individuelle Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung.
Prüfe ob es im Shopware Community Store bereits eine passende Erweiterung gibt.
Alternativ kannst du die folgende Methode mit der "ThemeWare® Customizing App" nutzen.
Nachfolgend erklären wir dir den Weg über unsere "ThemeWare® Customizing App".
Dieser Artikel richtet sich an erfahrene Anwender. Wir gehen in diesem Artikel daher davon aus, dass du die Grundlagen für Anpassungen via SCSS und Twig bereits verinnerlichst hast.
Falls du nicht erfahren im Umgang mit SCSS und Twig bist findest du hilfreiche Grundlagen zum Thema individuelle SCSS- und Template-Anpassungen findest du in den folgenden Artikeln:
In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Zudem hat man in der Cloud keinen Zugriff auf das Dateisystem. Wir haben als Workaround eine kleine kostenfreie "ThemeWare® Customizing App" für die Integration von individuellen Anpassungen und eigenen Dateien in der Shopware 6 Cloud entwickelt.
Alle Informationen zur "ThemeWare® Customizing App", der Installation und den Download-Link findest du im folgenden Artikel:
Lade die Zip-Datei unserer App herunter
Entpacke die Zip-Datei mit "Hier entpacken"
Im Ordner TcinnCustomizingApp findest du alle Dateien der Erweiterung.
SCSS-Anpassungen
Öffne die Datei "base.scss"
Pfad: "Resources/app/storefront/src/scss"
Füge deinen gewünschten SCSS-Code ein
Template-Anpassungen
Erstelle eine neue Template-Datei und leite darin die gewünschte Quelldatei ab
Pfad: "Resources/views/storefront"
Tipp: Orientiere dich bezüglich Datei-Benennung einfach an der Quelldatei.
Deaktiviere und deinstalliere die "ThemeWare® Customizing App" falls du dies bereits installiert und aktiviert hast
Zippe den Ordner "TcinnCustomizingApp"
Lade die App über Shopware 6 Erweiterungs-Verwaltung in deinen Shop
Öffne das aktive ThemeWare® in der Theme-Verwaltung und speichere die Einstellungen unverändert ab, damit das Theme kompiliert wird und deine Änderungen in die Storefront übertragen werden.
Leeren den Browser-Cache
Windows: Strg + F5
Mac: Command (⌘) + Shift (⇧) + R oder Command (⌘) + Option/Alt (⌥) + R
Die Änderung sollte nun in deiner Storefront sichtbar sein.
Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne !important Anweisungen vermeiden.
Mehr Informationen dazu findest du in folgender Anleitung:
Seit Shopware 6.4.12 kann man der Konfiguration storefront.template-load-priority die Renderreihenfolge von Erweiterungen bestimmen (Default: -1).
Damit du mit der "Customizing App" andere Erweiterungen überschreiben kannst, musst du die Priorität über eine Konfiguration in der manifest.xml ändern:
Speichere die Änderung der Datei
Hinweis: Erstelle benötigte oder fehlende Ordner.
Füge deinen gewünschten Twig-Code ein
Speichere die Änderung der Datei
<storefront>
<template-load-priority>100</template-load-priority>
</storefront>Tipp: Bist du unerfahren im Umgang mit SCSS und Twig empfehlen wir dir Unterstützung zu suchen. Gern können wir dich natürlich auch bei individuellen Anpassungen unterstützen:
In diesem Artikel erfährst du, wie du Bootstrap in der Shopware 6 Storefront nutzen kannst.
Es gibt verschiedene Bestandteile von Bootstrap welch du in der Storefront von Shopware 6 nutzen kannst:
CSS-Klassen
HTML-Elemente
...
Mit HTML-Elementen sind wir im Bereich "individuelle Anpassung", da es hierbei um die individuelle Programmierung bzw. um individuellen Code geht.
...
Darüber hinaus gibt es verschiedene Möglichkeiten diese Bestandteile einzubinden:
Erlebniswelten
Template-Dateien
...
...
Folgt bald...
In diesem Artikel erfährst du, wie du individuelle SCSS-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Wenn du das Erscheinungsbild von ThemeWare® mittels SCSS anpassen möchtest, findest du in diesem Artikel nützliche Tipps für die Arbeit mit SCSS-Dateien.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für SCSS-Anpassungen nicht notwendig.
Damit du die entsprechenden SCSS-Anpassungen problemlos hinterlegen kannst solltest du eine separate Erweiterung für individuellen Anpassungen nutzen.
Prüfe ob es im Shopware Community Store bereits eine passende Erweiterung gibt.
Alternativ kannst du die manuelle Methode mit unserem "ThemeWare® Customizing Plugin" bzw. der "ThemeWare® Customizing App" (Cloud) nutzen (siehe Abschnitt "SCSS-Code integrieren (für erfahrene Anwender)").
Den grundlegenden Aufbau (Ordner, SCSS-Dateien etc.) gibt das Shopware 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 ThemeWare® SCSS-Dateien unter folgenden Pfaden in deinem Shopware Ordner (XYZ = Modern, Living, Clean, etc.):
ThemeWare® leitet im Rahmen unserer HC-Architecture® nur die nötigsten SCSS-Dateien ab und ergänzt für eigene Funktionen und Features (z.B. Widgets) eigene SCSS-Dateien.
Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf . Im Ordner "app/storefront/src/scss" befinden sich alle SCSS-Dateien die für die Storefront relevant sind.
In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies "ThemeWare® Customizing Plugin" bzw. eine "ThemeWare® Customizing App" (Cloud) für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.
Alle Informationen zur Installation und die Download-Links findest du in folgenden Artikeln:
Individuelle Anpassungen müssen in der Datei "base.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 integriert werden.
Im folgenden Beispiel wird der Produktname auf der Produktseite modifiziert.
Über unseren 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.
Ist eine SCSS-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung über unsere ThemeWare® Konfiguration mit der "Body-Klasse" einzuschränken.
Hinterlege dafür in der Konfiguration vom entsprechenden Theme (bzw. Theme-Duplikat) für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B.: meinshopname).
Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.
Ist eine SCSS-Anpassung nur für eine bestimmte Seite relevant, hast du die Möglichkeit deine Anpassung über das ThemeWare® Zusatzfeld "Body-Klasse" einzuschränken.
Hinterlege dafür im Zusatzfeld "Body-Klasse" von der entsprechenden Seite (Kategorie) im Tab "Allgemein" => Bereich "Zusatzfelder" => Tab "Kategorien (ThemeWare® ...)" => Zusatzfeld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B.: meinshopname).
Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.
Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne !important Anweisungen vermeiden.
Mehr Informationen dazu findest du in folgender Anleitung:
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/
custom/plugins/TcinnThemeWareXYZ/src/Resources/app/storefront/src/scss/themeware/custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss
custom/apps/TcinnThemeWareXYZApp/Resources/app/storefront/src/scss/themeware@import 'deine-datei.scss';// Beispiel: Farbliche Änderung vom Artikelnamen auf der Artikelseite
$eigene-variable: #FF0004;
.is-ctl-product {
.product-detail-name {
padding: 10px;
color: $eigene-variable;
}
}// Anpassung für den Verkaufskanal mit der Klasse "meinshopname"
.meinshopname {
h1 {
// Anpassung...
}
}// Anpassung für die Kategorie mit der Klasse "meinshopname"
.meinshopname {
h1 {
// Anpassung...
}
}Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
Wichtig: Die Nutzung von Theme-Variablen in Plugins ab Shopware 6.4.7.0 leider nicht mehr möglich.
Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne !important Anweisungen vermeiden.
Body-Klasse: Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse"
Trage hier beispielsweise "meinshop" ein und stelle dies an den Anfang des entsprechenden CSS/SCSS-Selektors.
// Vorher
.product-detail-ordernumber-container .product-detail-ordernumber-label {
font-weight: 300 !important;
}
// Besser
.meinshop .product-detail-ordernumber-container .product-detail-ordernumber-label {
font-weight: 300;
}// Before
.product-detail-ordernumber-container {
.product-detail-ordernumber-label {
font-weight: 300 !important;
}
}
// Better
.meinshop {
.product-detail-ordernumber-container {
.product-detail-ordernumber-label {
font-weight: 300;
}
}
}