कस्टम स्टोरफ्रंट डेवलपर इंटीग्रेशन#

ideal.house SDK लोड करें और स्टोरफ्रंट productCode मानों को कैटलॉग से मैप करें।

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

1. SDK लोड करें#

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

2. एक बटन अनुबंध चुनें#

विकल्प A: SDK-जनरेटेड बटन#

एक लक्ष्य कंटेनर रेंडर करें। उत्पाद सत्यापन के बाद, SDK अपने बच्चे बटन को बनाता है।

<div data-idealhouse-button-container data-product-code="<PRODUCT_CODE>"></div>

विकल्प B: लेखित बटन#

बटन को स्वयं रेंडर और स्टाइल करें। SDK DOM को सुरक्षित रखता है और योग्यता के साथ-साथ क्लिक व्यवहार को बाइंड करता है।

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. productCode को कैटलॉग के साथ समान रखें#

<PRODUCT_CODE>

• कैटलॉग productCode और स्टोरफ्रंट data-product-code समान होने चाहिए, केस सहित।
• हर रेंडर पर एक परिवर्तनशील नाम से productCode को पुनः जनरेट न करें; जब इसे बदलना हो, तो कैटलॉग और स्टोरफ्रंट को एक साथ अपडेट करें।

4. डायनामिक पेजों और चयनित उत्पादों का प्रबंधन करें#

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

चयन परिवर्तनों के बाद एक लेखित बटन अपडेट करें#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.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
}

5. इंटीग्रेशन का सत्यापन करें#

1. नेटवर्क पैनल sdk.js को HTTP 200 के साथ लोड दिखाता है।
2. मैच किया गया लक्ष्य data-product-code कैटलॉग से पूर्णतः मेल खाता है।
3. केवल योग्य उत्पाद एक जनरेटेड या लेखित बटन दिखाते हैं।
4. डायनामिक उत्पाद परिवर्तन ग्राहक के क्लिक करने से पहले लक्ष्य को अपडेट करते हैं।
5. बटन पर क्लिक करने से चयनित उत्पाद के साथ ideal.house Viewer खुलता है।

उन्नत कॉन्फ़िगरेशन#

सर्वर-जनरेटेड लॉन्च टोकन#

जब आपका बैकएंड छोटे-जीवन लॉन्च टोकन जारी करता है, तो इस मोड का उपयोग करें। Client Secret कभी भी ब्राउज़र JavaScript में नहीं दिखना चाहिए।

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

कस्टम उत्पाद आकार#

मैच किए गए तत्व पर चौड़ाई, ऊँचाई, और लोअरकेस यूनिट (ft, in, या cm) को एक साथ प्रदान करें। SDK क्लिक समय पर नवीनतम मानों को पढ़ता है।

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>