Integratie met PrestaShop#
Gebruik een kleine PrestaShop-module om Room Visualizer te laden en een knop weer te geven op basis van het artikelnummer van het huidige product of de huidige combinatie.
Verificatiestatus: De documentatie voor modules, hooks en bestanden van PrestaShop 8/9 is bekeken op 7 september 2026. Er was geen handelaarswinkel beschikbaar. Het voorbeeld gebruikt gedocumenteerde hooks die Classic en Hummingbird gemeen hebben, maar externe thema's kunnen deze verplaatsen of weglaten.
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 koppelingen#
Zorg voor een testwinkel, toegang voor moduleontwikkeling, Shop ID, Publishable Key en geïmporteerde SKUs. Bepaal of de ideal.house-code afkomstig is van de reference van het basisproduct of de reference van de geselecteerde combinatie. Elke visualiseerbare combinatie moet een uniek, niet-leeg artikelnummer hebben.
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>
De productcode moet exact overeenkomen met de geïmporteerde ideal.house sku. ID's van PrestaShop zijn niet uitwisselbaar met artikelnummers.
Een invoegpunt in een module maken#
Registreer displayProductAdditionalInfo om inhoud op productpagina's te plaatsen en actionFrontControllerSetMedia om je lokale adapter te laden. Zowel Classic als Hummingbird documenteert de weergavehook in product- en snelweergavesjablonen.
public function install()
{
return parent::install()
&& $this->registerHook('displayProductAdditionalInfo')
&& $this->registerHook('actionFrontControllerSetMedia');
}
public function hookActionFrontControllerSetMedia($params)
{
$this->context->controller->registerJavascript(
'module-' . $this->name . '-adapter',
'modules/' . $this->name . '/views/js/adapter.js',
array('position' => 'bottom', 'priority' => 200)
);
}
Haal in de callback van de weergavehook het weergegeven product op, kies het artikelnummer, wijs dit toe aan Smarty en geef een modulesjabloon weer. Escape de waarde in dat sjabloon:
<div class="idealhouse-host">
{if $idealhouse_product_code}
<div
data-idealhouse-button-container
data-product-code="{$idealhouse_product_code|escape:'html':'UTF-8'}">
</div>
{/if}
</div>
Kopieer de ingekorte PHP niet als complete productiemodule: voeg normale modulemetadata, versiecompatibiliteit, configuratieopslag, rechtencontroles en opruimacties bij verwijdering toe.
De SDK eenmaal laden#
Maak in adapter.js het exacte SDK-element aan nadat je de twee openbare waarden hebt gelezen uit de opgeschoonde webshopconfiguratie van je module:
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 = window.idealhousePublicConfig.shopId;
script.dataset.publishableKey = window.idealhousePublicConfig.publishableKey;
document.head.append(script);
}
Stel idealhousePublicConfig beschikbaar via het ondersteunde mechanisme van PrestaShop voor JavaScript-definities of configuratie. Maak nooit een Client Secret zichtbaar.
Combinatiewijzigingen en dynamische pagina's#
De levenscyclus voor productvernieuwing van het thema en externe combinatiemodules verschillen. Geef het artikelnummer door aan deze klantkoppeling op het punt waar het actieve thema de geselecteerde combinatie heeft bepaald:
function renderIdealhouseCombination(host, reference) {
host.replaceChildren();
const code = String(reference || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Raad niet op basis van weergegeven labels. Snelweergave staat bij de gedocumenteerde hooklocaties, maar controleer dat het actieve thema de hook daadwerkelijk weergeeft. Laat bij AJAX-filters of vernieuwde productfragmenten de hook een nieuwe container maken of roep de koppeling aan na de gedocumenteerde bijwerkcallback van het thema.
Productgegevens importeren#
Koppel de product-/combinatie-reference van PrestaShop aan ideal.house sku. Gebruik Producten uploaden en de handleidingen voor importeren, taakstatus, lijst opvragen, bijwerken, verwijderen en fouten en nieuwe pogingen. Elke PrestaShop Webservice-export, geplande taak of synchronisatie via hooks implementeert de klant zelf.
Controleren en verwijderen#
Test een eenvoudig product, elke combinatie, ontbrekende of dubbele artikelnummers, een onbekende ideal.house SKU, snelweergaven, productlijsten, gefacetteerde navigatie, browsergeschiedenis, mobiel, verkoopcontexten met verschillende talen en valuta, toestemming en productiecaching. Controleer één SDK-verzoek en een exacte overeenkomst tussen artikelnummer en SKU.
Verwijder de module of schakel deze uit, zorg dat de bijbehorende hooks, configuratie en bestanden zijn verwijderd, wis Smarty- en webshopcaches en controleer dat de SDK-URL en de data-idealhouse-*-markering verdwenen zijn.