Ideal House
सामग्री पर जाएं

BigCommerce एकीकरण#

Room Visualizer को BigCommerce Stencil स्टोरफ्रंट में जोड़ने के लिए, SDK को एक बार लोड करें और वर्तमान उत्पाद या वेरिएंट SKU को एक जनरेटेड-बटन कंटेनर में रेंडर करें।

** सत्यापन स्थिति:** BigCommerce डेवलपर दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षित किया गया था। कोई टेस्ट स्टोर उपलब्ध नहीं था। Stencil और Catalyst के रेंडरिंग और नेविगेशन मॉडल अलग-अलग हैं; यह गाइड एक कार्यात्मक Stencil पथ प्रदान करता है और Catalyst स्टोरफ्रंट्स को एक फ्रेमवर्क एडैप्टर की ओर निर्देशित करता है।

** SDK को लोड करने से पहले:** डैशबोर्ड → सेटिंग्स खोलें, अपने स्टोरफ्रंट ओरिजिन को Allowed Origins (CORS) में जोड़ें, और सहेजें पर क्लिक करें। प्रकाशित होस्टनेम और किसी भी प्रीव्यू या स्टेजिंग ओरिजिन को शामिल करें जिन्हें आप उपयोग करते हैं; कई ओरिजिन को कॉमा से अलग करें। कॉन्फ़िगरेशन के चरण देखें।

एक स्टोरफ्रंट पथ चुनें#

  • Stencil: लोडर को Script Manager या Scripts API के साथ इंस्टॉल करें, फिर एक कस्टम थीम टेम्पलेट में कंटेनर जोड़ें।
  • Catalyst: Catalyst React/Next.js ऐप में स्क्रिप्ट और कंपोनेंट जोड़ें; React / Next.js का पालन करें।
  • Legacy Blueprint: एक समर्थित स्टोरफ्रंट पर माइग्रेट करें या एक BigCommerce डेवलपर से एक सुरक्षित इनसर्शन पॉइंट की पहचान करवाएं। वर्तमान Scripts API दस्तावेज़ीकरण Blueprint को अलग से मानता है।

आपको थीम-एडिट एक्सेस, एक स्टेजिंग थीम/चैनल, ideal.house Shop ID और Publishable Key, और कम से कम एक BigCommerce SKU की आवश्यकता है जिसे ideal.house में इम्पोर्ट किया गया है।

न्यूनतम SDK अनुबंध#

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

कंटेनर का Product Code इम्पोर्ट किए गए कैटलॉग sku से बिल्कुल मेल खाना चाहिए। यह गाइड एक ideal.house BigCommerce ऐप का मान नहीं लेती।

Stencil पर इंस्टॉल करें#

Storefront → Script Manager में, संबंधित स्टोरफ्रंट/चैनल और उत्पाद पृष्ठों के लिए एक फुटर स्क्रिप्ट बनाएं। उदाहरण से केवल SDK स्क्रिप्ट टैग को अपनी ब्राउज़र-सुरक्षित प्रमाणीकरण के साथ पेस्ट करें। Script Manager चैनल-जागरूक Scripts API का कंट्रोल-पैनल समकक्ष है।

एक दोबारा उपयोग किए जा सकने वाले ऐप के लिए, BigCommerce के Scripts API का उपयोग करें। उस API ऑपरेशन और ऐप OAuth प्रवाह आपकी इंटीग्रेशन सेवा की ज़िम्मेदारी है; स्टोरफ्रंट कोड में उसका एक्सेस टोकन प्रकट न करें।

पुष्टि करें कि केवल एक SDK टैग मौजूद है। इसे templates/layout/base.html में भी शामिल न करें।

प्रारंभिक उत्पाद रेंडर करें#

एक कस्टम Stencil थीम में, अपने थीम द्वारा उपयोग किए जाने वाले उत्पाद-व्यू पार्शियल में उत्पाद फॉर्म के पास कंटेनर जोड़ें:

