Integratie met Wix#

Integreer de Room Visualizer met Wix Stores via het Wix-uitbreidingspunt dat bij je sitetype hoort. Wix Editor en Wix Studio vereisen verschillende aanpakken.

Verificatiestatus: De uitbreidingsdocumentatie van Wix is bekeken op 7 september 2026. Er was geen Wix-site of apptoegang van een klant beschikbaar, dus dit is niet van begin tot eind gecertificeerd. De SDK moet dezelfde webshop-DOM delen met de container; een HTML-iframe is geen vervanging.

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.

De juiste Wix-aanpak kiezen#

Wix documenteert dat ingesloten Stores-scripts niet beschikbaar zijn in Wix Studio en verwijst apps naar een sitepluginuitbreiding. Installeer geen oplossing met een ingesloten Editor-script om vervolgens te beweren dat deze Studio ondersteunt.

Vereisten#

Zorg voor een Wix-testsite met Wix Stores, toestemming om eigen code of een appuitbreiding te publiceren, de Shop ID en Publishable Key van ideal.house en een geïmporteerde test-SKU. Bepaal of de geselecteerde Wix-variant een eigen SKU heeft. Houd alle appgeheimen en backend-API-sleutels buiten de browserpagina.

Minimale SDK-markering#

Waar Wix je code in het webshopdocument laat uitvoeren, is de ondersteunde ideal.house-markering:

<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 exact overeenkomen met de geïmporteerde ideal.house sku.

Wix Editor: installeren voor één site#

Voeg in het Wix-dashboard de SDK-tag toe via Instellingen → Eigen code, plaats deze in de body of aan het einde daarvan en kies de productpagina's die deze nodig hebben. Publiceer de site; voorbeeldmodus is niet voldoende voor een productiecontrole.

Voeg daarna een eigen productpagina-element of Wix Stores-uitbreidingspunt toe dat de container in hetzelfde bovenste document aanmaakt. Vermijd een Wix-HTML-insluiting voor de knop: deze draait in een iframe, zodat een script in het bovenliggende document de container niet kan vinden en een script in het iframe de productpagina niet kan besturen.

Het plaatsbare element moet in je eigen code één bewerking beschikbaar stellen:

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

Roep deze pas aan nadat Wix een volledig huidig product of een volledige variant heeft gemeld via de API die voor je pagina of uitbreiding beschikbaar is. Dit is adaptercode van de klant; er wordt bewust geen ongeverifieerde Wix-paginagebeurtenis genoemd.

Wix-app: ingesloten script voor Wix Editor Stores#

Wix Stores biedt de locaties details-placeholder en bottom-placeholder voor uitbreidingen met ingesloten scripts. Voeg een container toe aan een van die invoegplaatsen; vervang de inhoud niet omdat andere apps deze kunnen delen. Configureer het SDK-script als afzonderlijk ingesloten fragment of maak het programmatisch aan met de exacte attributen src, data-shop-id en data-publishable-key.

De Wix Site-API die beschikbaar is voor via CLI gemaakte ingesloten scripts kan de webshopcontext lezen. Bepaal de huidige variant-SKU via de ondersteunde Stores-API van Wix en roep daarna je setIdealhouseSku()-koppeling aan. Houd de invoegplaats leeg totdat een volledige SKU beschikbaar is.

Wix Studio: siteplugin#

Maak een Wix Stores-siteplugin voor een gedocumenteerd productpaginaslot. Geef de container weer vanuit de plugininterface en laad de SDK in het sitedocument dat door Wix wordt weergegeven. De plugin moet de bepaalde SKU van de huidige variant doorgeven aan de DOM-container. Slotnamen en component-API's van Wix Studio kunnen veranderen; kies ze bij het genereren van de uitbreiding uit de actuele CLI-/API-referentie in plaats van een naam uit deze handleiding te kopiëren.

Gebruik geen pluginslot dat de knop in een geïsoleerd iframe weergeeft: de SDK en de bijbehorende weergave zijn niet voor die grens gecertificeerd. Kies een Wix-uitbreidingspunt dat de container in het webshopdocument plaatst of gebruik een headless webshop waarvan je het document beheert.

Productkoppeling en navigatie#

Koppel de product- of variant-sku van Wix aan ideal.house sku. Val niet ongemerkt terug op de Wix-product-ID: een gegenereerde ID komt niet overeen met een catalogus-SKU, tenzij je deze bewust hebt geïmporteerd.

Wix-productpagina's kunnen inhoud vervangen tijdens optieselectie of clientnavigatie. Doe bij elke gedocumenteerde product-/keuzecallback het volgende:

1. wis de eerder weergegeven container;
2. bepaal de volledige geselecteerde variant;
3. voeg een nieuwe container in met de bijbehorende SKU;
4. laat de container leeg wanneer er geen volledige of visualiseerbare SKU bestaat.

Bij galerijen en herhaalde lijsten heeft elk item een eigen SKU nodig. Producten in snelweergaven en modale vensters vereisen dezelfde levenscycluskoppeling in het modale slot.

Producten importeren#

Wix Stores synchroniseert niet automatisch met ideal.house. Exporteer de product- en variantvelden uit Wix, stel elke gewenste Wix SKU in als sku en gebruik Producten uploaden. Zie producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.

Automatische synchronisatie van Wix naar ideal.house, een appinstallatiestroom of een Wix-webhookverwerker is werk van de klant; deze handleiding belooft dat niet.

Controleren vóór publicatie#

1. Test de gepubliceerde site in een privévenster op desktop en mobiel.
2. Controleer dat de SDK eenmaal laadt in hetzelfde document als de container.
3. Vergelijk de DOM-productcode exact met de geïmporteerde SKU.
4. Wijzig elke optie totdat een definitieve variant is geselecteerd; controleer dat de oude container wordt verwijderd en een nieuwe verschijnt.
5. Test Wix-clientnavigatie, productgalerijen en herhaalde lijsten, snelweergaven, de terug- en vooruitknoppen van de browser, toestemmingsinstellingen en aangemelde en afgemelde modi.
6. Controleer dat een onbekende of lege SKU geen defecte visualisatieknop achterlaat.
7. Test bij een app installatie, inschakeling, uitschakeling en verwijdering op afzonderlijke Wix Editor- en Studio-testsites voor zover ondersteund.

De integratie verwijderen#

Verwijder of deactiveer de Wix-vermelding voor eigen code en verwijder het productpagina-element. Verwijder bij een app het ingesloten script of de sitepluginuitbreiding en verwijder deze van de testsite. Publiceer en controleer vervolgens dat het scriptverzoek en alle data-idealhouse-*-knooppunten verdwenen zijn.

Officiële platformreferenties#

• Wix: Wix Stores aanpassen met ingesloten scripts
• Wix: over ingesloten scripts
• Wix: over site-uitbreidingen
• Wix: eigen elementen