Individueller Code (HTML/CSS/JS)

Das ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" ist ein CMS-Element mit welchem du individuellen HTML-, CSS- und JS-Code in deiner Erlebniswelt platzieren kannst.

Da durch individuellen Code potenziell gefährliche Schwachstellen entstehen können, richtet sich dieses Element an erfahrene Anwender bzw. Experten, die sicher im Umgang mit individuellen Programmierungen sind. Bist du nicht absolut sicher, was du tust, nutze den HTML-Editor eines beliebigen Text-Elementes von Shopware 6. Dieser Editor bereinigt deinen individuellen Code automatisch.

Element konfigurieren

Die ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das entsprechende CMS-Element
3. Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

Konfiguration

Die Konfiguration vom CMS-Element "Individueller Code" ist recht selbsterklärend. Es gibt keine Pflichtfelder.

HTML

Im Tab "HTML" hinterlegst du deinen individuellen HTML-Code.

Individueller HTML-Code

Im Abschnitt "Individueller HTML-Code" kannst du den gewünschten HTML-Code hinterlegen.

Twig-Unterstützung

Mit dem Schalter "Twig-Variablen erlauben" kannst du die Unterstützung für Twig-Variablen aktivieren. Dadurch lassen sich Twig-Variablen (z. B. {{ page.product.name }} oder {{ category.name }}) direkt in deinem HTML-Code verwenden.

Die verwendeten Variablen werden auf Produktseiten, Kategorieseiten und Landingpages automatisch aufgelöst und durch die entsprechenden Inhalte ersetzt.

CSS

Im Tab "CSS" kannst du deinen individuellen CSS-Code hinterlegen. Dein CSS-Code wird automatisch mit einem style-Tag umschlossen eingefügt.

Du kannst du deinen CSS-Code natürlich auch über das Feld "Individueller HTML-Code" integrieren, das Feld "Individueller CSS-Code" dient hauptsächlich der besseren Übersicht.

Individueller CSS-Code

Im Abschnitt "Individueller CSS-Code" kannst du den gewünschten CSS-Code hinterlegen.

JavaScript

Im Tab "JavaScript" kannst du deinen individuellen JavaScript-Code hinterlegen. Der JS-Code wird automatisch mit einem script-Tag umschlossen eingefügt.

Du kannst du deinen JS-Code natürlich auch über das Feld "Individueller HTML-Code" integrieren, das Feld "Individueller JavaScript-Code" dient hauptsächlich der besseren Übersicht.

Individueller JavaScript-Code

Im Abschnitt "Individueller JavaScript-Code" kannst du den gewünschten JavaScript-Code hinterlegen.

Erweitert

Du kannst zwar jedes HTML-Element unserer CMS-Elemente über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

Vollständige Twig-Unterstützung

Die vollständige Twig-Unterstützung ermöglicht den Zugriff auf den kompletten Twig-Kontext (Variablen, Tags, Filter, Funktionen). Diese Funktion richtet sich ausschließlich an erfahrene Entwickler und Agenturen. Fehlerhafter Twig-Code kann zu Seitenfehlern führen.

Mit dem Schalter "Vollständiges Twig erlauben" wird dein HTML-Code als Twig-Template gerendert. Den Schalter können nur Benutzer mit der passenden Berechtigung nutzen (siehe Twig verwenden).

Hinweis: Diese Konfiguration ist derzeit noch nicht verfügbar und wird mit einem kommenden Release freigeschaltet.

Twig verwenden

Ist "Vollständiges Twig erlauben" aktiv, wird dein HTML-Code in der Storefront als Twig-Template gerendert. Du kannst dann z. B. Textbausteine, Bedingungen und Schleifen verwenden.

<h2>{{ product.translated.name }}</h2>
<a href="{{ path('frontend.home.page') }}">{{ 'general.homeLink'|trans }}</a>

Berechtigung

Twig wird auf dem Server ausgeführt und hat Zugriff auf den kompletten Kontext der Seite. Deshalb braucht es eine eigene Berechtigung. Administratoren haben sie immer, allen anderen Benutzern gibst du sie über ihre Rolle:

1. Öffne in der Administration Einstellungen > Benutzer & Rechte
2. Öffne die gewünschte Rolle
3. Aktiviere im Abschnitt "Zusätzliche Berechtigungen" unter "ThemeWare" die Berechtigung "Twig im Element "Individueller Code" verwenden"
4. Speichere die Rolle

Ohne diese Berechtigung gilt:

• Der Schalter "Vollständiges Twig erlauben" ist gesperrt.
• Ist Twig in einem Element bereits aktiv, ist der HTML-Code schreibgeschützt. Oben in den Element-Einstellungen erscheint ein Hinweis.
• CSS, JavaScript und die übrigen Einstellungen des Elements kannst du weiterhin bearbeiten.

Die Berechtigung wird beim Speichern auf dem Server geprüft, auch bei Änderungen über die API und bei Layout-Anpassungen in Kategorien, Produkten und Landingpages.

Variablen

Die Seite, auf der das Element ausgegeben wird, steht dir als Variable zur Verfügung:

Nutze für übersetzbare Felder translated, z. B. {{ product.translated.name }}. So erhältst du den Wert in der Sprache der Storefront.

Der Schalter "Twig-Variablen erlauben" hat bei aktivem "Vollständiges Twig erlauben" keine Wirkung und ist dann gesperrt. Die Variablen stehen automatisch zur Verfügung.

Ausgabe

Wie in jedem Twig-Template werden Ausgaben automatisch maskiert. Felder, die HTML enthalten (z. B. die Produktbeschreibung), gibst du mit |raw aus:

{{ product.translated.description|raw }}

Inhalte aus der Datenbank, z. B. ein Produktname mit {{ ... }}, werden dabei nie als Twig ausgeführt.

Speichern

Dein Twig-Code wird beim Speichern geprüft. Enthält er einen Syntaxfehler oder eine unbekannte Funktion, erscheint eine Fehlermeldung mit der betroffenen Zeile und die Änderung wird nicht gespeichert.