Integratie met Shopware 6#
Voeg Room Visualizer toe via een plugin of eigen thema voor Shopware 6 en gebruik het geselecteerde productnummer van het verkoopkanaal als ideal.house-productcode.
Verificatiestatus: De webshopdocumentatie van Shopware is bekeken op 7 september 2026. Er was geen klantwinkel beschikbaar. Deze aanpak is bedoeld voor de standaard Twig-webshop van Shopware 6; headless of samengestelde webshops hebben een frameworkspecificieke adapter nodig.
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#
Zorg voor een ontwikkelwinkel, toegang tot de plugin-/themabroncode, een testverkoopkanaal, Shop ID, Publishable Key en geïmporteerde productnummers. Werk in een plugin of afgeleid thema in plaats van de Storefront-kern of een leveranciersthema te wijzigen.
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>
Koppel Shopware productNumber exact aan ideal.house sku. De SDK vraagt de Store-API van Shopware niet op.
Het productsjabloon uitbreiden#
Breid in je plugin het Twig-sjabloon of blok uit dat bij de aankoopwidget van je geïnstalleerde Shopware-versie wordt gebruikt. Geef een container weer met het huidige product van het verkoopkanaal:
{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}
{% block buy_widget_buy_container %}
{{ parent() }}
{% if page.product.productNumber %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ page.product.productNumber|escape }}">
</div>
</div>
{% endif %}
{% endblock %}
Bloknamen en context kunnen verschillen tussen Shopware-versies en thema's. Inspecteer het sjabloon van de actieve versie, kies het kleinste passende uitbreidingsblok en controleer dat page.product daar beschikbaar is. Gebruik voor een productkaart de productcontext van die kaart.
De SDK laden#
Shopware-plugins kunnen webshop-JavaScript toevoegen en sjablonen overschrijven. Voeg een lokaal webshopstartpunt toe dat het SDK-script eenmaal aanmaakt:
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 = '<SHOP_ID>';
script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
document.head.append(script);
}
Compileer de webshopbestanden en activeer de plugin of het thema volgens de procedure voor je Shopware-versie. Gebruik configuratiewaarden voor toegangsgegevens in een herbruikbare plugin; geef alleen de browserveilige Publishable Key weer.
Varianten en dynamische inhoud#
Shopware behandelt koopbare varianten vaak als afzonderlijke producten met hun eigen productNumber en canonieke URL. Bij volledige navigatie levert de serverweergave met Twig vanzelf de nieuwe code. Als je thema varianten wisselt zonder de pagina te laden, verbind dan de gedocumenteerde voltooiingscallback met:
function replaceIdealhouseProduct(host, productNumber) {
host.replaceChildren();
const code = String(productNumber || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Deze koppeling wordt door de klant beheerd omdat thema's en externe variantplugins verschillen. Productlijsten die via filters of uitschuifpanelen worden geladen, moeten schone containers weergeven of opnieuw aanmaken nadat nieuwe DOM is aangekomen. Kloon geen door de SDK gegenereerde onderliggende elementen.
Productimport#
Exporteer elke product-/variant-productNumber uit Shopware als ideal.house sku. Importeer via Producten uploaden en gebruik daarna producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.
Elke synchronisatie via Store-API/Admin-API, geplande taak of Flow Builder-/webhookintegratie is afzonderlijke code van de klant.
Controleren en verwijderen#
Test een bovenliggend product, elke visualiseerbare variant, ontbrekende en onbekende productnummers, productlijsten, filters, uitschuifpanelen/snelweergaven, de terug- en vooruitknoppen van de browser, mobiele lay-out, cache-/proxygedrag en alle relevante verkoopkanalen en domeinen. Controleer één SDK-verzoek en een exacte overeenkomst tussen productNumber en SKU.
Deactiveer of verwijder de plugin, of verwijder de Twig- en JavaScript-bestanden van het afgeleide thema. Bouw de webshopbestanden opnieuw, wis caches en controleer dat er geen SDK-verzoek of container overblijft.