SHOPLINE एकीकरण#

थीम ऐप एक्सटेंशन या नियंत्रित कस्टम-थीम ब्लॉक के माध्यम से SHOPLINE ऑनलाइन स्टोर के साथ Room Visualizer को एकीकृत करें।

सत्यापन स्थिति: SHOPLINE ऑनलाइन स्टोर 2.x/3.0 थीम दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षित किया गया था। कोई पार्टनर ऐप या मर्चेंट टेस्ट स्टोर उपलब्ध नहीं था। टेम्पलेट सिंटैक्स और समर्थित एक्सटेंशन प्रकार ऑनलाइन स्टोर जनरेशन के अनुसार भिन्न होते हैं, इसलिए सटीक स्टोर वर्शन के विरुद्ध सत्यापित करें।

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

एकीकरण सतह चुनें#

ऑनलाइन स्टोर 2.0/2.1 पर पुनर्चालन योग्य सार्वजनिक ऐप के लिए, SHOPLINE एक थीम ऐप एक्सटेंशन की सिफ़ारिश करता है जिसमें एक ऐप ब्लॉक और वैकल्पिक ऐप एम्बेड ब्लॉक होता है।
ऑनलाइन स्टोर 3.0 थीम वैकल्पिक JavaScript एसेट्स और ऐप ब्लॉक्स के साथ पुनर्चालन योग्य ब्लॉक प्रदान करती हैं।
स्क्रिप्ट टैग/एसेट API पुराने या वर्शन/ऐप-प्रकार पर निर्भर हैं; SHOPLINE की संगतता तालिका की जांच के बिना उनका चयन न करें।
एक-स्टोर थीम कस्टमाइज़ेशन के लिए, सक्रिय वर्शन के ब्लॉक/टेम्पलेट और एसेट संरचना का उपयोग करें।

एक विकास स्टोर, एक्सटेंशन/थीम पहुंच, Shop ID, Publishable Key, और आयातित वैरिएंट कोड तैयार करें।

न्यूनतम 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>

प्रोडक्ट कोड को ideal.house कैटलॉग sku से मेल खाना चाहिए। यह दस्तावेज़ीकरण यह दावा नहीं करता कि कोई इंस्टॉलेबल ideal.house SHOPLINE ऐप मौजूद है।

थीम ब्लॉक बनाएं#

एक ऐप ब्लॉक या सार्वजनिक थीम ब्लॉक बनाएं जो प्रोडक्ट विवरण पेज पर होस्ट रेंडर करता है। अपने ऑनलाइन स्टोर जनरेशन के लिए दस्तावेज़ीकृत सटीक प्रोडक्ट/वैरिएंट ऑब्जेक्ट और एस्केपिंग हेल्पर्स का उपयोग करें। अंतिम स्टोरफ्रंट HTML होना चाहिए:

html

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

टेम्पलेट स्रोत में, CHAIR-OAK-01 को वर्तमान चयनित वैरिएंट SKU/कोड एक्सप्रेशन से बदलें। Shopify Liquid एक्सप्रेशन को SHOPLINE 3.0 Handlebars टेम्पलेट्स में पेस्ट न करें; ये अलग भाषाएं और ऑब्जेक्ट अनुबंध हैं।

एक ऐप ब्लॉक के लिए, इसे थीम एडिटर में प्रोडक्ट सेक्शन में जोड़ें। एक ऐप एम्बेड के लिए, इसे दृश्यमय UI के बिना SDK को वैश्विक रूप से लोड करने के लिए उपयोग करें। ऐप ब्लॉक्स को सामान्य रूप से इंस्टॉलेशन के बाद मर्चेंट द्वारा सक्षम/स्थानांतरित करने की आवश्यकता होती है।

SDK एक बार लोड करें#

एक्सटेंशन/थीम JavaScript एसेट में, इसे जोड़ने से पहले दो सार्वजनिक सेटिंग्स के साथ स्क्रिप्ट बनाएं:

if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

मल्टी-मर्चेंट क्रेडेंशियल्स के लिए एक्सटेंशन कॉन्फ़िगरेशन/डायनामिक पैरामीटर का उपयोग करें। केवल Publishable Key को प्रकट करें; ऐप सीक्रेट्स को अपने सर्वर पर रखें।

चयनित वैरिएंट्स और डायनामिक सेक्शन#

सक्रिय थीम के दस्तावेज़ीकृत प्रोडक्ट-चयन कॉलबैक को एक ग्राहक एडैप्टर से जोड़ें:

function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

SHOPLINE थीम कस्टमाइज़ेबल हैं, इसलिए यह गाइड कोई सार्वभौमिक स्टोरफ्रंट वैरिएंट इवेंट नहीं बनाती है। ऑनलाइन स्टोर 3.0 थीम-एडिटर सेक्शन/ब्लॉक इवेंट्स का दस्तावेज़ीकरण करता है, लेकिन वे एडिटर लाइफसाइकल इवेंट्स हैं, खरीदार वैरिएंट-चयन इवेंट्स नहीं।

जब सेक्शन, फ़िल्टर, पेजिनेशन, क्विक व्यू, या थीम-एडिटर प्रीव्यू प्रोडक्ट नोड को पुनः रेंडर करते हैं, तो एक नया कंटेनर बनाएं। जब ब्लॉक थीम एडिटर में अनलोड होता है तो लिसनर को साफ़ करें। प्रोडक्ट-कार्ड बटन को आइटम-लेवल SKU की आवश्यकता होती है; जब अंतिम वैरिएंट ज्ञात न हो तो नियंत्रण को छोड़ दें।

प्रोडक्ट्स आयात करें#

SHOPLINE प्रोडक्ट और वैरिएंट डेटा को निर्यात करें, और चयनित स्टोरफ्रंट कोड को ideal.house sku के साथ मैप करें। उत्पाद अपलोड और आयात, कार्य की स्थिति, सूची देखना, अपडेट, हटाना, और पुनः प्रयास का प्रबंधन के लिए अनुमोदित गाइड का उपयोग करें।

SHOPLINE एडमिन API सिंक, वेबहुक, ऐप OAuth, और ऐप-स्टोर वितरण ग्राहक एडैप्टर कार्य हैं।

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

इंस्टॉलेशन और मर्चेंट ब्लॉक सक्षमता, एक सरल प्रोडक्ट, प्रत्येक वैरिएंट, गायब/अज्ञात कोड, कार्ड, क्विक व्यू, फ़िल्टर, SPA-शैली नेविगेशन, मोबाइल, सहमति, थीम एडिटर प्रीव्यू, और प्रत्येक समर्थित ऑनलाइन स्टोर वर्शन का परीक्षण करें। एक SDK अनुरोध और सटीक कोड/SKU मैपिंग की पुष्टि करें।

हटाने के लिए, ऐप ब्लॉक/एम्बेड को निष्क्रिय करें और एक्सटेंशन को अनइंस्टॉल करें, या कस्टम ब्लॉक और एसेट को हटाएं। साफ़ थीम को प्रकाशित करें, कैश साफ़ करें, और पुष्टि करें कि कोई SDK URL या data-idealhouse-* मार्कअप शेष नहीं है।