Adobe Commerce / Magento Open Source integration#

Install Room Visualizer through a Magento module or custom theme and map the displayed simple-product SKU to the ideal.house catalog.

Verification status: Adobe Commerce frontend documentation reviewed on September 7, 2026. No merchant installation was available. Luma/Blank themes, Hyvä, and PWA Studio use different JavaScript stacks; the concrete example below targets the standard RequireJS storefront.

Before loading the SDK: Open Dashboard → Settings, add your storefront origin to Allowed Origins (CORS), and click Save. Include the published hostname and any preview or staging origins you use; separate multiple origins with commas. See configuration steps.

Prerequisites and scope#

Prepare a development instance, a custom module or child theme, deployment access, Shop ID, Publishable Key, and imported test SKUs. Never modify files under vendor/ or a base theme. Hyvä and PWA Studio require their own Alpine/React adapter and must not copy RequireJS code blindly.

Minimal SDK contract#

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>

The Product Code is the exact imported sku, not Magento's numeric entity ID.

Add a product-page block#

Create a small module or theme layout update for catalog_product_view. Point a block at a .phtml template positioned near the product actions. The template can render the initial product SKU safely:

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>

For a configurable product, the page's initial SKU is usually the parent SKU. If ideal.house assets belong to child simple products, leave the host empty initially and fill it only after the selected simple product is resolved.

Load the SDK once#

Add a local RequireJS initializer in your module or theme. The initializer creates the external script and applies all required data attributes before appending it:

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);
  };
});

Initialize it declaratively from the template, following Adobe's recommended text/x-magento-init mechanism:

html

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

This produces the same SDK element as the minimal contract without placing credentials in a RequireJS URL. Use only the Publishable Key in storefront code.

Selected configurable SKU#

The standard configurable product widget exposes selection state through Magento's own component, but theme overrides change its shape. Implement a RequireJS mixin or a listener inside your module at the point where the theme resolves a simple-product ID, map that ID to its SKU from server-provided JSON, and replace the host:

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);
}

That mixin and ID-to-SKU data are customer adapter work. Do not infer the child SKU from option labels, and do not document an ideal.house event or method that is not part of the public SDK contract.

Dynamic content and caches#

Recreate the container after swatch changes, AJAX-loaded recommendations, quick view, or customer-specific content replaces its host. Magento's contentUpdated event initializes Magento components in injected content; it does not by itself supply a selected SKU, so your adapter still must resolve and render the right code.

After code changes, run the deployment steps appropriate to the environment, clear layout/full-page/block caches, and redeploy static content. Test with production bundling/minification and Varnish/CDN enabled.

Import product data#

Map simple and child-product SKUs to ideal.house sku. Use Product upload, including import, job status, listing, updates, deletion, and retry guidance. Magento exports, Admin API calls, cron jobs, and webhooks are customer adapters.

Verify and remove#

Test simple, configurable, missing-SKU, disabled-child, and unknown-SKU cases. Confirm a single SDK request, exact SKU mapping after every swatch/option change, clean behavior in quick view and recommendations, mobile layout, cache hits, customer-group pages, and consent controls. Verify no secret credential appears in source or static assets.

To remove, disable/uninstall the custom module or remove the child-theme layout/template/RequireJS files, redeploy static content, clear caches, and verify the SDK URL and containers are absent.