Shopware 6-Integration#
Fügen Sie Room Visualizer über ein Shopware 6-Plugin oder ein benutzerdefiniertes Theme hinzu und verwenden Sie die ausgewählte Produktnummer des Verkaufskanals als ideal.house Product Code.
Überprüfungsstatus: Shopware-Storefront-Dokumentation geprüft am 7. September 2026. Kein Kundenshop war verfügbar. Dieser Pfad zielt auf den Standard-Shopware 6 Twig-Storefront ab; headless/composable Storefronts benötigen ihre frameworkspezifische Adapter.
Vor dem Laden des SDK: Öffnen Sie Dashboard → Einstellungen, fügen Sie den Origin Ihres Onlineshops zu Allowed Origins (CORS) hinzu und klicken Sie auf Speichern. Berücksichtigen Sie den veröffentlichten Hostnamen sowie alle verwendeten Vorschau- oder Staging-Origins; trennen Sie mehrere Origins durch Kommas. Siehe Konfigurationsschritte.
Voraussetzungen#
Bereiten Sie einen Entwicklungs-Shop, Zugriff auf den Plugin-/Theme-Quellcode, einen Staging-Verkaufskanal, Shop ID, Publishable Key und importierte Produktnummern vor. Arbeiten Sie in einem Plugin oder Child-Theme, statt den Storefront-Kern oder ein Anbieter-Theme zu ändern.
Minimale SDK-Schnittstelle#
<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>
Mappen Sie Shopware productNumber exakt auf ideal.house sku. Das SDK ruft nicht die Store-API von Shopware ab.
Die Produktvorlage erweitern#
Erweitern Sie in Ihrem Plugin die Twig-Vorlage beziehungsweise den Block, der in Ihrer installierten Shopware-Version in der Nähe des Kauf-Widgets verwendet wird. Rendern Sie ein Hostelement mit dem aktuellen Produkt des Verkaufskanals:
{% 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 %}
Blocknamen und Kontext können sich zwischen Shopware-Versionen und Themes ändern. Prüfen Sie die Vorlage der aktiven Version, wählen Sie den kleinsten geeigneten Erweiterungsblock und stellen Sie sicher, dass page.product dort verfügbar ist. Verwenden Sie bei einer Produktkarte stattdessen deren Produktkontext.
Das SDK laden#
Shopware-Plugins können Storefront-JavaScript hinzufügen und Vorlagen überschreiben. Fügen Sie einen lokalen Storefront-Eintrag hinzu, der das SDK-Skript einmal erstellt:
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);
}
Kompilieren Sie die Storefront-Assets und aktivieren Sie das Plugin/Theme gemäß dem Prozess für Ihre Shopware-Version. Verwenden Sie Konfigurationswerte für Anmeldeinformationen in einem wiederverwendbaren Plugin; geben Sie nur den browser-sicheren Publishable Key aus.
Varianten und dynamische Inhalte#
Shopware stellt kaufbare Varianten häufig als eigenständige Produkte mit einer eigenen productNumber und kanonischen URL dar. Bei einer vollständigen Navigation gibt das serverseitig gerenderte Twig den neuen Code aus. Wechselt Ihr Theme Varianten ohne Neuladen der Seite, verbinden Sie dessen dokumentierten Abschluss-Callback mit:
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);
}
Diese Bridge ist kundeneigen, da Themes und Drittanbieter-Varianten-Plugins variieren. Durch Filter/Off-Canvas-Komponenten geladene Listen müssen nach Eintreffen neuer DOM sauber gerenderte oder neu erstellte Container erzeugen. Klonen Sie nicht von SDK generierte Kindelemente.
Produktimport#
Exportieren Sie jede Shopware Produkt-/Varianten-productNumber als ideal.house sku. Importieren Sie über Produktimport und verwenden Sie dann Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen sowie Fehler und Wiederholungsversuche.
Jegliche Store-API/Admin-API-Synchronisation, geplante Aufgabe oder Flow Builder/Webhook-Integration ist separater Kunden-Code.
Überprüfung und Entfernen#
Testen Sie ein übergeordnetes Produkt, jede visualisierbare Variante, fehlende und unbekannte Produktnummern, Listen, Filter, Off-Canvas-Ansichten und Schnellansichten, Browser-Zurück/Vorwärts, mobiles Layout, Cache-/Proxy-Verhalten und alle relevanten Verkaufskanäle und Domains. Prüfen Sie, dass nur eine SDK-Anfrage erfolgt und productNumber/SKU exakt übereinstimmen.
Zum Entfernen deaktivieren/deinstallieren Sie das Plugin oder entfernen Sie das Child-Theme-Twig und das JavaScript, erstellen Sie die Storefront-Assets neu, löschen Sie die Caches und vergewissern Sie sich, dass keine SDK-Anfrage oder Container verbleibt.