Ideal House
Naar inhoud gaan

Integratie met Ecwid#

Gebruik een eigen webshopapp voor Ecwid en de gedocumenteerde Storefront JS-API-levenscyclus om Room Visualizer-bediening aan Ecwid-productpagina's toe te voegen.

Verificatiestatus: De Storefront JS-API-documentatie van Ecwid is bekeken op 7 september 2026. Er was geen Ecwid-app of testwinkel beschikbaar. Controleer vóór implementatie de exacte velden van de paginagegevens aan de hand van de actuele OnPageLoaded-referentie.

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 ondersteunde aanpak#

Ecwid vereist voor duurzame webshopaanpassingen een eigen app met een zelf gehost JavaScript-bestand. Zorg voor een ontwikkelwinkel en app voor Ecwid, een via HTTPS gehost adapterbestand, Shop ID, Publishable Key en geïmporteerde product-/variant-SKUs.

Als Ecwid in een ander CMS is ingesloten, blijft de eigen webshopapp de betrouwbare plaats voor code omdat deze samen met de Ecwid-webshop wordt uitgevoerd. Een script op de bovenliggende pagina deelt niet in elke insluitingsmodus dezelfde levenscyclus of hetzelfde document.

Minimaal SDK-contract#

html
<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>

Gebruik de exacte Ecwid SKU die je als ideal.house sku hebt geïmporteerd.

Je Ecwid-webshopapp initialiseren#

Volg de snelstart voor eigen webshops van Ecwid om het zelf gehoste bestand te registreren. Start het met de gedocumenteerde callback die aangeeft dat API gereed is en laad vervolgens de ideal.house SDK eenmaal:

js
Ecwid.OnAPILoaded.add(function () {
  if (document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) return;

  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);
});

Haal voor een app voor meerdere winkels de twee openbare ideal.house-waarden uit de veilige openbare configuratie van je app. Plaats nooit een Ecwid-appgeheim, toegangstoken of ideal.house Client Secret in dit bestand.

Weergeven op productpagina's#

Ecwid documenteert Ecwid.OnPageLoaded.add() en levert paginagegevens aan de callback. Gebruik de actuele API-referentie om het productpaginatype en de identificatie te bevestigen, haal of lees de productgegevens via de ondersteunde clientinterface van Ecwid en geef vervolgens de bepaalde SKU door aan:

js
function mountIdealhouse(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);
}

Voeg host in op een stabiele plek bij de productdetails nadat Ecwid de pagina heeft weergegeven. Verwijder de vorige container wanneer het paginatype verandert. De DOM-selector en het bepalen van het product uit paginagegevens zijn adaptercode van de klant, omdat webshoplay-outs en gegevensversies van Ecwid kunnen veranderen.

Opties en navigatie#

Wacht wanneer een klant productopties kiest totdat Ecwid de koopbare variant en de bijbehorende SKU heeft bepaald. Roep mountIdealhouse() aan met die SKU of maak de container leeg als de selectie onvolledig is. Stel geen code samen door optielabels aan elkaar te plakken.

Ecwid is een webshop met één pagina. Gebruik de gedocumenteerde paginalevenscyclus, met OnPageLoaded en callbacks voor paginawisselingen, in plaats van alleen naar DOMContentLoaded van de browser te luisteren. Categorie-/zoeknavigatie, de terug- en vooruitknoppen van de browser, ingesloten widgets en productpop-ups moeten verouderde productcontainers verwijderen en na weergave een nieuwe container plaatsen.

Producten importeren#

Exporteer de SKU-velden van producten en varianten uit Ecwid en koppel ze aan ideal.house sku. Gebruik Producten uploaden, waaronder producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.

Elke Ecwid REST API-export, webhook, OAuth-installatie of periodieke synchronisatie wordt door de klant beheerd en moet op de server worden geïmplementeerd met de juiste Ecwid-autorisatie.

Controleren en verwijderen#

Test appinstallatie, API-initialisatie, overgangen tussen product-, categorie- en zoekpagina's, elke variant, ontbrekende en onbekende SKUs, de terug- en vooruitknoppen van de browser, een Ecwid-widget op een andere site, mobiele lay-out, toestemming en aangemelde en afgemelde klanten. Controleer één SDK-verzoek in het document met de container en exacte gelijkheid van de SKU.

Koppel voor verwijdering het zelf gehoste JavaScript-bestand los van de eigen app of verwijder de app, verwijder ingevoegde containers en listeners en controleer dat de SDK-URL en alle data-idealhouse-*-knooppunten verdwijnen na webshopnavigatie en een volledige herlading.

Officiële platformreferenties#