Ideal House
Naar inhoud gaan

Integratie met WordPress#

Voeg de ideal.house Room Visualizer toe aan een WordPress-site door één openbaar browserscript te laden en een container weer te geven waarvan de productcode overeenkomt met een geïmporteerde catalogus-SKU.

Verificatiestatus: Documentatie bekeken op 7 september 2026. Deze handleiding is niet van begin tot eind gecertificeerd met een WordPress-thema van een klant. Valideer haar vóór publicatie in een testkopie met de exacte versies van je thema en paginabouwer.

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.

Toepassingsgebied en vereisten#

Deze handleiding behandelt WordPress-inhoudssites, klassieke thema's, blokthema's en paginabouwers waarmee je HTML kunt toevoegen. Als de site WooCommerce-productgegevens gebruikt, volg dan de WooCommerce-handleiding voor variantselectie.

Zorg voor:

  • beheerderstoegang en, voor de duurzame aanpak, een afgeleid thema of een kleine sitespecifieke plugin;
  • de Shop ID en Publishable Key uit het ideal.house-dashboard;
  • één product dat al in ideal.house is geïmporteerd met een bekende sku;
  • een testpagina waarop caching en verkleining tijdens tests kunnen worden uitgeschakeld.

De Publishable Key is bedoeld voor browsermarkering. Plaats nooit een Client Secret of AI API-sleutel in WordPress-HTML.

Het SDK-contract controleren#

De kleinste ondersteunde installatie bestaat uit precies één SDK-script en één container voor een gegenereerde knop:

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>

data-product-code moet gelijk zijn aan de catalogus-sku, inclusief hoofdletters, kleine letters en leestekens. De SDK beheert de inhoud van de container. WordPress levert in deze handleiding geen ideal.house-plugin.

Het script op de hele site installeren#

WordPress raadt aan frontendscripts via wp_enqueue_script() te laden. Voeg het volgende toe aan functions.php van een afgeleid thema of aan een sitespecifieke plugin. Het filter voegt de twee vereiste gegevensattributen toe aan de tag die WordPress produceert.

php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

Vervang beide tijdelijke waarden. WordPress-versies vóór 6.3 accepteren het laatste wp_enqueue_script()-argument niet als array; geef in plaats daarvan true mee en gebruik het script_loader_tag-filter om ook async toe te voegen.

Installeer de SDK niet opnieuw in een codeblok of tagbeheerder. In de ontwikkelaarstools moet document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length de waarde 1 teruggeven.

Een knop plaatsen#

Voeg in de blokeditor een blok Eigen HTML toe waar de knop moet verschijnen:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Geef voor herhaalde kaarten dezelfde markering weer vanuit het themasjabloon en escape de code als een HTML-attribuut:

php
<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

Je thema of plugin moet $idealhouse_product_code aanleveren. Gebruik geen bericht-ID, slug of titel, tenzij die exacte waarde ook de geïmporteerde ideal.house sku is.

Producten en varianten koppelen#

Maak vóór publicatie een expliciete koppeltabel:

WordPress-waardeideal.house-waardeRegel
eigen veld zoals idealhouse_skuskuexacte overeenkomst van de tekenreeks
één pagina zonder variantenéén geïmporteerd productéén container
collectie-item van een paginabouwerSKU-veld per itemhergebruik nooit één code voor de hele collectie

Als de pagina tussen varianten wisselt, moet de klantadapter de nieuwe data-product-code instellen. Wis de oude container voordat je de nieuwe invoegt, zodat verouderde weergavetoestand niet kan worden hergebruikt:

js
function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku.trim();
  host.append(container);
}

Dit is adaptercode van de klant. De code roept geen ongedocumenteerde ideal.house-methode aan en verzint geen WordPress-gebeurtenis; roep deze aan vanuit de gedocumenteerde callback van je thema of paginabouwer.

Dynamische navigatie en caches#

Voeg bij AJAX-filters, oneindig scrollen, modale productkaarten of overgangen van paginabouwers een nieuwe container in nadat het nieuwe productknooppunt in de DOM staat. Kloon geen container die de SDK al heeft gevuld. Als je tool geen stabiele weergavecallback biedt, voeg de container dan toe aan het itemsjabloon zodat elke weergave schone markering oplevert.

Wis na een themawijziging de caches van WordPress, het CDN en optimalisatieplugins. Sluit https://sdk.ideal.house/sdk.js uit van herschrijven voor uitgesteld laden als een prestatieplugin de gegevensattributen verwijdert of het script pas na interactie laadt.

Catalogusgegevens importeren#

WordPress-inhoud wordt niet automatisch gesynchroniseerd. Exporteer het gekozen eigen veld als sku en importeer de overeenkomende records via Producten uploaden. Ga verder met producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.

Controleren vóór publicatie#

  1. Open de testomgeving in een privévenster van de browser, niet in het editorvoorbeeld van WordPress.
  2. Controleer dat het SDK-verzoek slaagt en slechts eenmaal wordt uitgevoerd.
  3. Inspecteer de container en vergelijk data-product-code teken voor teken met de geïmporteerde sku.
  4. Controleer dat een geïmporteerde SKU een bruikbare visualisatieknop oplevert en dat een onbekende SKU geen defecte knop toont.
  5. Test paginabouwernavigatie, filters, de terug- en vooruitknoppen van de browser, mobiele lay-out en toestemmingsinstellingen.
  6. Selecteer elke ondersteunde variant en controleer dat de container opnieuw wordt aangemaakt met de bijbehorende SKU.
  7. Controleer de browserconsole en test opnieuw met caching en verkleining ingeschakeld.

De integratie verwijderen#

Verwijder de laadfunctie en het script_loader_tag-filter en verwijder vervolgens elk data-idealhouse-button-container-blok of sjabloonfragment. Wis alle caches en controleer dat de SDK-URL verdwenen is uit de paginabron en het netwerkpaneel.

Officiële platformreferenties#