Pagine dinamiche e cambi di variante#

SDK osserva gli elementi di destinazione inseriti dopo il caricamento della pagina. Il negozio continua a gestire il prodotto selezionato e deve mantenerne sincronizzati gli attributi dell’elemento di destinazione.

Caricare una volta e aggiornare l’elemento di destinazione#

Mantieni un solo caricatore di SDK a livello di applicazione o tema. Non aggiungere un nuovo script a ogni cambio di percorso. Visualizza un elemento di destinazione dove compare il prodotto corrente e aggiornalo quando una vista rapida, un selettore di varianti o una navigazione lato client cambia prodotto.

Per i pulsanti generati, usa il codice del prodotto corrente sul contenitore di destinazione. Per i pulsanti creati manualmente, reimposta anche lo stato precedente di SDK, come mostrato nel tutorial per negozi personalizzati.

Reimpostare un pulsante creato manualmente#

Il seguente esempio segue il contratto esistente per i negozi personalizzati. Richiamalo dal tuo gestore della selezione, dopo aver determinato il codice del prodotto selezionato.

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

Collegare il ciclo di vita effettivo della piattaforma#

Non esiste un evento universale per il cambio di variante nei negozi online. La guida Shopify definisce un evento che il tema deve emettere; aggiungere soltanto quel listener non collega il tema. Usa la funzione di richiamo documentata per il tema o l’applicazione effettivamente utilizzati.

Per React / Next.js e Vue / Nuxt, segui le istruzioni della guida del framework sul ciclo di vita lato client e sulla pulizia delle risorse.

Verificare l’assenza di selezioni obsolete#

Passa da un prodotto idoneo a un altro prodotto idoneo, poi a uno senza associazione. Viewer non deve mai riaprire il prodotto precedente dopo un cambio di selezione. Ripeti con le viste rapide e la navigazione indietro del browser.