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

OpenCart एकीकरण#

OpenCart 4 एक्सटेंशन या कस्टम थीम के माध्यम से Room Visualizer जोड़ें और एक स्थिर स्टोरफ्रंट प्रोडक्ट कोड को ideal.house कैटलॉग के साथ मैप करें।

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

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

पूर्व शर्तें और कोड चयन#

एक स्टेजिंग दुकान, एक्सटेंशन/थीम विकास पहुंच, Shop ID, Publishable Key, और आयातित टेस्ट रिकॉर्ड तैयार करें। OpenCart कोर सामान्य रूप से प्रोडक्ट टेम्पलेट में model को प्रकट करता है, जबकि SKU वर्शन और थीम के आधार पर कंट्रोलर/एक्सटेंशन कार्य की आवश्यकता हो सकती है। एक मान चुनें और उसे ideal.house sku के रूप में लगातार उपयोग करें।

कोर कैटलॉग फ़ाइलों को सीधे संपादित न करें। परिवर्तनों को एक OpenCart 4 एक्सटेंशन के रूप में पैकेज करें या उन्हें वर्शन-नियंत्रित कस्टम थीम में रखें।

न्यूनतम 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 के समान होना चाहिए, अक्षर-दर-अक्षर।

प्रोडक्ट कंटेनर रेंडर करें#

अपने एक्सटेंशन के माध्यम से सक्रिय प्रोडक्ट टेम्पलेट का विस्तार करें। यदि आप जानबूझकर OpenCart model फ़ील्ड को ideal.house sku के साथ मैप करते हैं, तो इसे प्रोडक्ट एक्शन के पास रखें:

twig
{% if model %}
  <div class="idealhouse-host">
    <div
      data-idealhouse-button-container
      data-product-code="{{ model }}">
    </div>
  </div>
{% endif %}

Twig ऑटोएस्केपिंग पर्यावरण कॉन्फ़िगरेशन पर निर्भर करती है; सुनिश्चित करें कि चयनित मान HTML-एट्रिब्यूट एस्केप किया गया है। यदि आप वास्तविक SKU फ़ील्ड का चयन करते हैं, तो अपने एक्सटेंशन में कंट्रोलर के टेम्पलेट डेटा में उस सैनिटाइज़्ड मान को जोड़ें और model के बजाय इसे रेंडर करें।

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

एक्सटेंशन/थीम तंत्र के माध्यम से एक स्टोरफ्रंट JavaScript एसेट जोड़ें। इसमें आवश्यक एट्रिब्यूट्स के साथ एक स्क्रिप्ट बनानी चाहिए:

js
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 को JavaScript, Twig, एक्सटेंशन लॉग्स, या कैश्ड HTML में न रखें।

ऑप्शन, वैरिएंट्स, और डायनामिक रेंडरिंग#

OpenCart ऑप्शन सार्वभौमिक रूप से SKU-वाले वैरिएंट्स के साथ एक-से-एक मैप नहीं होते हैं। यदि आपकी दुकान एक ऑप्शन/वैरिएंट एक्सटेंशन का उपयोग करती है, तो उस एक्सटेंशन के दस्तावेज़ीकृत रिज़ॉल्व्ड-वैरिएंट कॉलबैक और डेटा मॉडल के साथ एकीकरण करें। होस्ट को केवल तभी बदलें जब वह सटीक चयनित कोड प्रदान करे:

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

यह ग्राहक के एडैप्टर का कोड है; इस गाइड में सभी OpenCart थीम के लिए कोई एक सार्वभौमिक वैरिएंट इवेंट नहीं है। AJAX खोज, श्रेणी फ़िल्टर, पॉपअप और त्वरित दृश्य के लिए एक्सटेंशन के टेम्पलेट में साफ़ कंटेनर बनाएँ या उसके प्रलेखित पूर्णता कॉलबैक से ब्रिज को कॉल करें। SDK द्वारा बनाए गए चाइल्ड तत्वों की कभी नकल न करें।

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

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

OpenCart एडमिन API कॉल, शेड्यूल्ड निर्यात, इवेंट लिसनर, और वेबहुक ग्राहक-स्वामित्व वाला एकीकरण कार्य है।

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

सरल प्रोडक्ट्स, प्रत्येक समर्थित ऑप्शन कम्बिनेशन, गायब और डुप्लिकेट कोड, अज्ञात ideal.house SKU, कैटेगरी/खोज पेज, क्विक व्यू, ब्राउज़र बैक/फॉरवर्ड, मोबाइल लेआउट, कई दुकानें, भाषाएं/मुद्राएं, सहमति, और प्रोडक्शन कैश/मिनिफ़िकेशन का परीक्षण करें। ठीक एक SDK अनुरोध और सटीक कोड मेलखाने की पुष्टि करें।

हटाने के लिए, एक्सटेंशन को निष्क्रिय/अनइंस्टॉल करें या कस्टम-थीम ओवरराइड और एसेट को हटाएं, OpenCart संशोधन/इवेंट्स को रीफ्रेश करें, थीम/CDN कैश साफ़ करें, और पुष्टि करें कि SDK अनुरोध और कंटेनर अनुपस्थित हैं।

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