Integratie met BigCommerce#
Voeg Room Visualizer toe aan een Stencil-webshop van BigCommerce door de SDK eenmaal te laden en de huidige product- of variant-SKU weer te geven in een container voor een gegenereerde knop.
Verificatiestatus: De ontwikkelaarsdocumentatie van BigCommerce is bekeken op 7 september 2026. Er was geen testwinkel beschikbaar. Stencil en Catalyst gebruiken verschillende modellen voor weergave en navigatie; deze handleiding geeft concrete stappen voor Stencil en verwijst Catalyst-webshops naar een frameworkadapter.
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.
Een aanpak voor je webshop kiezen#
- Stencil: installeer de loader via Script Manager of de Scripts-API en voeg de container daarna toe aan een eigen themasjabloon.
- Catalyst: voeg het script en het component toe aan de Catalyst-toepassing met React/Next.js; volg React / Next.js.
- Ouder Blueprint: migreer naar een ondersteunde webshop of laat een BigCommerce-ontwikkelaar een veilig invoegpunt bepalen. De huidige documentatie van de Scripts-API behandelt Blueprint afzonderlijk.
Je hebt toegang nodig om thema's te bewerken, een testthema of testkanaal, de Shop ID en Publishable Key van ideal.house en minstens één BigCommerce-SKU die in ideal.house is geïmporteerd.
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 van de container moet exact overeenkomen met de geïmporteerde catalogus-sku. Deze handleiding gaat niet uit van een ideal.house-app voor BigCommerce.
Installeren op Stencil#
Maak onder Webshop → Script Manager een voettekstscript voor de betreffende webshop, het kanaal en de productpagina's. Plak alleen de SDK-scripttag uit het voorbeeld, met je browserveilige toegangsgegevens. Script Manager is de beheerinterface van de kanaalbewuste Scripts-API.
Gebruik voor een herbruikbare app in plaats daarvan de Scripts-API van BigCommerce. Die API-bewerking en de OAuth-stroom van de app vallen onder de verantwoordelijkheid van je integratiedienst; maak het toegangstoken niet zichtbaar in webshopcode.
Controleer dat er slechts één SDK-tag aanwezig is. Neem deze niet ook op in templates/layout/base.html.
Het eerste product weergeven#
Voeg in een eigen Stencil-thema de container toe bij het productformulier in het productsjabloonfragment dat je thema gebruikt:
{{#if product.sku}}
<div
data-idealhouse-button-container
data-product-code="{{product.sku}}"
></div>
{{/if}}
Het exacte fragment verschilt per thema. Gebruik Stencil CLI om het aangepaste thema te bekijken en bewaar de wijziging in een thema onder versiebeheer in plaats van gegenereerde webshop-HTML te bewerken.
Geef bij kaarten de container alleen weer als de kaartcontext de exacte geïmporteerde SKU beschikbaar stelt. Een product met opties heeft op een categoriepagina mogelijk nog geen definitieve variant-SKU; verwijs naar de productpagina tenzij de klant een volledige variant heeft geselecteerd.
Productopties synchroniseren#
De JavaScript van een Stencil-thema ontvangt productoptiewijzigingen via themaspecifieke productdetailcode. Voeg een klantadapter toe op het punt waar het huidige thema het definitieve variantantwoord heeft bepaald:
export function replaceIdealhouseContainer(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);
}
Geef de bepaalde variant-SKU door vanuit de callback van je thema. BigCommerce-thema's kunnen de standaardimplementatie van productdetails aanpassen of vervangen; deze handleiding verzint daarom geen globale gebeurtenis voor optiewijzigingen. Verwijder de oude container voordat je de nieuwe invoegt.
Snelweergaven en dynamische pagina's#
Snelweergaven, gefacetteerd zoeken, paginering en clientnavigatie kunnen product-DOM vervangen. Voeg een schone container toe aan elk weergegeven sjabloon en roep dezelfde koppeling aan na de gedocumenteerde weergavecallback van het thema. Kloon geen container die al door de SDK is gevuld.
Catalyst gebruikt clientweergave met React en heeft geen Stencil Handlebars-context. Laad de SDK eenmaal in de toepassingsstructuur en geef het visualisatiecomponent de geselecteerde variant-SKU als sleutel, zoals in de React/Next.js-handleiding.
Productgegevens importeren en koppelen#
Koppel sku-waarden uit BigCommerce aan ideal.house sku; gebruik voor varianten de SKU van elke variant in plaats van de bovenliggende product-ID. De browser-SDK synchroniseert geen catalogusgegevens van BigCommerce.
Gebruik Producten uploaden voor het goedgekeurde importcontract en raadpleeg daarna producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen. Elke BigCommerce-API-export, webhook of geplande synchronisatie is een adapter die de klant beheert.
Controleren en verwijderen#
Test vóór publicatie een eenvoudig product, elke optiecombinatie, een product zonder SKU en een SKU die in ideal.house ontbreekt. Controleer productpagina's, categoriekaarten, snelweergaven, gefacetteerde navigatie, de terug- en vooruitknoppen van de browser, mobiele lay-out, toestemmingsgedrag en elk actief webshopkanaal. Controleer in de ontwikkelaarstools één succesvol SDK-verzoek en een exacte overeenkomst tussen productcode en SKU.
Verwijder voor het weghalen van de integratie de Script Manager-vermelding of het Scripts-API-record, alle containermarkering in het thema en de adaptercode. Publiceer het schone thema en wis vervolgens webshop-/CDN-caches. Controleer dat het SDK-verzoek op elk kanaal verdwenen is.