Ideal House
Naar inhoud gaan

Integratie met WooCommerce#

Voeg Room Visualizer-knoppen toe aan WooCommerce-productpagina's en houd de ideal.house-productcode gesynchroniseerd met de SKU van de geselecteerde variant.

Verificatiestatus: Documentatie en openbaar WooCommerce-gedrag zijn bekeken op 7 september 2026. Deze implementatie is niet gecertificeerd in een klantwinkel. Klassieke sjablonen, blokthema's, variantuitbreidingen en snelweergaveplugins kunnen verschillende DOM weergeven; test de exacte combinatie in een testomgeving.

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 is bedoeld voor WooCommerce op WordPress. Ze gebruikt een kleine sitespecifieke plugin of een afgeleid thema, de standaardbestandsloader van WordPress en producthooks van WooCommerce. Dit is geen installeerbare ideal.house-plugin voor WordPress.

Zorg voor beheerders- en bestandstoegang, Shop ID, Publishable Key en geïmporteerde ideal.house-records voor elke visualiseerbare SKU. Geef elk eenvoudig product en elke ondersteunde variant in WooCommerce een unieke, niet-lege SKU.

Minimale SDK-markering#

Dit is het openbare SDK-contract dat de integratie gebruikt:

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>

De code in de gegenereerde container moet overeenkomen met de geïmporteerde catalogus-sku. Plaats geen database-ID's van WooCommerce in data-product-code, tenzij je die ID's bewust als catalogus-SKUs hebt gebruikt.

De SDK eenmaal laden#

Voeg deze code toe aan functions.php van een afgeleid thema of aan een sitespecifieke plugin. Vervang de tijdelijke waarden.

php
add_action('wp_enqueue_scripts', function () {
    if (!is_product() && !is_shop() && !is_product_category()) {
        return;
    }

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

Als je WooCommerce-versies op WordPress vóór 6.3 ondersteunt, geef dan true mee als laatste argument voor het laden en voeg async toe in het filter.

De container op de productpagina weergeven#

De volgende hook plaatst een container na het formulier om producten aan de winkelwagen toe te voegen. Eenvoudige producten krijgen onmiddellijk hun SKU. Variabele producten beginnen leeg; de browseradapter vult ze wanneer een volledige variant is geselecteerd.

php
add_action('woocommerce_after_add_to_cart_form', function () {
    global $product;
    if (!$product instanceof WC_Product) return;

    $sku = $product->is_type('variable') ? '' : $product->get_sku();
    printf(
        '<div class="idealhouse-host" data-initial-sku="%1$s">%2$s</div>',
        esc_attr($sku),
        $sku ? '<div data-idealhouse-button-container data-product-code="' . esc_attr($sku) . '"></div>' : ''
    );
});

Controleer dat de hook in je productsjabloon aanwezig is. Een thema dat het WooCommerce-sjabloon of het Product Collection-blok vervangt, kan een blokintegratie of een andere gedocumenteerde WooCommerce-hook vereisen.

Een geselecteerde variant synchroniseren#

Het meegeleverde variantformulier van WooCommerce activeert jQuery-gebeurtenissen voor de variantlevenscyclus. Voeg een lokaal bestand toe, bijvoorbeeld assets/js/idealhouse-woocommerce.js, laad het met jquery en wc-add-to-cart-variation als afhankelijkheden en gebruik:

js
(function ($) {
  function render(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);
  }

  $('.variations_form').each(function () {
    const form = $(this);
    const host = this.closest('.product')?.querySelector('.idealhouse-host');
    if (!host) return;

    form.on('found_variation', function (_event, variation) {
      render(host, variation && variation.sku);
    });
    form.on('reset_data hide_variation', function () {
      render(host, '');
    });
  });

  document.querySelectorAll('.idealhouse-host[data-initial-sku]').forEach(function (host) {
    render(host, host.dataset.initialSku);
  });
})(jQuery);

Dit bestand is een WooCommerce-adapter die de klant beheert. Als een variantplugin het standaardformulierscript vervangt, gebruik dan de gedocumenteerde selectiecallback van die plugin in plaats van aan te nemen dat deze gebeurtenissen nog worden geactiveerd. Werk niet alleen het attribuut bij van een container die al door de SDK is verwerkt; vervang deze door een schone container.

Productrasters, snelweergaven en AJAX-navigatie#

Gebruik voor cataloguskaarten een productlushook zoals woocommerce_after_shop_loop_item en geef de SKU van het eenvoudige product weer. Bij variabele producten in een raster is meestal nog geen variant bepaald; verwijs naar de productpagina of bouw een expliciete adapter voor variantselectie.

Snelweergaveplugins en WooCommerce Blocks kunnen producten invoegen nadat de pagina aanvankelijk is geladen. Plaats de container in het sjabloon dat ze weergeven en voer je render()-koppeling uit vanuit de gedocumenteerde voltooiingscallback van die tool. Als er geen stabiele callback is, kan een begrensde MutationObserver nieuwe .idealhouse-host-knooppunten detecteren, maar de klant blijft verantwoordelijk voor prestaties en levenscyclus.

Cataloguskoppeling en import#

Koppel WC_Product::get_sku() en elke WC_Product_Variation::get_sku() aan ideal.house sku. Bovenliggende en onderliggende producten mogen geen code delen als ze verschillende visuele bestanden vertegenwoordigen.

WooCommerce stuurt cataloguswijzigingen niet automatisch naar ideal.house. Gebruik Producten uploaden en de handleidingen voor importeren, taakstatus, lijst opvragen, bijwerken, verwijderen en nieuwe pogingen afhandelen. Geplande exports en webhookkoppelingen implementeert de klant zelf.

Controleren vóór publicatie#

  1. Test één eenvoudig product, één variabel product, één ontbrekende SKU en één SKU die niet in ideal.house voorkomt.
  2. Controleer dat de SDK eenmaal wordt opgevraagd en dat beide toegangsattributen in de scripttag behouden blijven.
  3. Selecteer elke variant en controleer dat data-product-code gelijk is aan de SKU van de variant.
  4. Stel het variantformulier opnieuw in; de oude container moet verdwijnen.
  5. Test waar van toepassing een productraster, snelweergave, AJAX-filters, winkelwagenfragmenten, een vastgezette mobiele winkelwagenknop en de terug- en vooruitknoppen van de browser.
  6. Test terwijl je bent afgemeld, met toestemmingsinstellingen en productiecaching ingeschakeld.
  7. Controleer dat er geen Client Secret staat in HTML, JavaScript, logboeken of bronkaarten.

De integratie verwijderen#

Verwijder de PHP-hooks en het filter en stop het laden van de lokale variantadapter. Verwijder containers uit overschreven sjablonen of blokken, wis WooCommerce-transients en pagina-/CDN-caches en controleer dat er geen SDK-verzoek of data-idealhouse-*-element overblijft.

Officiële platformreferenties#