handlebars
{{#if product.sku}}
  <div
    data-idealhouse-button-container
    data-product-code="{{product.sku}}"
  ></div>
{{/if}}

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

कार्ड के लिए, कंटेनर को केवल तब रेंडर करें जब कार्ड संदर्भ उस सटीक SKU को प्रकट करे जिसे आपने इम्पोर्ट किया है। विकल्पों वाला उत्पाद श्रेणी पेज पर एक अंतिम वेरिएंट SKU नहीं हो सकता है; उत्पाद पेज पर लिंक दें जब तक कि खरीदार ने एक पूर्ण वेरिएंट का चयन न किया हो।

उत्पाद विकल्पों को सिंक करें#

Stencil थीम JavaScript थीम-विशिष्ट उत्पाद-विवरण कोड के माध्यम से उत्पाद विकल्प परिवर्तनों को प्राप्त करती है। उस बिंदु पर एक कस्टमर एडैप्टर जोड़ें जहाँ वर्तमान थीम ने अंतिम वेरिएंट रिस्पॉन्स को रिज़ॉल्व कर लिया हो:

js
export function replaceIdealhouseContainer(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

अपने थीम कॉलबैक से संकल्पित वेरिएंट SKU पास करें। BigCommerce थीम डिफ़ॉल्ट उत्पाद-विवरण कार्यान्वयन को कस्टमाइज़ या बदल सकती हैं, इसलिए यह गाइड एक वैश्विक ऑप्शन-बदलाव इवेंट का आविष्कार नहीं करती। नए कंटेनर को डालने से पहले पुराने कंटेनर को हटाएं।

क्विक व्यू और डायनामिक पेज#

Quick View, फैसेटेड खोज, पेजिनेशन, और क्लाइंट-साइड नेविगेशन उत्पाद DOM को बदल सकते हैं। हर रेंडर किए गए टेम्पलेट में एक साफ कंटेनर जोड़ें और थीम के दस्तावेज़ीकृत रेंडर कॉलबैक के बाद उसी ब्रिज को कॉल करें। एक ऐसे कंटेनर को क्लोन न करें जिसे SDK ने पहले से भर दिया हो।

Catalyst क्लाइंट-साइड React रेंडरिंग का उपयोग करता है और इसमें कोई Stencil Handlebars संदर्भ नहीं होता है। ऐप शेल में SDK को एक बार लोड करें और चयनित वेरिएंट SKU के आधार पर विज़ुअलाइज़र कंपोनेंट को की करें, जैसा कि React/Next.js गाइड में दिखाया गया है।

उत्पाद डेटा इम्पोर्ट और मैप करें#

BigCommerce sku मानों को ideal.house sku से मैप करें; वेरिएंट के लिए, माता उत्पाद आईडी के बजाय प्रत्येक वेरिएंट SKU का उपयोग करें। BigCommerce कैटलॉग डेटा ब्राउज़र SDK द्वारा सिंक नहीं होता।

स्वीकृत इम्पोर्ट अनुबंध के लिए उत्पाद अपलोड का उपयोग करें, फिर उत्पाद आयात करें, कार्य की स्थिति, उत्पादों की सूची देखें, उत्पाद अपडेट करें, उत्पाद हटाएँ, और त्रुटियाँ और पुनः प्रयास की जाँच करें। कोई भी BigCommerce API एक्सपोर्ट, वेबहुक, या शेड्यूल्ड सिंक एक कस्टमर-संचालित एडैप्टर है।

सत्यापित करें और हटाएं#

लॉन्च से पहले, एक सरल उत्पाद, हर ऑप्शन संयोजन, एक उत्पाद बिना SKU के, और ideal.house से गायब SKU का परीक्षण करें। उत्पाद पृष्ठ, श्रेणी कार्ड, Quick View, फैसेटेड नेविगेशन, ब्राउज़र Back/Forward, मोबाइल लेआउट, सहमति व्यवहार, और प्रत्येक सक्रिय स्टोरफ्रंट चैनल की जांच करें। DevTools में, एक सफल SDK अनुरोध और एक सटीक Product Code/SKU मेल की पुष्टि करें।

इंटीग्रेशन को हटाने के लिए, Script Manager प्रविष्टि या Scripts API रिकॉर्ड को हटाएं, सभी थीम कंटेनर मार्कअप और एडैप्टर कोड को हटाएं, साफ थीम को प्रकाशित करें, फिर स्टोरफ्रंट/CDN कैश को हटाएं। पुष्टि करें कि SDK अनुरोध हर चैनल से गायब है।

आधिकारिक प्लेटफ़ॉर्म संदर्भ#