Ideal House
Passa al contenuto

Integrazione Webflow#

Usa Codice personalizzato di Webflow e i campi CMS/Ecommerce per visualizzare pulsanti Room Visualizer il cui Product Code corrisponda al catalogo ideal.house.

Stato della verifica: documentazione del centro assistenza Webflow esaminata il 7 settembre 2026. Non era disponibile un sito Webflow di un cliente. Il codice personalizzato viene eseguito dopo l’anteprima o la pubblicazione e Webflow non esegue codice lato server in un elemento incorporato: prova quindi sul dominio di preproduzione pubblicato.

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 origini di anteprima o preproduzione utilizzate; separa più origini con virgole. Consulta i passaggi di configurazione.

Prerequisiti e limiti#

Servono il permesso di usare Codice personalizzato o Incorpora codice, un dominio di preproduzione, Shop ID, Publishable Key e uno SKU importato nel catalogo. Ai contenuti JavaScript incorporati si applicano i requisiti del piano Webflow. Il browser può contenere Publishable Key, ma mai Client Secret o una chiave AI API.

SDK non legge automaticamente Webflow Ecommerce. Il modello deve esporre lo SKU oppure un adattatore del cliente deve ricavarlo da un campo CMS affidabile.

Contratto minimo di SDK#

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>

data-product-code deve corrispondere esattamente allo sku importato in ideal.house.

Installare il caricatore#

Apri Impostazioni del sito → Codice personalizzato e aggiungi il tag script SDK nell’area del piè di pagina o alla fine del corpo. Sostituisci i segnaposto, salva e pubblica. Installalo una sola volta a livello di sito; non ripeterlo in ogni elemento CMS.

L’area di progettazione di Webflow potrebbe non eseguire lo script. Convalida su un URL di anteprima o di preproduzione pubblicato e ispeziona il sorgente effettivo della pagina.

Aggiungere un pulsante per ogni elemento#

Crea un campo CMS di testo semplice chiamato, ad esempio, Idealhouse SKU. Inserisci lo stesso valore importato come sku di ideal.house. Nel modello Prodotto o Raccolta CMS, aggiungi un elemento Incorpora codice nel punto del pulsante:

html
<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

Usa il controllo Aggiungi campo di Webflow nell’editor dell’elemento incorporato per inserire il valore dell’elemento corrente; l’istruzione tra parentesi qui sopra non è codice letterale da pubblicare. Dopo la pubblicazione, ispeziona il DOM e verifica che sia diventato una stringa normale, ad esempio:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Per una pagina statica, incolla uno SKU letterale. Non usare lo slug della pagina o l’ID dell’elemento Webflow, a meno che quel valore esatto sia lo SKU importato in ideal.house.

Varianti e visualizzazione dinamica#

Il collegamento standard del Designer Webflow potrebbe non esporre uno SKU di variante finale al codice personalizzato in ogni disposizione Ecommerce. Se ogni opzione visiva richiede una risorsa ideal.house diversa, crea un adattatore del cliente che riceva la variante selezionata da un’integrazione Webflow supportata o dal tuo livello dati, poi sostituisca il contenitore:

js
function showIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;
  const node = document.createElement('div');
  node.dataset.idealhouseButtonContainer = '';
  node.dataset.productCode = code;
  host.append(node);
}

Questo è codice del cliente. Richiamalo da una funzione di richiamo documentata dello strumento per varianti effettivamente utilizzato. Non estrarre il testo visualizzato delle opzioni e non presumere l’esistenza di eventi Webflow non ufficiali.

Interazioni Webflow, filtri CMS, paginazione di terze parti e transizioni simili a SPA possono aggiungere o sostituire elementi di raccolta. Includi l’elemento incorporato in ogni modello oppure richiama il collegamento dopo la funzione documentata dello strumento al termine della visualizzazione. Crea sempre un nuovo contenitore, senza clonare codice già elaborato da SDK.

Esporta i campi Prodotto/CMS di Webflow e associa Idealhouse SKU a sku. Carica tramite Caricamento dei prodotti e segui importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.

SDK del browser non fornisce sincronizzazione automatica con Webflow. Esportazioni CMS API, notifiche web e automazioni sono responsabilità del cliente.

Verificare e rimuovere#

Pubblica in preproduzione e prova un elemento associato, un campo mancante, uno SKU sconosciuto, un elenco di raccolta, il modello prodotto, filtri e paginazione, una finestra modale, una larghezza mobile, i controlli del consenso e Indietro/Avanti del browser. Verifica che SDK si carichi una volta, che ogni codice visualizzato corrisponda all’elemento corrente e che nessuna credenziale del server compaia in HTML.

Per rimuovere, elimina il codice personalizzato SDK a livello di sito e ogni elemento incorporato o collegamento del pulsante, ripubblica e svuota le cache di proxy/CDN. Verifica che la richiesta dello script e gli elementi data-idealhouse-* siano scomparsi dal sito pubblicato.

Riferimenti ufficiali della piattaforma#