CSS & JS pro Variable

Jede Wertzeile hat optionale Felder CSS und Skript. Das Plugin injiziert sie in den Storefront-<head> (CSS) und <body> (JS) nur auf Seiten, die die Variable tatsächlich verwenden. Andere Seiten zahlen den Aufwand nicht.

Warum das nützlich ist

Ein häufiges Muster ist „Promo-Banner mit eigenem Styling und Klick-Tracker”. Ohne dieses Feature würde man das CSS in den Theme-Bundle und das JS in ein globales Skript stopfen — und jede Seite des Shops würde dafür zahlen.

Mit der Injektion pro Variable:

Eine Landingpage, die {promotionText} enthält, lädt ihr CSS und JS.
Eine Produktdetailseite, die die Variable nicht verwendet, lädt nichts.

Die Prüfung passiert zur Render-Zeit, nachdem der Replacer den Inhalt nach der Variable durchsucht hat.

So verwenden Sie es

Öffnen Sie eine Variable unter Einstellungen → Inhalte → Dynamic Variables.
Klappen Sie auf einer Wertzeile die Felder CSS und Skript auf.
Fügen Sie Ihre Styles / Skripte ein (pro Sprache übersetzbar — siehe unten).
Speichern.

CSS

Wird in einen <style>-Tag im Seiten-<head> eingefügt.
Wählen Sie Ihre Selektoren sorgfältig — sie wirken auf die ganze Seite.
Verwenden Sie eine umschließende Klasse in Ihrem HTML-Wert (z. B. <div class="promo-banner">...</div>) und referenzieren Sie Ihre Styles über diese Klasse.
Animationen, Media Queries, Custom Properties — alles erlaubt.

JavaScript

Wird in einen <script>-Tag in der Seite eingefügt (standardmäßig ohne defer / async).
Läuft im globalen Scope der Seite. Verpacken Sie Ihren Code in eine IIFE, falls Sie Variablen-Isolation brauchen.
Vorsicht bei Duplikaten — falls dieselbe Variable mehrfach auf der Seite vorkommt, werden CSS / JS trotzdem genau einmal geladen.

Pro Sprache übersetzbar

Die Felder CSS und Skript folgen demselben Übersetzungssystem wie der Wert. Sie können sprachspezifisches CSS (andere Schrift für ein Alphabet) oder sprachspezifisches JS (anderes Analytics-Label) ausliefern. Leere Übersetzungen fallen auf die Systemstandardsprache zurück.

Kanal-spezifisches Styling

Kanalspezifische Zeilen haben ihr eigenes CSS / JS. Eine Kampagne, die nur auf Kanal A läuft, kann einen Kanal-A-only-Style-Block ausliefern, den kein anderes Storefront jemals lädt.

Anti-Patterns

Setzen Sie keine kritischen UI-Styles hier ein. Wenn das Styling Teil des Themes ist, gehört es ins Theme. Per-Variable-CSS ist für den Inhalt der Variable, nicht für die Seiten-Struktur.
Laden Sie keine großen Bibliotheken im JS nach. Ein paar Zeilen Init-Code sind in Ordnung. Lang laufende Skripte gehören ins Theme-Bundle, damit sie gecacht werden.
Verlassen Sie sich bei Barrierefreiheits-kritischen Features nicht auf JS pro Variable. Das Skript lädt nur, wenn die Variable gerendert wird; wenn ein CMS-Editor den Platzhalter versehentlich löscht, verschwindet das JS mit.