Customizer — vormgeving (URL-parameters)

Vormgeving met URL-parameters

Met URL-parameters open je de Customizer met vooraf ingestelde visuele instellingen en productopties, zonder je embedcode te wijzigen. De Customizer leest deze parameters bij het laden en past ze toe op de werkruimteachtergrond, 3D-omgeving, lichtsterkte en variantselectie. Varianten die via de URL worden geselecteerd, worden verwerkt met WooCommerce-attribuut- en termkoppelingen. Eigen kleuren: Voor producten met varianten met eigen kleuren kun je de eigen kleur opvragen en gekozen kleurwaarden rechtstreeks in de URL doorgeven. Codeer # als %23 binnen querywaarden.

Lijst met beschikbare URL-parameters

ParameterTypeBeschrijvingStandaardwaarde
bcgstringAchtergrondmodus van de Customizer: grad_f6f7fb_e8fff6, app_img_123 of env. De modus env gebruikt het voorbeeld van de gekozen omgeving als werkruimteachtergrond.Standaard van ontwerp/thema
envintID van de runtime-omgeving. Selecteert de HDRI-omgeving voor het 3D-canvas en bij bcg=env ook het omgevingsvoorbeeld als achtergrond.Ontwerp/standaard
light_intensity0 - 2Lichtsterkte van de omgeving voor het 3D-canvas. Waarden buiten het bereik worden begrensd.Ontwerp/standaard
bcg_blur0 - 100Vervaging voor afbeeldingsachtergronden van de Customizer, inclusief app_img_* en voorbeeldachtergronden met bcg=env.0
bcg_brightness0 - 3Helderheid van afbeeldingsachtergronden van de Customizer.1
bcg_underlaystringOnderlaag met kleurverloop achter afbeeldingsachtergronden, bijvoorbeeld grad_ffffff_f5f7fb.Standaard van ontwerp/thema
attribute_pa_*stringSelecteer vooraf een attribuutterm van een WooCommerce-product. Geldige sleutelvormen zijn onder meer attribute_pa_color, pa_color en color. Ondersteunde aliassen zijn maat, kleur, materiaal, druktype en patroon.
custom_color0 / 1 / trueVraagt de variant met eigen kleur aan als het product die ondersteunt. Dit kan ook met color=custom.0
picked_colorsstringKomma-gescheiden eigen kleurwaarden in de notatie detailKey:%23hex, bijvoorbeeld front:%23ff6b6b,back:%2300ff88. Het teken # moet als %23 worden URL-gecodeerd.

Voorbeeld

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>