Dynamische pagina's en variantwijzigingen#

De SDK observeert doelelementen die na het laden van de pagina worden ingevoegd. Je webshop blijft verantwoordelijk voor het geselecteerde product en moet de attributen van het doelelement met die selectie synchroniseren.

Eenmaal laden, het doelelement bijwerken#

Gebruik één SDK-loader op toepassings- of themaniveau. Voeg niet bij elke routeovergang een nieuw script toe. Geef een doelelement weer waar het huidige product verschijnt en werk het bij wanneer een snelweergave, variantkiezer of clientroute het product verandert.

Gebruik bij gegenereerde knoppen de huidige productcode op de doelcontainer. Stel bij zelfgemaakte knoppen ook de vorige SDK-toestand opnieuw in, zoals beschreven in de handleiding voor een eigen webshop.

Een zelfgemaakte knop opnieuw instellen#

Het volgende voorbeeld volgt het bestaande contract voor een eigen webshop. Roep het aan vanuit je eigen selectiehandler nadat de geselecteerde productcode bekend is.

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

Aansluiten op de daadwerkelijke platformlevenscyclus#

Er bestaat geen universele gebeurtenis voor variantwijzigingen in webshops. De Shopify-handleiding definieert een gebeurtenis die je thema moet uitsturen; alleen die listener toevoegen verbindt het thema nog niet. Gebruik de callback die je daadwerkelijke thema of toepassing documenteert.

Volg voor React / Next.js en Vue / Nuxt de instructies van de frameworkhandleiding voor de clientlevenscyclus en het opruimen van resources.

Controleren op verouderde selecties#

Wissel tussen een geschikt product, een ander geschikt product en een product zonder koppeling. De Viewer mag na een selectiewijziging nooit het vorige product opnieuw openen. Herhaal dit met snelweergaven en de terugknop van de browser.