Shoplazza एकीकरण#
थीम ऐप एक्सटेंशन या कस्टम Liquid थीम के माध्यम से Shoplazza में Room Visualizer जोड़ें और चयनित वैरिएंट SKU को ideal.house प्रोडक्ट कोड के रूप में रेंडर करें।
सत्यापन स्थिति: Shoplazza थीम, एक्सटेंशन, प्रोडक्ट, और वैरिएंट दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षित किया गया था। कोई पार्टनर ऐप या मर्चेंट टेस्ट स्टोर उपलब्ध नहीं था, इसलिए इंस्टॉलेशन और वैरिएंट स्विचिंग को एक विकास स्टोर में सत्यापित किया जाना चाहिए।
SDK लोड करने से पहले: डैशबोर्ड → सेटिंग्स खोलें, अपने स्टोरफ्रंट मूल को Allowed Origins (CORS) में जोड़ें, और सहेजें पर क्लिक करें। प्रकाशित होस्टनेम और कोई भी प्रीव्यू या स्टेजिंग मूल शामिल करें जिन्हें आप उपयोग करते हैं; कई मूलों को अल्पविराम से अलग करें। कॉन्फ़िगरेशन के चरण देखें।
पूर्व शर्तें#
एक Shoplazza विकास/मर्चेंट स्टोर, थीम या ऐप-एक्सटेंशन स्रोत पहुंच, Shop ID, Publishable Key, और समर्थित वैरिएंट SKU के लिए आयातित रिकॉर्ड तैयार करें। कस्टमाइज़ेशन से पहले मर्चेंट थीम का डुप्लिकेट बनाएं।
थीम ऐप एक्सटेंशन रक्षणीय पुनर्चालन योग्य पथ है। एक ऐप ब्लॉक दृश्यमय UI इंजेक्ट करता है और इसे मर्चेंट द्वारा एक संगत प्रोडक्ट सेक्शन में जोड़ा जाना चाहिए; एक ऐप एम्बेड वैश्विक व्यवहार लोड कर सकता है।
न्यूनतम SDK अनुबंध#
<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>
Shoplazza variant.sku का दस्तावेज़ीकरण करता है; उस सटीक स्ट्रिंग को ideal.house sku के रूप में उपयोग करें।
एक ऐप ब्लॉक जोड़ें#
प्रोडक्ट सेक्शन के लिए एक थीम एक्सटेंशन ऐप ब्लॉक बनाएं। प्रोडक्ट संदर्भ में Shoplazza Liquid ब्लॉक product तक पहुंच सकते हैं। एक खाली होस्ट से शुरू करें, फिर सक्रिय थीम के प्रोडक्ट-फ़ॉर्म स्थिति का उपयोग करके चयनित वैरिएंट प्रदान करें:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
एकल-वैरिएंट प्रोडक्ट के लिए, ब्लॉक JavaScript थीम द्वारा सुरक्षित रूप से सीरीलाइज़ किए गए डेटा से product.variants में एकमात्र दस्तावेज़ीकृत एंट्री को पढ़ सकता है। कई वैरिएंट्स के लिए, होस्ट को खाली रखें जब तक थीम का मौजूदा प्रोडक्ट फ़ॉर्म एक चयन का समाधान न कर ले। इससे एक अदस्तावेज़ित चयनित-वैरिएंट Liquid गुणधर्म पर निर्भरता से बचाव होता है।
SDK लोड करें#
idealhouse.js में, SDK को एक बार लोड करें। एक पुनर्चालन योग्य ऐप के लिए, एक मर्चेंट को हार्ड-कोड करने के बजाय सैनिटाइज़्ड सार्वजनिक ब्लॉक/एम्बेड कॉन्फ़िगरेशन के माध्यम से Shop ID और Publishable Key प्रदान करें:
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);
}
कभी भी ऐप सीक्रेट या ideal.house Client Secret को प्रकट न करें।
चयनित वैरिएंट को सिंक में रखें#
थीम के दस्तावेज़ीकृत प्रोडक्ट-फ़ॉर्म कॉलबैक को इस एडैप्टर से जोड़ें:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Shoplazza का वैरिएंट ऑब्जेक्ट sku का दस्तावेज़ीकरण करता है, लेकिन थीम चयन को अलग रूप से कार्यान्वित कर सकती हैं। कॉलबैक वायरिंग ग्राहक एडैप्टर कार्य है। नए चयन के बाद कंटेनर को पुनर्निर्माण करें; केवल SDK-भरा हुआ मार्कअप को परिवर्तित न करें।
कलेक्शन कार्ड, क्विक व्यू, खोज फ़िल्टर, और क्लाइंट-रेंडर्ड सेक्शन के लिए, एक आइटम-लेवल होस्ट जोड़ें और थीम के दस्तावेज़ीकृत रेंडर कॉलबैक के बाद ब्रिज को चलाएं। यदि कार्ड पर कोई अंतिम वैरिएंट ज्ञात नहीं है, तो बटन को छोड़ें या प्रोडक्ट पेज के लिए लिंक दें।
प्रोडक्ट्स आयात करें#
प्रत्येक समर्थित variant.sku को निर्यात करें और उत्पाद अपलोड के माध्यम से इसे ideal.house sku के रूप में आयात करें। उत्पाद आयात करें, कार्य की स्थिति, उत्पादों की सूची देखें, उत्पाद अपडेट करें, उत्पाद हटाएँ, और त्रुटियाँ और पुनः प्रयास देखें।
एडमिन API निर्यात, वेबहुक, शेड्यूल्ड सिंक, OAuth, और एक्सटेंशन वितरण ग्राहक कार्यान्वयन हैं।
सत्यापित करें और हटाएं#
ऐप ब्लॉक प्लेसमेंट, एम्बेड सक्षमता, एकल-वैरिएंट प्रोडक्ट, सभी मल्टी-वैरिएंट चयन, खाली/डुप्लिकेट/अज्ञात SKU, कलेक्शन कार्ड, क्विक व्यू, फ़िल्टर, ब्राउज़र इतिहास, मोबाइल, लोकलाइज़ेशन/मुद्रा, सहमति, और थीम प्रीव्यू/लाइव मोड्स का परीक्षण करें। एक SDK अनुरोध और सटीक वैरिएंट SKU मैपिंग की पुष्टि करें।
हटाने के लिए, थीम ऐप एक्सटेंशन को निष्क्रिय और अनइंस्टॉल करें या कस्टम Liquid/JavaScript को हटाएं, साफ़ थीम को प्रकाशित करें, स्टोरफ्रंट कैश साफ़ करें, और पुष्टि करें कि SDK और सभी data-idealhouse-* नोड्स अनुपस्थित हैं।