Strony dynamiczne i zmiany wariantów#

SDK obserwuje elementy docelowe dodane po załadowaniu strony. Za wybór produktu nadal odpowiada witryna sklepu, która musi synchronizować atrybuty elementu z tym wyborem.

Załaduj raz, zaktualizuj cel#

Ładuj SDK raz na poziomie aplikacji lub motywu. Nie dodawaj nowego skryptu przy każdej zmianie trasy. Utwórz element docelowy w miejscu bieżącego produktu i aktualizuj go, gdy szybki podgląd, wybór wariantu lub nawigacja po stronie klienta zmienia produkt.

Dla generowanych przycisków użyj bieżącego kodu produktu na kontenerze celu. Dla przycisków utworzonych przez autora zresetuj również poprzedni stan SDK, jak pokazano w poradniku dla niestandardowej witryny sklepu.

Reset przycisku utworzonego przez autora#

Poniższe postępuje zgodnie z istniejącym kontraktem niestandardowej witryny sklepu. Wywołaj je z własnego obsłużyciela wyboru, po poznaniu wybranego kodu produktu.

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;
}

Połączenie z rzeczywistym cyklem życia platformy#

Nie istnieje uniwersalne zdarzenie zmiany wariantu w e-commerce. Przewodnik Shopify definiuje zdarzenie do wysyłania przez motyw; samo dodanie tego nasłuchiwacza nie łączy motywu. Użyj wywołania zwrotnego udokumentowanego przez Twój rzeczywisty motyw lub aplikację.

Dla React / Next.js i Vue / Nuxt postępuj zgodnie z instrukcjami cyklu życia po stronie klienta i czyszczenia w przewodniku frameworka.

Sprawdzanie przestarzałych wyborów#

Przełączaj się między produktem kwalifikowanym, innym produktem kwalifikowanym a tym bez mapowania. Viewer nigdy nie może ponownie otworzyć poprzedniego produktu po zmianie wyboru. Powtórz z szybkimi podglądami i nawigacją wsteczną w przeglądarce.