Dinamik sayfalar ve varyant değişiklikleri#

SDK, sayfa yüklemesinden sonra eklenen hedefleri izler. Mağaza vitrininiz hâlâ seçili ürünün sahibidir ve hedef özniteliklerini bu seçimle eş zamanlı tutmalıdır.

Bir kez yükleyin, hedefi güncelleyin#

Uygulama veya tema düzeyinde tek bir SDK yükleyiciyi koruyun. Her rota geçişinde yeni bir betik eklemeyin. Mevcut ürünün göründüğü yerde bir hedef oluşturun ve hızlı görüntüleme, varyant seçici veya istemci tarafı rota ürünü değiştirdiğinde hedefi güncelleyin.

Oluşturulan düğmeler için hedef konteynerde geçerli ürün kodunu kullanın. Entegrasyonu yapan geliştiricinin oluşturduğu düğmeler için, özel mağaza vitrini öğreticisinde gösterildiği gibi, önceki SDK durumunu da sıfırlayın.

Oluşturulan düğme sıfırlaması#

Aşağıdaki, mevcut özel mağaza vitrini sözleşmesine uyar. Seçili ürün kodunu bildiğinizde, kendi seçim işleyicinizden çağırın.

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

Gerçek platform yaşam döngüsünü bağlayın#

Evrensel bir e-ticaret varyant değişim olayı yoktur. Shopify kılavuzu, temanızın dağıtması için bir olay tanımlar; yalnızca o dinleyiciyi eklemek temayı bağlamaz. Gerçek temanızın veya uygulamanın belgelenmiş geri çağırmasını (callback) kullanın.

React / Next.js ve Vue / Nuxt için, çerçeve kılavuzundaki istemci tarafı yaşam döngüsü ve temizlik talimatlarını izleyin.

Eski seçimleri kontrol edin#

Uygun bir ürün, farklı bir uygun ürün ve eşlemesi olmayan bir ürün arasında geçiş yapın. Viewer, seçim değiştiğinde önceki ürünü asla yeniden açmamalıdır. Hızlı görüntülemeler ve tarayıcı geri gezintisiyle tekrarlayın.