Vue / Nuxt इंटीग्रेशन#

ideal.house ब्राउज़र SDK का उपयोग सीधे Vue या Nuxt में करें और इसके जनरेटेड-बटन कंटेनर को प्रतिक्रियाशील उत्पाद स्थिति के साथ सिंक रखें। इस गाइड में कोई ideal.house Vue npm पैकेज नहीं है।

** सत्यापन स्थिति:** SDK मार्कअप को वर्तमान डैशबोर्ड टेम्पलेट के विरुद्ध जाँचा गया था; Vue और Nuxt आधिकारिक दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षा किया गया था। कोई ग्राहक एप्लिकेशन या प्रोडक्शन क्रेडेंशियल्स उपलब्ध नहीं थे।

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

पूर्वशर्तें और सीमाएँ#

Shop ID, Publishable Key, एक आयातित SKU, और एक प्रतिक्रियाशील चयनित-वैरिएनट रिकॉर्ड तैयार करें। Shop ID और Publishable Key क्लाइंट-दृश्य हो सकते हैं। Client Secrets, AI API कीज़, और उत्पाद-आयात क्रेडेंशियल्स को सर्वर पर रखें।

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

उत्पाद कोड का कैटलॉग sku से पूर्णतः बराबर होना चाहिए।

Vue कंपोनेंट#

कंटेनर को एक key दें ताकि चयनित SKU बदलने पर Vue एक साफ़ नोड बनाए:

vue

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ productCode?: string | null }>()
const code = computed(() => props.productCode?.trim() || '')
</script>

<template>
  <div
    v-if="code"
    :key="code"
    data-idealhouse-button-container
    :data-product-code="code"
  />
</template>

कैनोनिकल चयनित वैरिएनट SKU पास करें। अधूरे चयन के लिए कुछ भी रेंडर न करें, बजाय पूर्ववर्ती कोड को दृश्यमान छोड़ने के।

Nuxt लोडर#

Nuxt का useHead बाहरी स्क्रिप्ट टैग का समर्थन करता है। इसे app.vue या उत्पाद पेजों को कवर करने वाले लेआउट में एक बार पंजीकृत करें:

vue

<script setup lang="ts">
const config = useRuntimeConfig()

useHead({
  script: [
    {
      key: 'idealhouse-room-visualizer-sdk',
      src: 'https://sdk.ideal.house/sdk.js',
      async: true,
      'data-shop-id': config.public.idealhouseShopId,
      'data-publishable-key': config.public.idealhousePublishableKey,
    },
  ],
})
</script>

केवल सार्वजनिक मानों को runtimeConfig.public के तहत कॉन्फ़िगर करें। सादा Vue के लिए, स्क्रिप्ट को एप्लिकेशन HTML में एक बार जोड़ें या मूल कंपोनेंट के onMounted() में एक querySelector डुप्लिकेट जाँच के साथ बनाएं। ब्राउज़र DOM API को क्लाइंट-साइड पर चलना चाहिए।

वैरिएंट और डायनामिक नेविगेशन#

selectedVariant.sku को कंपोनेंट से बाइंड करें। की-युक्त नोड विकल्प परिवर्तनों को किसी अदस्तावेज़ित SDK विधि के बिना संभालता है। जब Nuxt रूट डेटा बदलती है जबकि कंपोनेंट इंस्टेंस फिर से उपयोग किया जाता है, तो गणना किया गया कोड अपडेट होता है और पुराना कंटेनर नष्ट हो जाता है।

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

यदि SSR और हाइड्रेशन को एक ही SKU का पता नहीं है, तो क्लाइंट उत्पाद स्थिति तैयार होने तक कोई बटन रेंडर न करें, या कैनोनिकल SKU को पेज पेयलोड में सीरियलाइज़ करें। केवल रेंडर किए गए विकल्प टेक्स्ट से SKU पढ़ने से बचें।

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

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

आपका बैकएंड कॉमर्स क्लाइंट, वेबहुक, नियोजित सिंक, और निजी क्रेडेंशियल्स ब्राउज़र SDK के बाहर रहते हैं।

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

SSR/हाइड्रेशन, हार्ड रीलोड, क्लाइंट नेविगेशन, ब्राउज़र बैक/फॉरवर्ड, हर वैरिएंट, खाली/अज्ञात SKUs, दोहराए गए कार्ड, क्विक व्यू, <KeepAlive>, लोडिंग स्थितियों, मोबाइल, सहमति, और प्रोडक्शन बिल्ड का परीक्षण करें। बिल्कुल एक SDK अनुरोध और सटीक DOM उत्पाद कोड/SKU समता की पुष्टि करें। सीक्रेट्स के लिए बिल्ड किए गए एसेट्स की जांच करें।

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