Integrazione di un negozio personalizzato per sviluppatori#

Carica SDK di ideal.house e associa i valori productCode del negozio al catalogo.

Prima di caricare SDK: apri Pannello di controllo → Impostazioni, aggiungi l'origine del negozio a Allowed Origins (CORS) e fai clic su Salva. Includi il nome host pubblicato e le eventuali origini di anteprima o di prova che usi; separa più origini con virgole. Consulta i passaggi di configurazione.

1. Carica SDK#

html

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

2. Scegli un contratto per il pulsante#

Opzione A: pulsante generato da SDK#

Genera un contenitore di destinazione. Dopo la convalida del prodotto, SDK crea il pulsante figlio al suo interno.

html

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

Opzione B: pulsante creato manualmente#

Crea e definisci tu stesso lo stile del pulsante. SDK conserva il DOM e collega il comportamento relativo all'idoneità e al clic.

html

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

3. Mantieni productCode identico al catalogo#

<PRODUCT_CODE>

Il productCode del catalogo e il data-product-code del negozio devono essere identici, comprese maiuscole e minuscole.
Non rigenerare productCode da un nome modificabile a ogni visualizzazione; aggiorna insieme catalogo e negozio quando il valore deve cambiare.

4. Gestisci le pagine dinamiche e i prodotti selezionati#

SDK osserva gli elementi di destinazione inseriti dopo il caricamento della pagina. L'applicazione deve comunque aggiornare gli attributi di destinazione e azzerare lo stato SDK precedente quando cambia il prodotto selezionato.

Aggiorna un pulsante creato manualmente dopo un cambio di selezione#

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. Verifica l'integrazione#

Il pannello Rete mostra sdk.js caricato con HTTP 200.
Il data-product-code dell'elemento di destinazione corrispondente coincide esattamente con il catalogo.
Soltanto i prodotti idonei mostrano un pulsante generato o creato manualmente.
I cambiamenti dinamici del prodotto aggiornano l'elemento di destinazione prima che il cliente faccia clic.
Facendo clic sul pulsante si apre Viewer di ideal.house con il prodotto selezionato.

Configurazione avanzata#

Token di avvio generato dal server#

Usa questa modalità quando il backend emette token di avvio di breve durata. Client Secret non deve mai comparire nel JavaScript del browser.

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"}'

Dimensioni personalizzate del prodotto#

Fornisci insieme larghezza, altezza e unità in minuscolo (ft, in o cm) sull'elemento corrispondente. SDK legge i valori più recenti al momento del clic.

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>