Páginas dinámicas y cambios de variante#

El SDK observa targets insertados tras la carga de la página. Tu tienda en línea sigue siendo responsable de la selección del producto y debe mantener los atributos del target sincronizados con esa selección.

Cargar una vez, actualizar el target#

Mantén un solo cargador de SDK a nivel de aplicación o tema. No añadas un script nuevo en cada transición de ruta. Renderiza un target donde aparezca el producto actual y actualízalo cuando una vista rápida, un selector de variante o una ruta del lado del cliente cambie el producto.

Para botones generados, usa el código actual del producto en el contenedor del target. Para botones creados por el desarrollador, también restablece el estado previo del SDK, como se muestra en el tutorial de tienda en línea personalizada.

Restablecimiento de botón creado por el desarrollador#

Lo siguiente sigue el contrato existente del storefront personalizado. Llámalo desde tu propio manejador de selección, después de conocer el código del producto seleccionado.

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

Conectar el ciclo de vida real de la plataforma#

No hay evento universal de cambio de variante de ecommerce. La guía de Shopify define un evento que tu tema debe enviar; añadir ese listener solo no conecta el tema. Usa el callback documentado por tu tema o aplicación real.

Para React / Next.js y Vue / Nuxt, sigue las instrucciones del ciclo de vida del lado del cliente y limpieza de la guía del framework.

Buscar selecciones obsoletas#

Alterna entre un producto elegible, un producto elegible diferente y uno sin mapeo. El Viewer nunca debe volver a abrir el producto anterior tras un cambio de selección. Repite con vistas rápidas y navegación hacia atrás del navegador.