Customizer – stylizacja (parametry URL)

Stylizacja parametrami URL

Parametry URL pozwalają otworzyć Customizer z gotowymi ustawieniami wizualnymi i opcjami produktu bez zmiany kodu osadzenia. Customizer odczytuje je podczas ładowania i stosuje do tła workspace, środowiska 3D, intensywności światła oraz wyboru wariantu. Warianty z URL są rozwiązywane przez mapowanie atrybutów i termów WooCommerce. Kolory custom: Dla produktów z wariantem custom color możesz wymusić taki wariant i przekazać wybrane kolory bezpośrednio w URL. Znak # w wartościach query zapisz jako %23.

Lista dostępnych parametrów URL

ParametrTypOpisWartość domyślna
bcgstringTryb tła Customizera: grad_f6f7fb_e8fff6, app_img_123 albo env. Tryb env używa podglądu wybranego środowiska jako tła workspace.Domyślne designu/motywu
envintID środowiska runtime. Wybiera HDRI dla canvasu 3D, a przy bcg=env także podgląd środowiska jako tło.Domyślne designu
light_intensity0 - 2Intensywność światła środowiska w canvasie 3D. Wartości spoza zakresu są przycinane.Domyślne designu
bcg_blur0 - 100Rozmycie tła obrazkowego Customizera, w tym app_img_* i podglądu przy bcg=env.0
bcg_brightness0 - 3Jasność tła obrazkowego Customizera.1
bcg_underlaystringGradient pod tłem obrazkowym, np. grad_ffffff_f5f7fb.Domyślne designu/motywu
attribute_pa_*stringWstępnie wybiera term atrybutu WooCommerce. Obsługiwane formy klucza to np. attribute_pa_color, pa_color i color; aliasy obejmują rozmiar, kolor, materiał, typ nadruku i pattern.
custom_color0 / 1 / trueWybiera wariant custom color, jeśli produkt go obsługuje. Ten sam efekt można uzyskać przez color=custom.0
picked_colorsstringLista kolorów custom w formacie detailKey:%23hex, np. front:%23ff6b6b,back:%2300ff88. Znak # musi być zapisany w URL jako %23.

Przykład

Adres URL: https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b

<iframe
  loading="lazy"
  title="Product Customizer"
  src="https://alterproduct.com/app/customizer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_blur=0&bcg_brightness=1&bcg_underlay=grad_ffffff_f5f7fb&custom_color=1&picked_colors=front:%23ff6b6b"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>