Benutzerdefinierte Storefront-Entwicklerintegration#

Laden Sie das ideal.house-SDK und ordnen Sie die productCode-Werte des Onlineshops dem Katalog zu.

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.

1. Das SDK laden#

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

2. Eine Schaltflächenvariante wählen#

Option A: SDK-generierter Button#

Rendern Sie einen Zielcontainer. Nach der Produktvalidierung erstellt das SDK darin eine untergeordnete Schaltfläche.

html

<div data-idealhouse-button-container data-product-code="<PRODUCT_CODE>"></div>

Option B: Selbst erstellte Schaltfläche#

Rendern und gestalten Sie die Schaltfläche selbst. Das SDK erhält das DOM und bindet die Eignungsprüfung sowie das Klickverhalten ein.

html

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. productCode mit dem Katalog identisch halten#

<PRODUCT_CODE>

productCode im Katalog und data-product-code im Onlineshop müssen einschließlich Groß-/Kleinschreibung identisch sein.
Erzeugen Sie productCode nicht bei jedem Rendern neu aus einem veränderlichen Namen. Aktualisieren Sie den Katalog und den Onlineshop gemeinsam, wenn der Code geändert werden muss.

4. Behandeln Sie dynamische Seiten und ausgewählte Produkte#

Das SDK beobachtet Zielelemente, die nach dem Laden der Seite eingefügt werden. Ihre Anwendung muss weiterhin deren Attribute aktualisieren und den alten SDK-Zustand zurücksetzen, wenn sich das ausgewählte Produkt ändert.

Selbst erstellte Schaltfläche nach einer Auswahländerung aktualisieren#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. Verifizieren Sie die Integration#

Im Netzwerk-Panel ist zu sehen, dass sdk.js mit HTTP 200 geladen wurde.
data-product-code am zugeordneten Zielelement stimmt exakt mit dem Katalog überein.
Nur geeignete Produkte zeigen eine generierte oder selbst erstellte Schaltfläche.
Dynamische Produktänderungen aktualisieren das Ziel, bevor der Kunde klickt.
Ein Klick auf den Button öffnet den ideal.house Viewer mit dem ausgewählten Produkt.

Erweiterte Konfiguration#

Servergenerierter Launch-Token#

Verwenden Sie diesen Modus, wenn Ihr Backend kurzlebige Launch-Tokens ausgibt. Das Client Secret darf niemals im Browser JavaScript erscheinen.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

bash

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

Benutzerdefinierte Produktgröße#

Geben Sie am zugeordneten Element Breite, Höhe und die Einheit in Kleinbuchstaben (ft, in oder cm) gemeinsam an. Das SDK liest beim Klicken die aktuellen Werte.

html

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>