Wix-Integration#

Integrieren Sie den Room Visualizer mit Wix Stores über die Wix-Extension-Oberfläche, die Ihrem Seitentyp entspricht. Wix Editor und Wix Studio erfordern unterschiedliche Ansätze.

Überprüfungsstatus: Wix-Erweiterungsdokumentation am 7. September 2026 geprüft. Es lagen keine Kunden-Wix-Site- oder App-Anmeldeinformationen vor, sodass diese Anleitung nicht vollständig durchgetestet wurde. Das SDK muss denselben Storefront-DOM wie sein Container teilen; ein HTML-iframe ist kein Ersatz.

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.

Wählen Sie den richtigen Wix-Pfad#

Wix dokumentiert, dass eingebettete Stores-Skripte in Wix Studio nicht verfügbar sind, und verweist Apps auf eine Website-Plugin-Erweiterung. Installieren Sie keine Lösung mit eingebetteten Skripten für den Editor und behaupten Sie anschließend, sie unterstütze Studio.

Voraussetzungen#

Bereiten Sie eine Wix-Testwebsite mit Wix Stores, die Berechtigung zum Veröffentlichen benutzerdefinierten Codes oder einer App-Erweiterung, ideal.house-Shop ID und Publishable Key sowie eine importierte Test-SKU vor. Klären Sie, ob die ausgewählte Wix-Variante eine eigene SKU hat. Halten Sie alle App-Geheimnisse und Backend-API-Schlüssel von der Browserseite fern.

Minimales SDK-Markup#

Wo Wix die Ausführung Ihres Codes im Dokument des Onlineshops erlaubt, wird folgendes ideal.house-Markup unterstützt:

<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 exakt übereinstimmen.

Wix Editor: Installation für eine Site#

Fügen Sie im Wix-Dashboard das SDK-Tag über Einstellungen → Custom Code hinzu, platzieren Sie es im body/Ende des body und wählen Sie die Produktseiten aus, die es benötigen. Veröffentlichen Sie die Site; der Vorschaumodus reicht für eine Produktionsprüfung nicht aus.

Fügen Sie dann ein Produktseiten-custom-Element oder einen Wix Stores-Extension-Point hinzu, der den Container im selben Top-Level-Dokument erzeugt. Vermeiden Sie Wix-HTML-Embed für die Schaltfläche: Es läuft innerhalb eines iframes, sodass ein Skript im Eltern-Dokument seinen Container nicht entdecken kann und ein Skript im iframe die Produktseite nicht steuern kann.

Das einbaubare Element sollte in Ihrem eigenen Code eine Operation verfügbar machen:

function setIdealhouseSku(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);
}

Rufen Sie es nur auf, nachdem Wix über die für Ihre Seite oder Erweiterung verfügbare API ein vollständiges aktuelles Produkt/Variante meldet. Dies ist Kunden-Adapter-Code; er nennt absichtlich kein nicht verifiziertes Wix-Seiten-Event.

Wix-App: Embedded Script für Wix Editor Stores#

Wix Stores bietet details-placeholder- und bottom-placeholder-Standorte für Embedded Script Extensions. Hängen Sie einen Host an einen dieser Platzhalter; ersetzen Sie nicht dessen Inhalt, da andere Apps ihn gemeinsam nutzen können. Konfigurieren Sie das SDK-Skript als separates eingebettetes Fragment oder erstellen Sie es programmatisch mit den exakten src-, data-shop-id- und data-publishable-key-Attributen.

Die Wix-Site-API, die für CLI-erstellte Embedded Scripts verfügbar ist, kann Storefront-Kontext lesen. Lösen Sie die aktuelle Variante-SKU über Wix's unterstützte Stores-API auf und rufen Sie dann Ihre setIdealhouseSku()-Brücke auf. Halten Sie den Platzhalter leer, bis eine vollständige SKU existiert.

Wix Studio: Website-Plugin#

