Integrazione Squarespace#
Installa Room Visualizer su Squarespace tramite Iniezione di codice e inserisci contenitori specifici per prodotto dove l’editor della pagina consente codice personalizzato.
Stato della verifica: documentazione del centro assistenza Squarespace esaminata il 7 settembre 2026. Non era disponibile un sito Squarespace di un cliente. Iniezione di codice e blocchi di codice JavaScript richiedono piani idonei, il codice personalizzato non rientra nell’assistenza Squarespace e il caricamento Ajax può influenzarlo.
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.
Ambito e prerequisiti#
Questo percorso è più pratico per un catalogo piccolo con pagine prodotto stabili o per un sito di cui controlli un livello dati esplicito dei codici prodotto. Servono un piano idoneo, accesso come proprietario del sito, Shop ID, Publishable Key e SKUs importati in ideal.house.
Questa guida non fornisce un’estensione ideal.house per Squarespace. Il suo editor prodotti standard non garantisce un’API JavaScript pubblica stabile per lo SKU della variante selezionata; l’associazione delle varianti richiede quindi un adattatore del cliente e potrebbe non essere praticabile con ogni modello.
Contratto minimo di SDK#
<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 nel catalogo. Non usare Client Secret in Iniezione di codice.
Installare il caricatore#
Apri Sito web → Pagine → Codice personalizzato → Iniezione di codice (l’etichetta può variare secondo la versione del sito). Incolla lo <script> di SDK in Piè di pagina, sostituisci entrambi i segnaposto e salva. L’iniezione nel piè di pagina viene eseguita prima di </body> nelle pagine del sito; le pagine di pagamento non supportano il codice iniettato.
Installa il caricatore una sola volta. Se un’altra integrazione lo ha già aggiunto, rimuovi il duplicato.
Posizionare un pulsante prodotto#
Dove l’editor consente un blocco Codice con JavaScript attivo, inserisci:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Usa lo SKU di quel prodotto esatto. In Squarespace 7.1, le disposizioni Negozio/Dettagli prodotto potrebbero non accettare blocchi arbitrari nell’area principale delle informazioni prodotto. Un’alternativa pratica è una normale pagina con un blocco Prodotto e un blocco Codice adiacente, una coppia per prodotto. Verifica che la pagina del negozio resti attiva, perché i blocchi Prodotto dipendono da essa.
Per cataloghi più grandi, uno sviluppatore può inserire contenitori usando un’associazione stabile gestita dal cliente, come quella tra percorso URL e SKU:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
Associazione dell’URL, inserimento del contenitore e funzione di richiamo della navigazione sono codice del cliente. Non estrarre lo stato privato di Squarespace né presumere che la sua struttura sia stabile.
Varianti, vista rapida e caricamento Ajax#
Se un prodotto Squarespace ha più varianti con risorse ideal.house diverse, mostra il pulsante soltanto dopo che l’adattatore può identificare lo SKU della variante selezionata da una fonte supportata. Sostituisci il vecchio contenitore con uno pulito a ogni modifica. Se non esiste una funzione di richiamo o fonte dati supportata per la selezione, usa uno SKU condiviso a livello di prodotto soltanto se tutte le varianti condividono la stessa risorsa visiva, oppure ometti il pulsante.
Vista rapida, blocchi Prodotto e caricamento Ajax delle pagine possono sostituire i contenuti. Squarespace avverte che il caricamento Ajax può entrare in conflitto con il codice personalizzato. Prova il modello esatto; se necessario, disabilita Ajax oppure richiama renderForPath() da un meccanismo di navigazione che gestisci. Un MutationObserver è una soluzione di ultima istanza nell’adattatore del cliente e deve essere limitato all’area prodotto.
Importare i dati dei prodotti#
Mantieni una tabella che associ gli SKU dei prodotti e delle varianti Squarespace allo sku di ideal.house, poi usa Caricamento dei prodotti. Il flusso pubblico completo è documentato in importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.
SDK del browser non sincronizza i prodotti Squarespace. Esportazioni Commerce API, notifiche web e attività pianificate sono responsabilità del cliente.
Verificare e rimuovere#
Prova il sito pubblicato in una finestra privata, perché la modifica dopo l’accesso può impedire l’esecuzione del codice personalizzato. Controlla un prodotto associato, uno SKU mancante, uno SKU sconosciuto, blocchi Prodotto, vista rapida, navigazione Ajax, Indietro/Avanti del browser, disposizione mobile, consenso ai cookie ed esclusione delle pagine di pagamento. Verifica una sola richiesta SDK riuscita e l’esatta corrispondenza tra Product Code e SKU.
Per rimuovere, elimina l’iniezione nel piè di pagina e tutti i blocchi Codice, contenitori e script di associazione, salva e svuota le cache. Verifica che la pagina pubblicata non contenga richieste SDK o elementi data-idealhouse-*.