Integratie met Adobe Commerce / Magento Open Source#
Installeer Room Visualizer via een Magento-module of een eigen thema en koppel de weergegeven SKU van het eenvoudige product aan de ideal.house-catalogus.
Verificatiestatus: De frontenddocumentatie van Adobe Commerce is bekeken op 7 september 2026. Er was geen handelaarsinstallatie beschikbaar. Luma/Blank-thema's, Hyvä en PWA Studio gebruiken verschillende JavaScript-technologieën; het concrete voorbeeld hieronder is bedoeld voor de standaardwebshop van RequireJS.
Voordat je de SDK laadt: Open Dashboard → Instellingen, voeg de oorsprong van je webshop toe aan Allowed Origins (CORS) en klik op Opslaan. Neem de gepubliceerde hostnaam en alle gebruikte oorsprongen van voorbeeld- of testomgevingen op; scheid meerdere oorsprongen met komma's. Zie de configuratiestappen.
Vereisten en toepassingsgebied#
Zorg voor een ontwikkelinstallatie, een eigen module of afgeleid thema, implementatietoegang, Shop ID, Publishable Key en geïmporteerde test-SKUs. Wijzig nooit bestanden onder vendor/ of in een basisthema. Hyvä en PWA Studio vereisen een eigen Alpine/React-adapter en mogen RequireJS-code niet blind overnemen.
Minimaal SDK-contract#
<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>
De productcode is de exacte geïmporteerde sku en niet de numerieke entiteits-ID van Magento.
Een blok op de productpagina toevoegen#
Maak een kleine module of themalay-outaanpassing voor catalog_product_view. Laat een blok verwijzen naar een .phtml-sjabloon bij de productacties. Het sjabloon kan de eerste SKU van het product veilig weergeven:
<?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>
Bij een configureerbaar product is de eerste SKU op de pagina meestal de bovenliggende SKU. Als de ideal.house-bestanden bij onderliggende eenvoudige producten horen, laat je de container aanvankelijk leeg en vul je deze pas nadat het geselecteerde eenvoudige product is bepaald.
De SDK eenmaal laden#
Voeg een lokale RequireJS-initialisatiefunctie toe aan je module of thema. Deze maakt het externe script aan en stelt alle vereiste gegevensattributen in voordat het script wordt toegevoegd:
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);
};
});
Initialiseer deze declaratief vanuit het sjabloon, volgens het door Adobe aanbevolen mechanisme text/x-magento-init:
<script type="text/x-magento-init">
{
"*": {
"Vendor_Module/js/idealhouse-loader": {}
}
}
</script>
Dit levert hetzelfde SDK-element op als het minimale contract, zonder toegangsgegevens in een RequireJS-URL te plaatsen. Gebruik uitsluitend de Publishable Key in webshopcode.
De geselecteerde configureerbare SKU#
De standaardwidget voor configureerbare producten stelt de selectietoestand beschikbaar via het eigen component van Magento, maar themaoverschrijvingen kunnen de structuur wijzigen. Implementeer een RequireJS-mixin of listener in je module op het punt waar het thema de ID van een eenvoudig product bepaalt, koppel die ID aan de SKU uit door de server aangeleverde JSON en vervang de container:
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);
}
Die mixin en de gegevens voor de koppeling van ID naar SKU zijn adapterwerk van de klant. Leid de onderliggende SKU niet af van optielabels en documenteer geen gebeurtenis of methode van ideal.house die niet tot het openbare SDK-contract behoort.
Dynamische inhoud en caches#
Maak de container opnieuw aan nadat kleurstaalwijzigingen, via AJAX geladen aanbevelingen, snelweergaven of klantspecifieke inhoud de omvattende container vervangen. De gebeurtenis contentUpdated van Magento initialiseert Magento-componenten in ingevoegde inhoud, maar levert op zichzelf geen geselecteerde SKU. Je adapter moet dus nog steeds de juiste code bepalen en weergeven.
Voer na codewijzigingen de implementatiestappen uit die bij de omgeving horen, wis de lay-out-, volledigepagina- en blokcaches en publiceer statische bestanden opnieuw. Test met productiebundeling, verkleining en Varnish/CDN ingeschakeld.
Productgegevens importeren#
Koppel SKUs van eenvoudige en onderliggende producten aan ideal.house sku. Gebruik Producten uploaden, waaronder importeren, taakstatus, lijst opvragen, bijwerken, verwijderen en opnieuw proberen. Magento-exports, Admin-API-aanroepen, geplande taken en webhooks zijn adapters die de klant implementeert.
Controleren en verwijderen#
Test eenvoudige en configureerbare producten, ontbrekende SKU, uitgeschakelde onderliggende producten en onbekende SKU. Controleer één SDK-verzoek, exacte SKU-koppeling na elke kleurstaal- of optiewijziging, correct gedrag in snelweergaven en aanbevelingen, mobiele lay-out, cachetreffers, klantgroeppagina's en toestemmingsinstellingen. Controleer dat er geen geheime toegangsgegevens in broncode of statische bestanden staan.
Schakel voor verwijdering de eigen module uit of verwijder deze, of verwijder de lay-out-, sjabloon- en RequireJS-bestanden van het afgeleide thema. Publiceer statische bestanden opnieuw, wis caches en controleer dat de SDK-URL en containers verdwenen zijn.