Integratie met SHOPLINE#
Integreer Room Visualizer in een SHOPLINE-webshop via een thema-appuitbreiding of een beheerd blok in een eigen thema.
Verificatiestatus: De themadocumentatie voor SHOPLINE Online Store 2.x/3.0 is bekeken op 7 september 2026. Er was geen partnerapp of testwinkel beschikbaar. Sjabloonsyntaxis en ondersteunde uitbreidingstypen verschillen per generatie van Online Store; valideer daarom tegen de exacte winkelversie.
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 integratiemogelijkheid kiezen#
- Voor een herbruikbare openbare app op Online Store 2.0/2.1 raadt SHOPLINE een thema-appuitbreiding met een appblok en optioneel een ingesloten appblok aan.
- Online Store 3.0-thema's bieden herbruikbare blokken met optionele JavaScript-bestanden en appblokken.
- Script Tag/Asset-API's zijn verouderd of afhankelijk van versie en apptype; kies ze pas nadat je de compatibiliteitstabel van SHOPLINE hebt gecontroleerd.
- Gebruik voor een thema-aanpassing voor één winkel de blok-, sjabloon- en bestandsstructuur van de actieve versie.
Zorg voor een ontwikkelwinkel, toegang tot de uitbreiding of het thema, Shop ID, Publishable Key en geïmporteerde variantcodes.
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 overeenkomen met de sku uit de ideal.house-catalogus. Deze documentatie beweert niet dat er een installeerbare ideal.house-app voor SHOPLINE bestaat.
Het themablok bouwen#
Maak een appblok of openbaar themablok dat een container op productdetailpagina's weergeeft. Gebruik het exacte product-/variantobject en de escapehelpers die voor jouw generatie van Online Store zijn beschreven. De uiteindelijke webshop-HTML moet zijn:
<div class="idealhouse-host">
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
</div>
Vervang in het sjabloon CHAIR-OAK-01 door de SKU-/code-expressie van de momenteel geselecteerde variant. Plak geen Shopify-Liquid-expressie in Handlebars-sjablonen van SHOPLINE 3.0; dit zijn verschillende talen en objectcontracten.
Voeg een appblok in de thema-editor toe aan de productsectie. Gebruik een app-insluiting om de SDK globaal te laden zonder zichtbare interface. Appblokken moeten na installatie doorgaans door de handelaar worden ingeschakeld en geplaatst.
De SDK eenmaal laden#
Maak in het JavaScript-bestand van de uitbreiding of het thema het script met de twee openbare instellingen aan voordat je het toevoegt:
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);
}
Gebruik uitbreidingsconfiguratie of dynamische parameters voor toegangsgegevens van meerdere handelaren. Maak alleen de Publishable Key zichtbaar; bewaar appgeheimen op je server.
Geselecteerde varianten en dynamische secties#
Verbind de gedocumenteerde productselectiecallback van het actieve thema met een klantadapter:
function setIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = String(sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
SHOPLINE-thema's zijn aanpasbaar, dus deze handleiding verzint geen universele variantgebeurtenis voor webshops. Online Store 3.0 documenteert sectie-/blokgebeurtenissen in de thema-editor, maar dat zijn levenscyclusgebeurtenissen van de editor en geen variantselecties van klanten.
Maak een nieuwe container wanneer secties, filters, paginering, snelweergaven of het thema-editorvoorbeeld een productknooppunt opnieuw weergeven. Ruim listeners op wanneer een blok in de thema-editor wordt verwijderd. Productkaartknoppen hebben een SKU per item nodig; laat de knop weg als de definitieve variant onbekend is.
Producten importeren#
Exporteer product- en variantgegevens uit SHOPLINE en koppel de geselecteerde webshopcode aan ideal.house sku. Gebruik Producten uploaden en de goedgekeurde handleidingen voor importeren, taakstatus, lijst opvragen, bijwerken, verwijderen en nieuwe pogingen afhandelen.
Synchronisatie via de Admin-API van SHOPLINE, webhooks, app-OAuth en distributie via de appwinkel zijn adapterwerk van de klant.
Controleren en verwijderen#
Test installatie en inschakeling van blokken door de handelaar, een eenvoudig product, elke variant, ontbrekende en onbekende codes, kaarten, snelweergaven, filters, SPA-achtige navigatie, mobiel, toestemming, het thema-editorvoorbeeld en elke ondersteunde Online Store-versie. Controleer één SDK-verzoek en exacte koppeling tussen code en SKU.
Schakel voor verwijdering het appblok of de app-insluiting uit en verwijder de uitbreiding, of verwijder het eigen blok en bestand. Publiceer het schone thema, wis caches en controleer dat er geen SDK-URL of data-idealhouse-*-markering overblijft.