CSS i JS na zmienną

Każdy wiersz wartości ma opcjonalne pola CSS i Skrypt. Plugin wstrzykuje je do <head> storefrontu (CSS) i do <body> (JS) tylko na stronach faktycznie używających zmiennej. Inne strony nie ponoszą kosztu.

Dlaczego to przydatne

Częsty wzorzec to „baner promo z własnym stylem i trackerem kliknięć”. Bez tej funkcji wrzuciłbyś CSS do bundla theme i JS do globalnego skryptu — i każda strona w sklepie by za to płaciła.

Dzięki wstrzykiwaniu per zmienna:

Strona lądowania zawierająca {promotionText} ładuje swój CSS i JS.
Strona szczegółów produktu nieużywająca zmiennej nie ładuje niczego.

Sprawdzenie odbywa się w momencie renderowania, po tym jak replacer przeszedł treść w poszukiwaniu użycia zmiennej.

Jak używać

Otwórz zmienną w Ustawienia → Treść → Dynamic Variables.
W wierszu wartości rozwiń pola CSS i Skrypt.
Wklej style / skrypty (tłumaczalne per język — patrz niżej).
Zapisz.

CSS

Trafia do tagu <style> w <head> strony.
Skoponuj selektory ostrożnie — działają globalnie na stronie.
Użyj opakowującej klasy w swoim HTML wartości (np. <div class="promo-banner">...</div>) i powiąż style z tą klasą.
Animacje, media queries, custom properties — wszystko jest OK.

JavaScript

Trafia do tagu <script> na stronie (domyślnie bez defer / async).
Działa w globalnym scope strony. Owiń kod w IIFE, jeśli potrzebujesz izolacji zmiennych.
Uważaj na duplikaty — jeśli ta sama zmienna pojawia się wielokrotnie na stronie, CSS / JS i tak ładuje się dokładnie raz.

Tłumaczalne per język

Pola CSS i Skrypt korzystają z tego samego systemu tłumaczeń co wartość. Możesz dostarczyć CSS specyficzny dla języka (inna czcionka dla alfabetu) lub JS specyficzny dla języka (inna etykieta analytics). Puste tłumaczenia wracają do języka domyślnego systemu.

Stylowanie per kanał

Wiersze per kanał mają własne CSS / JS. Kampania działająca tylko na Kanale A może dostarczyć blok stylu Kanał-A-only, którego żaden inny storefront nigdy nie ładuje.

Anty-wzorce

Nie wrzucaj krytycznych stylów UI tutaj. Jeśli styl jest częścią theme, wrzuć go do theme. CSS per zmienna jest dla treści zmiennej, nie dla obudowy strony.
Nie pobieraj dużych bibliotek w JS. Kilka linii kodu inicjalizującego jest OK. Długo działające skrypty należą do bundla theme, żeby mogły być cache’owane.
Nie polegaj na JS per zmienna w funkcjach krytycznych dla dostępności. Skrypt ładuje się tylko, gdy zmienna jest renderowana; jeśli redaktor CMS przypadkowo usunie placeholder, JS znika razem z nim.