Pages dynamiques et changements de variante#

Le SDK observe les cibles insérées après le chargement de la page. Votre boutique en ligne reste responsable du produit sélectionné et doit maintenir la synchronisation des attributs de cible avec cette sélection.

Charger une fois, mettre à jour la cible#

Gardez un seul chargeur SDK au niveau de l'application ou du thème. N'ajoutez pas de nouveau script à chaque transition de route. Rendez une cible là où le produit actuel apparaît et mettez-la à jour lorsqu'une prévisualisation rapide, un sélecteur de variante ou une route côté client change le produit.

Pour les boutons générés, utilisez le code produit actuel sur le conteneur de la cible. Pour les boutons créés manuellement, réinitialisez également l'état précédent du SDK, comme illustré dans le tutoriel de boutique en ligne personnalisée.

Réinitialisation du bouton créé manuellement#

Ce qui suit respecte le contrat existant de boutique en ligne personnalisée. Appelez-le depuis votre propre gestionnaire de sélection, après avoir connu le code produit sélectionné.

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

Connecter le véritable cycle de vie de la plateforme#

Il n'existe pas d'événement universel de changement de variante commun à toutes les plateformes e-commerce. Le guide Shopify définit un événement que votre thème doit déclencher ; ajouter cet écouteur seul ne connecte pas le thème. Utilisez la fonction de rappel documentée par le thème ou l’application que vous utilisez.

Pour React / Next.js et Vue / Nuxt, suivez les instructions de cycle de vie côté client et de nettoyage du guide de framework.

Vérifier les sélections obsolètes#

Basculez entre un produit éligible, un autre produit éligible et un produit sans correspondance. Le Viewer ne doit jamais rouvrir le produit précédent après un changement de sélection. Répétez avec les prévisualisations rapides et la navigation arrière du navigateur.