Integrazione Wix#

Integra Room Visualizer con Wix Stores tramite il punto di estensione Wix adatto al tipo di sito. Wix Editor e Wix Studio richiedono approcci diversi.

Stato della verifica: documentazione delle estensioni Wix esaminata il 7 settembre 2026. Non erano disponibili un sito Wix di un cliente o credenziali dell’app, quindi non si tratta di una certificazione completa. SDK deve condividere il DOM del negozio con il proprio contenitore; un iframe HTML non lo sostituisce.

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.

Scegliere il percorso Wix corretto#

La documentazione Wix indica che gli script incorporati dei negozi non sono disponibili in Wix Studio e indirizza le app verso un’estensione plugin del sito. Non installare una soluzione con script incorporati per Editor dichiarando che supporta Studio.

Prerequisiti#

Prepara un sito di prova Wix con Wix Stores, il permesso di pubblicare codice personalizzato o un’estensione dell’app, Shop ID e Publishable Key di ideal.house e uno SKU di prova importato. Determina se la variante Wix selezionata ha uno SKU proprio. Mantieni tutti i segreti dell’app e le chiavi API lato server fuori dalla pagina del browser.

Codice minimo di SDK#

Dove Wix consente di eseguire codice nel documento del negozio, il codice ideal.house supportato è:

<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>

Product Code deve corrispondere esattamente allo sku importato in ideal.house.

Wix Editor: installazione per un sito#

Nel pannello di controllo Wix, aggiungi il tag SDK tramite Impostazioni → Codice personalizzato, posizionalo nel corpo o alla fine del corpo e scegli le pagine prodotto che ne hanno bisogno. Pubblica il sito; l’anteprima non è sufficiente per verificare la produzione.

Aggiungi quindi un elemento personalizzato della pagina prodotto o un punto di estensione Wix Stores che generi il contenitore nello stesso documento principale. Evita l’incorporamento HTML di Wix per il pulsante: funziona in un iframe, quindi uno script nel documento padre non può trovare il suo contenitore e uno script nell’iframe non può controllare la pagina prodotto.

L’elemento posizionabile deve esporre un’operazione nel tuo codice:

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

Richiamala soltanto dopo che Wix ha comunicato il prodotto o la variante corrente completa tramite l’API disponibile per la pagina o l’estensione. È codice dell’adattatore del cliente; intenzionalmente non specifica eventi di pagina Wix non verificati.

App Wix: script incorporato per i negozi Wix Editor#

Wix Stores fornisce le posizioni details-placeholder e bottom-placeholder per le estensioni script incorporato. Aggiungi un contenitore a uno di questi segnaposto; non sostituirne il contenuto perché può essere condiviso da altre app. Configura lo script SDK come frammento incorporato separato oppure crealo programmaticamente con gli attributi esatti src, data-shop-id e data-publishable-key.

L’API del sito Wix disponibile per gli script incorporati creati tramite CLI può leggere il contesto del negozio. Determina lo SKU della variante corrente tramite l’API Stores supportata da Wix, quindi richiama la funzione di collegamento setIdealhouseSku(). Mantieni vuoto il segnaposto finché non esiste uno SKU completo.

Wix Studio: plugin del sito#

Crea un plugin del sito Wix Stores destinato a una posizione documentata della pagina prodotto. Genera il contenitore dall’interfaccia del plugin e carica SDK nel documento del sito generato da Wix. Il plugin deve passare al contenitore DOM lo SKU della variante corrente dopo averlo determinato. I nomi delle posizioni e le interfacce di programmazione dei componenti Wix Studio possono evolvere; scegli quelli presenti nella documentazione CLI/API attuale quando generi l’estensione, invece di copiare un nome da questa guida.

Non usare una posizione del plugin che visualizza il controllo in un iframe isolato: SDK e il suo visualizzatore non sono stati certificati per quella separazione. Scegli un punto di estensione Wix che inserisca il contenitore nel documento del negozio oppure usa un negozio con interfaccia separata di cui controlli il documento.

Associazione dei prodotti e navigazione#

Associa lo sku del prodotto o della variante Wix allo sku di ideal.house. Non ripiegare silenziosamente sull’ID prodotto Wix, perché un ID generato non corrisponde a uno SKU del catalogo a meno che sia stato importato intenzionalmente.

Le pagine prodotto Wix possono sostituire contenuti durante la selezione delle opzioni o la navigazione lato client. A ogni richiamo documentato relativo al prodotto o alla scelta:

1. svuota il contenitore visualizzato in precedenza;
2. determina la variante selezionata completa;
3. inserisci un nuovo contenitore con il relativo SKU;
4. lascia vuoto il contenitore se non esiste uno SKU completo o visualizzabile.

Per gallerie ed elenchi ripetuti, ogni elemento richiede uno SKU proprio. I prodotti in vista rapida e nelle finestre modali richiedono lo stesso collegamento al ciclo di vita nella posizione della finestra modale.

Importare i prodotti#

Wix Stores non si sincronizza automaticamente con ideal.house. Esporta i campi dei prodotti e delle varianti Wix, imposta ciascuno SKU Wix desiderato come sku e usa Caricamento dei prodotti. Consulta importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.

La sincronizzazione automatica da Wix a ideal.house, il flusso di installazione dell’app e il gestore delle notifiche web Wix sono responsabilità del cliente; questa guida non ne promette la disponibilità.

Verificare prima di pubblicare#

1. Prova il sito pubblicato in una finestra privata del browser, su computer e dispositivi mobili.
2. Verifica che SDK venga caricato una sola volta nello stesso documento del contenitore.
3. Confronta esattamente Product Code nel DOM con lo SKU importato.
4. Cambia ogni opzione fino a selezionare una variante finale; verifica che il vecchio contenitore venga rimosso e ne compaia uno nuovo.
5. Prova navigazione lato client Wix, pagine con gallerie o elenchi ripetuti di prodotti, vista rapida, pulsanti Indietro/Avanti del browser, impostazioni del consenso e modalità membro o senza accesso.
6. Verifica che uno SKU sconosciuto o vuoto non lasci un controllo di visualizzazione non funzionante.
7. Per un’app, prova installazione, attivazione, disattivazione e disinstallazione su siti di prova separati Wix Editor e Studio, secondo il supporto previsto.

Rimuovere l’integrazione#

Elimina o disabilita la voce Codice personalizzato di Wix e rimuovi l’elemento della pagina prodotto. Per un’app, rimuovi l’estensione script incorporato o plugin del sito e disinstallala dal sito di prova. Pubblica, quindi verifica che la richiesta dello script e tutti i nodi data-idealhouse-* siano scomparsi.

Riferimenti ufficiali della piattaforma#

• Wix: personalizzare Wix Stores con script incorporati
• Wix: informazioni sugli script incorporati
• Wix: informazioni sulle estensioni del sito
• Wix: elementi personalizzati