Viewer – stylizacja (parametry URL)

Stylizacja za pomocą parametrów URL

Parametry URL pozwalają dostosować wygląd i zachowanie Viewera bez modyfikowania kodu. Możesz je skonfigurować bezpośrednio w aplikacji (np. w zakładce „Udostępnianie” lub wewnątrz Viewera), aby zmieniać tło, efekty tła obrazkowego, środowisko 3D, intensywność światła, widoczność interfejsu i przycisk koszyka. Wybór wariantu (atrybuty WooCommerce): Możesz też otworzyć Viewer z konkretnym wariantem produktu przez parametry takie jak attribute_pa_color, pa_size albo size. Są rozwiązywane przez mapowanie atrybutów i termów sklepu.

Lista dostępnych parametrów URL

ParametrTypOpisWartość domyślna
nav0 / 1Ukrywa (0) lub pokazuje (1) górną nawigację. Dostępne tylko w planach Business.1
add_to_cart0 / 1Ukrywa (0) lub pokazuje (1) przycisk „Dodaj do koszyka”.0
bcgstringTryb tła sceny: grad_f6f7fb_e8fff6, app_img_123, uploaded, theme albo env.Domyślne sklepu/projektu
envintID środowiska HDRI używane do oświetlenia sceny. Przy bcg=env środowisko jest też widocznym tłem sceny.1
light_intensity0 - 2Intensywność oświetlenia sceny 3D.0.6
bcg_blur0 - 100Rozmycie tła obrazkowego wybranego przez bcg=app_img_*, bcg=uploaded albo bcg=theme.0
bcg_brightness0 - 3Jasność/emisyjność tła obrazkowego.1
bcg_underlaystringWarstwa pod tłem obrazkowym. Użyj grad_ffffff_f5f7fb dla gradientu albo none, aby ją wyłączyć.Domyślne tła
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 na żywo

Adres URL: https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m

<iframe
  loading="lazy"
  title="Product Viewer"
  src="https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>