OpenCart-Integration#

Fügen Sie Room Visualizer über eine OpenCart 4-Erweiterung oder ein benutzerdefiniertes Theme hinzu und ordnen Sie einen stabilen Produktcode des Onlineshops dem ideal.house-Katalog zu.

Überprüfungsstatus: OpenCart 4-Erweiterungsdokumentation geprüft am 7. September 2026. Kein Testshop war verfügbar. OpenCart 3 und Drittanbieter-Themes verwenden unterschiedliche Pfade und Ereigniskonventionen; passen Sie diese Anleitung an die installierte Hauptversion an.

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 und Codeauswahl#

Bereiten Sie einen Staging-Shop, Extension/Theme-Entwicklungszugriff, Shop ID, Publishable Key sowie importierte Testdatensätze vor. OpenCart-Core bietet üblicherweise model in Produktvorlagen, während SKU abhängig von Version und Theme Controller-/Extension-Arbeit erfordern kann. Wählen Sie einen Wert und verwenden Sie ihn konsistent als ideal.house sku.

Bearbeiten Sie keine Core-Katalogdateien direkt. Packen Sie Änderungen als OpenCart 4-Extension ein oder behalten Sie sie in einem versionierten Custom-Theme.

Minimale SDK-Schnittstelle#

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>

Der Product Code muss mit dem importierten ideal.house-sku Zeichen für Zeichen übereinstimmen.

Den Produktcontainer rendern#

Erweitern Sie die aktive Produktvorlage über Ihre Extension. Wenn Sie das OpenCart-model-Feld bewusst auf ideal.house-sku mappen, platzieren Sie dies in der Nähe der Produktaktionen:

twig

{% if model %}
  <div class="idealhouse-host">
    <div
      data-idealhouse-button-container
      data-product-code="{{ model }}">
    </div>
  </div>
{% endif %}

Das automatische Maskieren in Twig hängt von der Umgebungskonfiguration ab. Stellen Sie sicher, dass der ausgewählte Wert für die Verwendung als HTML-Attribut maskiert wird. Wenn Sie das tatsächliche SKU-Feld wählen, fügen Sie den bereinigten Wert in Ihrer Erweiterung den Vorlagendaten des Controllers hinzu und rendern Sie ihn anstelle von model.

Laden Sie das SDK einmalig#

Fügen Sie ein Storefront-JavaScript-Asset über den Extension/Theme-Mechanismus hinzu. Es sollte ein Skript mit den erforderlichen Attributen erstellen:

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

Speichern Sie die beiden öffentlichen Werte in der Extension-Konfiguration und rendern Sie diese sicher. Geben Sie niemals ein ideal.house-Client Secret in JavaScript, Twig, Extension-Logs oder zwischengespeichertem HTML frei.

Optionen, Varianten und dynamisches Rendern#

OpenCart-Optionen entsprechen nicht grundsätzlich eins zu eins Varianten mit eigener SKU. Verwendet Ihr Shop eine Options-/Variantenerweiterung, binden Sie deren dokumentierten Callback für die ermittelte Variante und deren Datenmodell an. Ersetzen Sie das Hostelement erst, wenn der exakt ausgewählte Code vorliegt:

function renderIdealhouseCode(host, productCode) {
  host.replaceChildren();
  const code = String(productCode || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Dies ist kundenseitiger Adaptercode; diese Anleitung definiert kein universelles OpenCart-Variantenereignis. Rendern Sie für AJAX-Suche, Kategoriefilter, Pop-ups und Schnellansichten neue Container in den Vorlagen der Erweiterung oder rufen Sie die Anbindung über deren dokumentierten Abschluss-Callback auf. Kopieren Sie niemals vom SDK erzeugte Kindelemente.

Produkte importieren#

Exportieren Sie den gewählten OpenCart model/SKU für jedes visualisierbare Element und ordnen Sie ihn ideal.house sku zu. Verwenden Sie Produktimport und folgen Sie anschließend Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen sowie Fehler und Wiederholungsversuche.

OpenCart Admin-API-Aufrufe, geplante Exporte, Event-Listener und Webhooks sind kundeneigene Integrationsarbeit.

Überprüfung und Entfernen#

Testen Sie einfache Produkte, jede unterstützte Optionskombination, fehlende und doppelte Kennungen, unbekannte ideal.house-SKUs, Kategorien-/Suchseiten, Schnellansicht, Browser-Zurück/Vor, mobiles Layout, mehrere Shops, Sprachen/Währungen, Zustimmung sowie Produktions-Cache/Minifizierung. Bestätigen Sie genau eine SDK-Anfrage sowie eine exakte Codeübereinstimmung.

Zum Entfernen deaktivieren/deinstallieren Sie die Extension oder entfernen Sie die Custom-Theme-Überschreibung sowie das Asset, laden Sie OpenCart-Modifikationen/Events neu, löschen Sie Theme/CDN-Caches und vergewissern Sie sich, dass die SDK-Anfrage sowie Container fehlen.