Integrazione con SHOPLINE#
Integra Room Visualizer in un negozio online SHOPLINE tramite un'estensione dell'app per il tema o un blocco controllato del tema personalizzato.
Stato della verifica: documentazione dei temi SHOPLINE Online Store 2.x/3.0 esaminata il 7 settembre 2026. Non erano disponibili un'app partner né un negozio di prova di un commerciante. La sintassi dei modelli e i tipi di estensione supportati variano tra generazioni di Online Store, quindi verifica la compatibilità con la versione esatta del negozio.
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.
Scegli un punto di integrazione#
- Per un'app pubblica riutilizzabile su Online Store 2.0/2.1, SHOPLINE consiglia un'estensione dell'app per il tema con un blocco dell'app e, facoltativamente, un blocco di incorporamento dell'app.
- I temi Online Store 3.0 forniscono blocchi riutilizzabili con risorse JavaScript facoltative e blocchi dell'app.
- Le APIs per tag di script/risorse sono obsolete o dipendono dalla versione/dal tipo di app; non sceglierle senza controllare la tabella di compatibilità di SHOPLINE.
- Per personalizzare il tema di un solo negozio, usa la struttura di blocchi/modelli e risorse della versione attiva.
Prepara un negozio di sviluppo, l'accesso all'estensione/al tema, Shop ID, Publishable Key e codici di variante importati.
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>
Il Product Code deve corrispondere allo sku nel catalogo ideal.house. Questa documentazione non afferma che esista un'app ideal.house installabile per SHOPLINE.
Crea il blocco del tema#
Crea un blocco dell'app o un blocco pubblico del tema che generi un contenitore nelle pagine di dettaglio del prodotto. Usa l'oggetto prodotto/variante esatto e le funzioni di escape documentate per la tua generazione di Online Store. L'HTML finale del negozio deve essere:
<div class="idealhouse-host">
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
</div>
Nel sorgente del modello, sostituisci CHAIR-OAK-01 con l'espressione dello SKU/codice della variante attualmente selezionata. Non incollare un'espressione Shopify Liquid nei modelli SHOPLINE 3.0 Handlebars: si tratta di linguaggi e contratti degli oggetti differenti.
Per un blocco dell'app, aggiungilo alla sezione del prodotto nell'editor del tema. Per un incorporamento dell'app, usalo per caricare SDK globalmente senza interfaccia visibile. Di solito i blocchi dell'app richiedono che il commerciante li abiliti/posizioni dopo l'installazione.
Caricare SDK una sola volta#
Nella risorsa JavaScript dell'estensione/del tema, crea lo script con le due impostazioni pubbliche prima di aggiungerlo alla pagina:
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
const script = document.createElement('script');
script.src = 'https://sdk.ideal.house/sdk.js';
script.async = true;
script.dataset.shopId = '<SHOP_ID>';
script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
document.head.append(script);
}
Usa la configurazione dell'estensione/parametri dinamici per le credenziali di più commercianti. Esponi soltanto la Publishable Key; conserva i segreti dell'app sul server.
Varianti selezionate e sezioni dinamiche#
Collega la funzione di richiamo documentata del tema attivo per la selezione del prodotto a un adattatore del cliente:
function setIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = String(sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
I temi SHOPLINE sono personalizzabili, quindi questa guida non inventa un evento universale del negozio per le varianti. Online Store 3.0 documenta eventi di sezione/blocco dell'editor del tema, ma si tratta di eventi del ciclo di vita dell'editor, non di eventi di selezione delle varianti da parte dell'acquirente.
Quando sezioni, filtri, paginazione, anteprima rapida o anteprima dell'editor del tema rigenerano un nodo prodotto, crea un nuovo contenitore. Rimuovi i gestori degli eventi quando un blocco viene scaricato dall'editor del tema. I pulsanti delle schede prodotto richiedono uno SKU a livello di articolo; ometti il controllo quando la variante definitiva non è nota.
Importare i prodotti#
Esporta i dati dei prodotti e delle varianti SHOPLINE e associa il codice selezionato nel negozio a sku di ideal.house. Usa Caricamento dei prodotti e le guide approvate su importazione, stato del processo, elenco, aggiornamenti, eliminazione e gestione dei nuovi tentativi.
La sincronizzazione SHOPLINE Admin API, i webhook, OAuth dell'app e la distribuzione nel negozio delle app richiedono un adattatore a carico del cliente.
Verificare e rimuovere#
Prova l'installazione e l'abilitazione del blocco da parte del commerciante, un prodotto semplice, ogni variante, codici mancanti/sconosciuti, schede, anteprima rapida, filtri, navigazione in stile SPA, dispositivi mobili, consenso, anteprima dell'editor del tema e ogni versione supportata di Online Store. Verifica una sola richiesta SDK e l'associazione esatta codice/SKU.
Per rimuovere l'integrazione, disabilita il blocco/incorporamento dell'app e disinstalla l'estensione, oppure rimuovi il blocco personalizzato e la risorsa. Pubblica il tema ripulito, svuota le cache e verifica che non rimangano la URL di SDK né il codice data-idealhouse-*.