डायनामिक पेज और वेरिएंट परिवर्तन#

SDK पेज लोड के बाद सम्मिलित किए गए टार्गेट्स का अवलोकन करता है। आपका स्टोरफ्रंट अभी भी चयनित उत्पाद का मालिक है और उस चयन के साथ टार्गेट एट्रिब्यूट्स को सिंक रखना चाहिए।

एक बार लोड करें, टार्गेट अपडेट करें#

एप्लिकेशन या थीम स्तर पर एक SDK लोडर रखें। हर राउट ट्रांज़िशन पर नया स्क्रिप्ट न जोड़ें। टार्गेट वहां रेंडर करें जहां वर्तमान उत्पाद दिखाई देता है और तब अपडेट करें जब क्विक व्यू, वेरिएंट सिलेक्टर या क्लाइंट-साइड राउट उत्पाद को बदलता है।

जनरेटेड बटन के लिए, टार्गेट कंटेनर पर वर्तमान उत्पाद कोड का उपयोग करें। रचित बटन के लिए, कस्टम स्टोरफ्रंट ट्यूटोरियल में दिखाए अनुसार, पिछले SDK स्थिति को भी रीसेट करें।

रचित बटन रीसेट#

निम्नलिखित मौजूदा कस्टम स्टोरफ्रंट अनुबंध का पालन करता है। इसे अपने चयन हैंडलर से कॉल करें, जब आपको चयनित उत्पाद कोड पता हो।

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

वास्तविक प्लेटफ़ॉर्म लाइफ़साइकल से जोड़ें#

कोई सार्वभौमिक ई-कॉमर्स वेरिएंट-चेंज इवेंट नहीं है। Shopify गाइड आपके थीम के लिए डिस्पैच करने के लिए एक इवेंट परिभाषित करता है; केवल उस लिसनर को जोड़ना थीम को जोड़ता नहीं है। अपने वास्तविक थीम या एप्लिकेशन द्वारा दस्तावेज़ीकृत कॉलबैक का उपयोग करें।

React / Next.js और Vue / Nuxt के लिए, फ्रेमवर्क गाइड के क्लाइंट-साइड लाइफ़साइकल और क्लीनअप निर्देशों का पालन करें।

पुराने चयनों की जाँच करें#

एक पात्र उत्पाद, दूसरे पात्र उत्पाद और बिना मैपिंग वाले उत्पाद के बीच चयन बदलें। चयन बदलने के बाद Viewer को कभी भी पिछला उत्पाद दोबारा नहीं खोलना चाहिए। क्विक व्यू और ब्राउज़र में पीछे जाने पर भी यही जाँच दोहराएँ।