Integratie met OpenCart#
Voeg Room Visualizer toe via een uitbreiding of eigen thema voor OpenCart 4 en koppel een stabiele webshopproductcode aan de ideal.house-catalogus.
Verificatiestatus: De uitbreidingsdocumentatie voor OpenCart 4 is bekeken op 7 september 2026. Er was geen testwinkel beschikbaar. OpenCart 3 en externe thema's gebruiken andere paden en gebeurtenisconventies; pas deze handleiding aan de geïnstalleerde hoofdversie aan.
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 keuze van productcode#
Zorg voor een testwinkel, ontwikkeltoegang tot uitbreiding of thema, Shop ID, Publishable Key en geïmporteerde testrecords. De kern van OpenCart stelt doorgaans model beschikbaar in productsjablonen, terwijl SKU afhankelijk van versie en thema aanpassingen aan controller of uitbreiding kan vereisen. Kies één waarde en gebruik deze consequent als ideal.house sku.
Bewerk de kernbestanden van de catalogus niet rechtstreeks. Verpak wijzigingen als een OpenCart 4-uitbreiding of bewaar ze in een eigen thema onder versiebeheer.
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 moet teken voor teken gelijk zijn aan de geïmporteerde ideal.house sku.
De productcontainer weergeven#
Breid het actieve productsjabloon uit via je uitbreiding. Als je bewust het veld model van OpenCart koppelt aan ideal.house sku, plaats dan dit bij de productacties:
{% if model %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ model }}">
</div>
</div>
{% endif %}
Automatisch escapen in Twig hangt af van de omgevingsconfiguratie; zorg dat de gekozen waarde wordt ge-escapet voor een HTML-attribuut. Als je het echte SKU-veld kiest, voeg die opgeschoonde waarde dan in je uitbreiding toe aan de sjabloongegevens van de controller en geef deze weer in plaats van model.
De SDK eenmaal laden#
Voeg een webshop-JavaScript-bestand toe via het uitbreidings- of themamechanisme. Dit moet één script met de vereiste attributen aanmaken:
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
const 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.append(script);
}
Bewaar de twee openbare waarden in de uitbreidingsconfiguratie en geef ze veilig weer. Plaats nooit een ideal.house Client Secret in JavaScript, Twig, uitbreidingslogboeken of gecachete HTML.
Opties, varianten en dynamische weergave#
Opties in OpenCart komen niet altijd één op één overeen met varianten met een SKU. Als je winkel een optie-/variantuitbreiding gebruikt, integreer dan met het gedocumenteerde gegevensmodel en de callback die de definitieve variant aanlevert. Vervang de container alleen wanneer de exacte geselecteerde code beschikbaar is:
function renderIdealhouseCode(host, productCode) {
host.replaceChildren();
const code = String(productCode || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Dit is adaptercode van de klant; deze handleiding bevat geen universele OpenCart-variantgebeurtenis. Geef voor AJAX-zoeken, categoriefilters, pop-ups en snelweergaven schone containers weer in de uitbreidingssjablonen of roep de koppeling aan vanuit de gedocumenteerde voltooiingscallback. Kopieer nooit onderliggende elementen die de SDK heeft aangemaakt.
Producten importeren#
Exporteer voor elk visualiseerbaar item de gekozen model/SKU uit OpenCart en koppel deze aan ideal.house sku. Gebruik Producten uploaden en volg daarna producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.
Aanroepen van de Admin-API van OpenCart, geplande exports, gebeurtenislisteners en webhooks zijn integratiewerk dat de klant beheert.
Controleren en verwijderen#
Test eenvoudige producten, elke ondersteunde optiecombinatie, ontbrekende en dubbele codes, onbekende ideal.house-SKUs, categorie- en zoekpagina's, snelweergaven, de terug- en vooruitknoppen van de browser, mobiele lay-out, meerdere winkels, talen/valuta, toestemming en productiecaching en -verkleining. Controleer precies één SDK-verzoek en een exacte codeovereenkomst.
Schakel de uitbreiding uit of verwijder deze, of verwijder de overschrijving en het bestand uit het eigen thema. Vernieuw OpenCart-wijzigingen en -gebeurtenissen, wis thema-/CDN-caches en controleer dat het SDK-verzoek en de containers verdwenen zijn.