एकीकरण WordPress#

एक सार्वजनिक ब्राउज़र स्क्रिप्ट लोड करके और एक कंटेनर रेंडर करके WordPress साइट में ideal.house Room Visualizer जोड़ें, जिसका प्रोडक्ट कोड किसी आयातित कैटलॉग SKU से मेल खाता हो।

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

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

विशेषाधिकार और पूर्व शर्तें#

यह गाइड WordPress कंटेंट साइट्स, क्लासिक थीम्स, ब्लॉक थीम्स और पेज बिल्डर को कवर करती है जो आपको HTML जोड़ने की अनुमति देते हैं। यदि साइट WooCommerce प्रोडक्ट डेटा का उपयोग करती है, तो वेरिएंट चयन के लिए WooCommerce गाइड का उपयोग करें।

तैयार करें:

• एडमिनिस्ट्रेटर एक्सेस और, स्थायी विधि के लिए, एक चिल्ड थीम या छोटी साइट-विशिष्ट प्लगइन;
• ideal.house डैशबोर्ड से Shop ID और Publishable Key;
• एक प्रोडक्ट जो पहले से ही ideal.house में आयातित हो गया है और जिसका ज्ञात sku है;
• एक स्टेजिंग पेज जहाँ टेस्टिंग के दौरान कैश/मिनिफिकेशन को अक्षम किया जा सकता है।

Publishable Key ब्राउज़र मार्कअप के लिए है। कभी भी WordPress HTML में Client Secret या AI API कुंजी नहीं रखें।

SDK अनुबंध की पुष्टि करें#

सबसे छोटा समर्थित इंस्टॉलेशन बिल्कुल एक 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>

data-product-code को कैटलॉग sku के बराबर होना चाहिए, जिसमें केस और पंच्युएशन शामिल है। SDK कंटेनर की सामग्री का मालिक है। इस गाइड में WordPress कोई ideal.house प्लगइन प्रदान नहीं करता है।

स्क्रिप्ट को साइट-वाइड इंस्टॉल करें#

WordPress फ्रंट-एंड स्क्रिप्ट्स को wp_enqueue_script() के माध्यम से लोड करने की सिफारिश करता है। नीचे दिए गए कोड को एक चिल्ड थीम functions.php या साइट-विशिष्ट प्लगइन में जोड़ें। फ़िल्टर उस टैग में दो आवश्यक डेटा एट्रिब्यूट्स जोड़ता है जिसे WordPress उत्पन्न करता है।

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

दोनों प्लेसहोल्डर बदलें। 6.3 से पहले के WordPress संस्करण अंतिम wp_enqueue_script() आर्गुमेंट के एरे फॉर्म को स्वीकार नहीं करते; इसके बजाय true पास करें और async जोड़ने के लिए script_loader_tag फ़िल्टर का उपयोग करें।

SDK को कोड ब्लॉक या टैग मैनेजर में दोबारा इंस्टॉल न करें। DevTools में, document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length को 1 लौटाना चाहिए।

बटन रखें#

ब्लॉक एडिटर में, जहाँ बटन दिखना चाहिए, वहाँ एक कस्टम HTML ब्लॉक जोड़ें:

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

दोहराए गए कार्डों के लिए, थीम टेम्पलेट से समान मार्कअप रेंडर करें और कोड को HTML एट्रिब्यूट के रूप में एस्केप करें:

<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

आपका थीम या प्लगइन $idealhouse_product_code प्रदान करना चाहिए। जब तक कि वह सटीक मूल्य इम्पोर्ट किए गए ideal.house sku भी न हो, पोस्ट आईडी, स्लग या शीर्षक का उपयोग न करें।

प्रोडक्ट और वेरिएंट मैपिंग#

लॉन्च से पहले एक स्पष्ट मैपिंग टेबल बनाएं:

यदि वेरिएंट्स के बीच पेज बदलता है, तो ग्राहक एडैप्टर को नया data-product-code सेट करना होगा। पुराने व्यूअर स्टेट के पुनर् उपयोग से बचने के लिए नया कंटेनर इनसर्ट करने से पहले पुराना कंटेनर साफ़ करें:

