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

एकीकरण WooCommerce#

WooCommerce प्रोडक्ट पेजों में Room Visualizer बटन जोड़ें और चयनित वेरिएशन SKU के साथ ideal.house प्रोडक्ट कोड को सिंक रखें।

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

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

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

यह गाइड WordPress पर WooCommerce के लिए है। इसमें एक छोटी साइट-विशिष्ट प्लगइन या चिल्ड थीम, मानक WordPress एसेट लोडर, और WooCommerce प्रोडक्ट हुक्स का उपयोग होता है। यह एक इंस्टॉलेबल ideal.house WordPress प्लगइन नहीं है।

एडमिनिस्ट्रेटर और फ़ाइल एक्सेस, Shop ID, Publishable Key, और हर विज़ुअलाइज़ेबल SKU के लिए आयातित ideal.house रिकॉर्ड तैयार करें। हर सरल प्रोडक्ट और हर समर्थित वेरिएशन को WooCommerce में एक गैर-खाली, अद्वितीय SKU दें।

न्यूनतम SDK मार्कअप#

यह सार्वजनिक 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 से मेल खाना चाहिए। जब तक आप जानबूझकर उन आईडी को कैटलॉग SKU के रूप में उपयोग न करें, तब तक data-product-code में WooCommerce डेटाबेस आईडी न डालें।

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

इस कोड को एक चिल्ड थीम functions.php या साइट-विशिष्ट प्लगइन में जोड़ें। प्लेसहोल्डर बदलें।

php
add_action('wp_enqueue_scripts', function () {
    if (!is_product() && !is_shop() && !is_product_category()) {
        return;
    }

    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 पर WooCommerce संस्करणों का समर्थन करते हैं, तो अंतिम एंक्वी आर्गुमेंट के रूप में true पास करें और फ़िल्टर में async जोड़ें।

प्रोडक्ट-पेज होस्ट रेंडर करें#

निम्नलिखित हुक होस्ट को ऐड-टू-कार्ट फ़ॉर्म के बाद रखता है। सरल उत्पाद तुरंत अपना SKU प्राप्त करते हैं। वेरिएबल उत्पाद खाली शुरू होते हैं; ब्राउज़र एडैप्टर उन्हें तब भरता है जब एक पूर्ण वेरिएशन चयनित किया जाता है।

php
add_action('woocommerce_after_add_to_cart_form', function () {
    global $product;
    if (!$product instanceof WC_Product) return;

    $sku = $product->is_type('variable') ? '' : $product->get_sku();
    printf(
        '<div class="idealhouse-host" data-initial-sku="%1$s">%2$s</div>',
        esc_attr($sku),
        $sku ? '<div data-idealhouse-button-container data-product-code="' . esc_attr($sku) . '"></div>' : ''
    );
});

पुष्टि करें कि हुक आपके प्रोडक्ट टेम्पलेट में मौजूद है। एक थीम जो WooCommerce टेम्पलेट या प्रोडक्ट कलेक्शन ब्लॉक को बदलती है, उसे ब्लॉक एकीकरण या किसी अन्य दस्तावेज़ीकृत WooCommerce हुक की आवश्यकता हो सकती है।

एक चयनित वेरिएशन को सिंक करें#

WooCommerce का बंडल्ड वेरिएशन फ़ॉर्म jQuery वेरिएशन लाइफ़साइकिल इवेंट्स को ट्रिगर करता है। एक लोकल फ़ाइल जोड़ें, उदाहरण के लिए assets/js/idealhouse-woocommerce.js, इसे jquery और wc-add-to-cart-variation निर्भरताओं के साथ एंक्वी करें, और उपयोग करें:

js
(function ($) {
  function render(host, sku) {
    host.replaceChildren();
    const code = typeof sku === 'string' ? sku.trim() : '';
    if (!code) return;

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

  $('.variations_form').each(function () {
    const form = $(this);
    const host = this.closest('.product')?.querySelector('.idealhouse-host');
    if (!host) return;

    form.on('found_variation', function (_event, variation) {
      render(host, variation && variation.sku);
    });
    form.on('reset_data hide_variation', function () {
      render(host, '');
    });
  });

  document.querySelectorAll('.idealhouse-host[data-initial-sku]').forEach(function (host) {
    render(host, host.dataset.initialSku);
  });
})(jQuery);

यह फ़ाइल एक ग्राहक-मालिकाना WooCommerce एडैप्टर है। यदि कोई वेरिएशन प्लगइन मानक फ़ॉर्म स्क्रिप्ट को बदलता है, तो इन इवेंट्स के फिर से ट्रिगर होने की धारणा के बजाय उस प्लगइन के दस्तावेज़ीकृत चयन कॉलबैक का उपयोग करें। SDK द्वारा पहले से प्रोसेस किए गए कंटेनर के केवल एट्रिब्यूट को अपडेट न करें; इसे एक साफ़ कंटेनर से बदलें।

प्रोडक्ट ग्रिड, क्विक व्यू, और AJAX नेविगेशन#

कैटलॉग कार्ड्स के लिए, woocommerce_after_shop_loop_item जैसे प्रोडक्ट-लूप हुक का उपयोग करें और सरल प्रोडक्ट SKU रेंडर करें। ग्रिड पर वेरिएबल प्रोडक्ट के पास आमतौर पर कोई रिज़ॉल्व्ड वेरिएशन नहीं होता है; प्रोडक्ट पेज से लिंक करें या एक स्पष्ट वेरिएशन पिकर एडैप्टर बनाएं।

क्विक-व्यू प्लगइन और WooCommerce ब्लॉक प्रारंभिक पेज लोड के बाद उत्पाद इंजेक्ट कर सकते हैं। होस्ट को उस टेम्पलेट में रखें जिसे वे रेंडर करते हैं और उस टूल के दस्तावेज़ीकृत कंप्लीशन कॉलबैक से अपना render() ब्रिज चलाएँ। यदि कोई स्थिर कॉलबैक नहीं है, तो एक स्कोप्ड MutationObserver नए .idealhouse-host नोड्स का पता लगा सकता है, लेकिन ग्राहक इसकी प्रदर्शन क्षमता और लाइफ़साइल के लिए ज़िम्मेदार होता है।

कैटलॉग मैपिंग और आयात#

WC_Product::get_sku() और हर WC_Product_Variation::get_sku() को ideal.house sku से मैप करें। यदि वे अलग विज़ुअल एसेट्स का प्रतिनिधित्व करते हैं, तो पैरेंट और चिल्ड प्रोडक्ट को एक कोड साझा नहीं करना चाहिए।

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

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

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

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

PHP हुक्स/फ़िल्टर और लोकल वेरिएशन एडैप्टर एंक्वी हटाएं। ओवरराइड किए गए टेम्पलेट्स या ब्लॉक्स से होस्ट हटाएं, WooCommerce ट्रांज़िएंट्स और पेज/CDN कैश को साफ़ करें, फिर पुष्टि करें कि कोई SDK रिक्वेस्ट या data-idealhouse-* एलिमेंट शेष नहीं है।

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