Erstellen Sie ein Wix Stores-Site-Plugin, das einen dokumentierten Produktseiten-Slot targetet. Rendern Sie den Container aus der Plugin-Benutzeroberfläche und laden Sie das SDK im Wix-gerenderten Site-Dokument. Das Plugin muss seine aufgelöste aktuelle-Variante-SKU an den DOM-Container weitergeben. Wix Studio-Slot-Namen und Komponente-APIs können sich entwickeln; wählen Sie diese aus der aktuellen CLI/API-Referenz beim Generieren der Extension statt Namen aus dieser Anleitung zu kopieren.

Verwenden Sie keinen Plugin-Slot, der die Steuerung innerhalb eines isolierten iframes rendert: das SDK und seine Anzeige wurden für diese Grenze nicht zertifiziert. Wählen Sie einen Wix-Extension-Point, der den Container im Storefront-Dokument platziert, oder nutzen Sie eine headless Storefront, wo Sie das Dokument kontrollieren.

Produktzuordnung und Navigation#

Ordnen Sie die Wix-Produkt- oder Varianten-sku der ideal.house-sku zu. Greifen Sie nicht stillschweigend auf die Wix-Produkt-ID zurück, denn eine generierte ID entspricht keiner Katalog-SKU, sofern Sie sie nicht bewusst importiert haben.

Wix-Produktseiten können Inhalte während der Optionenauswahl oder Client-Navigation ersetzen. Bei jedem dokumentierten Produkt-/Choice-Callback:

1. den zuvor gerenderten Container löschen;
2. die vollständige ausgewählte Variante auflösen;
3. einen frischen Container mit seiner SKU einfügen;
4. den Host leer lassen, wenn keine vollständige oder visualisierbare SKU vorhanden ist.

Für Galerien und Repeater benötigt jedes Element sein eigenes positionsspezifisches SKU. Quick-View- und Modal-Produkte erfordern denselben Lebenszyklus-Brücken im Modal-Slot.

Produkte importieren#

Wix Stores synchronisiert nicht automatisch mit ideal.house. Exportieren Sie die Wix-Produkt- und Variant-Felder, legen Sie jedes gewünschte Wix-SKU als sku fest und verwenden Sie Produktimport. Siehe Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen und Fehler und Wiederholungsversuche.

Eine automatische Synchronisierung von Wix zu ideal.house, ein App-Installationsablauf oder eine Wix-Webhook-Verarbeitung müssen vom Kunden implementiert werden; diese Anleitung sagt solche Funktionen nicht zu.

Vor der Veröffentlichung überprüfen#

1. Testen Sie die veröffentlichte Site in einem inkognito-Browserfenster auf Desktop und Mobilgerät.
2. Bestätigen Sie, dass das SDK einmal im selben Dokument wie der Container lädt.
3. Vergleichen Sie den DOM-Product Code exakt mit dem importierten SKU.
4. Ändern Sie jede Option, bis eine finale Variante ausgewählt ist; bestätigen Sie, dass der alte Container entfernt und ein neuer angezeigt wird.
5. Testen Sie Wix-Client-Navigation, Produktgalerie/-repeater-Seiten, Quick View, Browser-Zurück/Vorwärts, Einwilligungs-Einstellungen und Mitglieder/abgemeldete Modi.
6. Bestätigen Sie, dass ein unbekanntes oder leeres SKU keine kaputte Visualizer-Steuerung hinterlässt.
7. Testen Sie für eine App Installation, Aktivierung, Deaktivierung und Deinstallation in separaten Wix Editor- und Studio-Testsites, soweit unterstützt.

Integration entfernen#

Löschen oder deaktivieren Sie den Wix-Custom-Code-Eintrag und entfernen Sie das Produktseitenelement. Entfernen Sie für eine App das Embedded Script oder die Site-Plugin-Extension und deinstallieren Sie es von der Testsite. Veröffentlichen Sie und bestätigen Sie, dass die Skriptanforderung und alle data-idealhouse-*-Nodes verschwunden sind.

Offizielle Plattformreferenzen#

• Wix: Wix Stores mit Embedded Scripts anpassen
• Wix: Über Embedded Scripts
• Wix: Über Site Extensions
• Wix: Benutzerdefinierte Elemente