function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku.trim();
  host.append(container);
}

यह ग्राहक एडैप्टर कोड है। यह किसी अदस्तावेज़ित ideal.house मेथड को कॉल नहीं करता या कोई WordPress इवेंट नहीं बनाता; इसे अपनी थीम या पेज बिल्डर द्वारा प्रदान किए गए दस्तावेज़ीकृत कॉलबैक से कॉल करें।

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

AJAX फ़िल्टर, इनफिनिट स्क्रॉल, मोडल प्रोडक्ट कार्ड, या पेज-बिल्डर ट्रांज़िशन के लिए, नए प्रोडक्ट नोड DOM में आने के बाद एक ताज़ा कंटेनर इनसर्ट करें। किसी ऐसे कंटेनर का क्लोन न बनाएं जिसे SDK ने पहले से भर दिया हो। यदि आपका टूल कोई स्थिर रेंडर कॉलबैक प्रदर्शित नहीं करता, तो कंटेनर को उसके आइटम टेम्पलेट में जोड़ें ताकि हर रेंडर साफ़ मार्कअप बनाए।

थीम एडिट के बाद, WordPress, CDN, और ऑप्टिमाइज़ेशन-प्लगइन कैश को पर्स करें। यदि कोई परफॉर्मेंस प्लगइन इसके डेटा एट्रिब्यूट्स को हटा देता है या इसे इंटरैक्शन के बाद तक टाल देता है, तो https://sdk.ideal.house/sdk.js को डिले/डीफर रीराइटिंग से बाहर रखें।

कैटलॉग डेटा आयात करें#

WordPress कंटेंट स्वतः सिंक नहीं होता है। चयनित कस्टम फ़ील्ड को sku के रूप में एक्सपोर्ट करें और उत्पाद अपलोड के माध्यम से मेल खाते रिकॉर्ड आयात करें। उत्पाद आयात करें, कार्य की स्थिति, उत्पादों की सूची देखें, उत्पाद अपडेट करें, उत्पाद हटाएँ, और त्रुटियाँ और पुनः प्रयास के साथ जारी रखें।

प्रकाशन से पहले सत्यापित करें#

1. स्टेजिंग को एक प्राइवेट ब्राउज़र विंडो में खोलें, WordPress एडिटर प्रीव्यू में नहीं।
2. पुष्टि करें कि SDK रिक्वेस्ट सफलतापूर्वक और केवल एक बार लौटती है।
3. कंटेनर की जांच करें और आयातित sku के साथ data-product-code को अक्षर-दर-अक्षर तुलना करें।
4. पुष्टि करें कि एक आयातित SKU उपयोगी विज़ुअलाइज़र कंट्रोल उत्पन्न करता है और एक अज्ञात SKU कोई टूटा हुआ कंट्रोल प्रदर्शित नहीं करता।
5. पेज-बिल्डर नेविगेशन, फ़िल्टर, ब्राउज़र बैक/फॉरवर्ड, मोबाइल लेआउट और सहमति सेटिंग्स का परीक्षण करें।
6. हर समर्थित वेरिएंट का चयन करें और पुष्टि करें कि कंटेनर उसके SKU के साथ पुनर्निर्मित होता है।
7. ब्राउज़र कंसोल की जांच करें और कैश/मिनिफिकेशन को फिर से सक्षम करके टेस्ट करें।

एकीकरण हटाएं#

एंक्वी फंक्शन और script_loader_tag फ़िल्टर हटाएं, फिर हर data-idealhouse-button-container ब्लॉक या टेम्पलेट फ्रैगमेंट को हटा दें। सभी कैश को पर्स करें और पुष्टि करें कि SDK URL पेज स्रोत और नेटवर्क पैनल से अनुपस्थित है।

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

• WordPress थीम मैनुअल: एसेट्स शामिल करना
• WordPress wp_enqueue_script() संदर्भ
• WordPress चिल्ड थीम्स