Páginas dinâmicas e mudanças de variant#

O SDK observa targets inseridos após o carregamento da página. Sua storefront ainda é responsável pelo produto selecionado e deve manter os atributos do target sincronizados com essa seleção.

Carregue uma vez, atualize o target#

Mantenha um único carregador do SDK no nível da aplicação ou do theme. Não adicione um novo script em cada transição de rota. Renderize um target onde o produto atual aparece e atualize-o quando uma visualização rápida, seletor de variant ou rota client-side alterar o produto.

Para botões gerados, use o código do produto atual no container do target. Para botões criados por você, também resete o estado anterior do SDK, conforme mostrado no tutorial de storefront personalizada.

Redefinição do botão criado por você#

O seguinte segue o contrato existente de storefront personalizada. Chame-o a partir do seu próprio handler de seleção, depois de conhecer o código do produto selecionado.

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

Conecte o ciclo de vida real da plataforma#

Não existe um evento universal de mudança de variant no ecommerce. O guia Shopify define um evento para seu theme disparar; adicionar esse listener sozinho não conecta o theme. Use o callback documentado pelo seu theme ou aplicação real.

Para React / Next.js e Vue / Nuxt, siga as instruções do guia do framework sobre ciclo de vida client-side e limpeza.

Verifique seleções obsoletas#

Alterne entre um produto elegível, um produto elegível diferente e um sem mapeamento. O Viewer nunca deve reabrir o produto anterior após alterações de seleção. Repita com quick views e navegação de voltar no navegador.