Integratie met Shoplazza#
Voeg Room Visualizer toe aan Shoplazza via een thema-appuitbreiding of eigen Liquid-thema en geef de geselecteerde variant-SKU weer als de ideal.house-productcode.
Verificatiestatus: De thema-, uitbreidings-, product- en variantdocumentatie van Shoplazza is bekeken op 7 september 2026. Er was geen partnerapp of testwinkel beschikbaar, dus installatie en variantwisselingen moeten in een ontwikkelwinkel worden gevalideerd.
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#
Zorg voor een ontwikkel- of handelaarswinkel op Shoplazza, toegang tot de broncode van het thema of de appuitbreiding, Shop ID, Publishable Key en geïmporteerde records voor ondersteunde variant-SKUs. Dupliceer het thema van de handelaar vóór aanpassing.
Een thema-appuitbreiding is de onderhoudbare, herbruikbare aanpak. Een appblok voegt zichtbare interface-elementen toe en moet door de handelaar aan een compatibele productsectie worden toegevoegd; een app-insluiting kan globaal gedrag laden.
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>
Shoplazza documenteert variant.sku; gebruik die exacte tekenreeks als ideal.house sku.
Een appblok toevoegen#
Maak een appblok van een thema-uitbreiding voor de productsectie. Shoplazza-Liquid-blokken in een productcontext hebben toegang tot product. Begin met een lege container en gebruik vervolgens de toestand van het productformulier in het actieve thema om de geselecteerde variant aan te leveren:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Voor een product met één variant kan de JavaScript van het blok de enige gedocumenteerde vermelding in product.variants lezen uit gegevens die het thema veilig heeft geserialiseerd. Houd bij meerdere varianten de container leeg totdat het bestaande productformulier van het thema een selectie heeft bepaald. Zo vermijd je afhankelijkheid van een ongedocumenteerde Liquid-eigenschap voor de geselecteerde variant.
De SDK laden#
Laad in idealhouse.js de SDK eenmaal. Lever voor een herbruikbare app Shop ID en Publishable Key via opgeschoonde openbare blok-/insluitingsconfiguratie aan in plaats van één handelaar vast in de code op te nemen:
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);
}
Maak nooit het appgeheim of de ideal.house Client Secret zichtbaar.
De geselecteerde variant gesynchroniseerd houden#
Verbind de gedocumenteerde productformuliercallback van het thema met deze adapter:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Het variantobject van Shoplazza documenteert sku, maar thema's kunnen selectie verschillend implementeren. Het aansluiten van de callback is adapterwerk van de klant. Maak de container na een nieuwe selectie opnieuw aan; wijzig niet alleen markering die de SDK al heeft gevuld.
Voeg voor collectiekaarten, snelweergaven, zoekfilters en op de client weergegeven secties een container per item toe en voer de koppeling uit na de gedocumenteerde weergavecallback van het thema. Als op een kaart geen definitieve variant bekend is, laat dan de knop weg of verwijs naar de productpagina.
Producten importeren#
Exporteer elke ondersteunde variant.sku en importeer deze als ideal.house sku via Producten uploaden. Zie producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.
Admin-API-exports, webhooks, geplande synchronisatie, OAuth en distributie van uitbreidingen implementeert de klant zelf.
Controleren en verwijderen#
Test plaatsing van appblokken, inschakeling van insluitingen, een product met één variant, alle keuzes bij meerdere varianten, lege/dubbele/onbekende SKUs, collectiekaarten, snelweergaven, filters, browsergeschiedenis, mobiel, taal/valuta, toestemming en voorbeeld- en liveweergaven van het thema. Controleer één SDK-verzoek en een exacte koppeling van de variant-SKU.
Schakel de thema-appuitbreiding uit en verwijder deze, of verwijder de eigen Liquid/JavaScript. Publiceer het schone thema, wis webshopcaches en controleer dat de SDK en alle data-idealhouse-*-knooppunten verdwenen zijn.