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

Adobe Commerce / Magento Open Source एकीकरण#

Room Visualizer को एक Magento मॉड्यूल या कस्टम थीम के माध्यम से इंस्टॉल करें और प्रदर्शित सरल-उत्पाद SKU को ideal.house कैटलॉग में मैप करें।

** सत्यापन स्थिति:** Adobe Commerce फ्रंटएंड दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षित किया गया था। कोई मर्चेंट इंस्टॉलेशन उपलब्ध नहीं था। Luma/Blank थीम, Hyvä, और PWA Studio अलग-अलग JavaScript स्टैक्स का उपयोग करते हैं; नीचे दिया गया विशिष्ट उदाहरण मानक RequireJS स्टोरफ्रंट को लक्ष्य बनाता है।

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

पूर्वशर्तें और दायरा#

एक डेवलपमेंट इंस्टेंस, एक कस्टम मॉड्यूल या चाइल्ड थीम, डिप्लॉयमेंट एक्सेस, Shop ID, Publishable Key, और इम्पोर्ट किए गए टेस्ट SKU तैयार करें। कभी भी vendor/ के तहत फ़ाइलें या एक बेस थीम को संशोधित न करें। Hyvä और PWA Studio को अपना अपना Alpine/React एडैप्टर चाहिए और उन्हें RequireJS कोड को अंधाधुंध कॉपी नहीं करना चाहिए।

न्यूनतम 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 है, Magento का संख्यात्मक एंटिटी आईडी नहीं।

एक उत्पाद-पेज ब्लॉक जोड़ें#

catalog_product_view के लिए एक छोटा मॉड्यूल या थीम लेआउट अपडेट बनाएं। एक ब्लॉक को उत्पाद एक्शन के पास स्थित .phtml टेम्पलेट की ओर इशारा करें। टेम्पलेट प्रारंभिक उत्पाद SKU को सुरक्षित रूप से रेंडर कर सकता है:

php
<?php
/** @var \Magento\Catalog\Block\Product\View $block */
$product = $block->getProduct();
$sku = $product ? trim((string) $product->getSku()) : '';
?>

<div class="idealhouse-host">
  <?php if ($sku !== ''): ?>
    <div
      data-idealhouse-button-container
      data-product-code="<?= $block->escapeHtmlAttr($sku) ?>"
    ></div>
  <?php endif; ?>
</div>

एक कॉन्फ़िगरेशन योग्य उत्पाद के लिए, पेज का प्रारंभिक SKU आमतौर पर पेरेंट SKU होता है। यदि ideal.house एसेट चाइल्ड सरल उत्पादों से संबंधित हैं, तो प्रारंभ में होस्ट को खाली छोड़ दें और केवल तब भरें जब चयनित सरल उत्पाद रिज़ॉल्व हो जाए।

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

अपने मॉड्यूल या थीम में एक लोकल RequireJS इनिशियलाइज़र जोड़ें। इनिशियलाइज़र बाहरी स्क्रिप्ट को बनाता है और इसे जोड़ने से पहले सभी आवश्यक डेटा एट्रिब्यूट्स लागू करता है:

js
define([], function () {
  'use strict';

  return function () {
    if (document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) return;

    var 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.appendChild(script);
  };
});

टेम्पलेट से इसे घोषणात्मक रूप से इनिशियलाइज़ करें, Adobe द्वारा अनुशंसित text/x-magento-init मीकनिज़म का पालन करते हुए:

html
<script type="text/x-magento-init">
{
  "*": {
    "Vendor_Module/js/idealhouse-loader": {}
  }
}
</script>

यह न्यूनतम अनुबंध के समान SDK एलिमेंट उत्पन्न करता है, बिना क्रेडेंशियल्स को एक RequireJS URL में रखे। स्टोरफ्रंट कोड में केवल Publishable Key का उपयोग करें।

चयनित कॉन्फ़िगरेशन योग्य SKU#

मानक कॉन्फ़िगरेशन योग्य प्रोडक्ट विजेट चयन स्थिति को Magento के अपने कंपोनेंट के माध्यम से प्रकट करता है, लेकिन थीम ओवरराइड इसका आकार बदल देते हैं। उस बिंदु पर अपने मॉड्यूल के भीतर एक RequireJS मिक्सिन या श्रोता लागू करें जहाँ थीम एक सरल-प्रोडक्ट आईडी का समाधान करती है, उस आईडी को सर्वर-प्रदान किए गए JSON से उसके SKU के रूप में मैप करें, और होस्ट को बदलें:

js
function renderIdealhouseSku(host, sku) {
  host.replaceChildren();
  if (!sku || !sku.trim()) return;

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

वह मिक्सिन और आईडी-से-SKU डेटा ग्राहक एडैप्टर कार्य है। विकल्प लेबलों से बच्चे SKU का अनुमान न लगाएं, और किसी ideal.house इवेंट या विधि का दस्तावेजीकरण न करें जो सार्वजनिक SDK अनुबंध का हिस्सा नहीं है।

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

स्वाच परिवर्तनों, AJAX-लोडेड सिफ़ारिशों, क्विक व्यू, या कस्टमर-विशिष्ट कंटेंट के उसके होस्ट को बदलने के बाद कंटेनर को पुनः बनाएं। Magento का contentUpdated इवेंट इंजेक्टेड कंटेंट में Magento कंपोनेंट्स को इनिशियलाइज़ करता है; यह स्वयं एक चयनित SKU प्रदान नहीं करता है, इसलिए आपका एडैप्टर अभी भी सही कोड को रिज़ॉल्व और रेंडर करना चाहिए।

कोड परिवर्तनों के बाद, पर्यावरण के लिए उपयुक्त डिप्लॉयमेंट चरण चलाएं, लेआउट/फुल-पेज/ब्लॉक कैश को साफ़ करें, और स्टैटिक कंटेंट को पुनः डिप्लॉय करें। प्रोडक्शन बंडलिंग/मिनिफ़िकेशन और Varnish/CDN सक्षम होने के साथ परीक्षण करें।

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

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

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

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

हटाने के लिए, कस्टम मॉड्यूल को निष्क्रिय/अनइंस्टॉल करें या चाइल्ड-थीम लेआउट/टेम्पलेट/RequireJS फ़ाइलें हटाएं, स्टैटिक कंटेंट को पुनः डिप्लॉय करें, कैश को साफ़ करें, और पुष्टि करें कि SDK URL और कंटेनर अनुपस्थित हैं।

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