Integrazione con Shoplazza#
Aggiungi Room Visualizer a Shoplazza con un'estensione dell'app per il tema o un tema Liquid personalizzato e inserisci lo SKU della variante selezionata come Product Code di ideal.house.
Stato della verifica: documentazione di temi, estensioni, prodotti e varianti Shoplazza esaminata il 7 settembre 2026. Non erano disponibili un'app partner né un negozio di prova di un commerciante, quindi l'installazione e il cambio di variante devono essere verificati in un negozio di sviluppo.
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#
Prepara un negozio Shoplazza di sviluppo/di un commerciante, l'accesso ai sorgenti del tema o dell'estensione dell'app, Shop ID, Publishable Key e record importati per gli SKUs delle varianti supportate. Duplica il tema del commerciante prima di personalizzarlo.
Un'estensione dell'app per il tema è la soluzione riutilizzabile più facile da mantenere. Un blocco dell'app inserisce un'interfaccia visibile e deve essere aggiunto dal commerciante a una sezione del prodotto compatibile; un incorporamento dell'app può caricare funzionalità globali.
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>
Shoplazza documenta variant.sku; usa questa stringa esatta come sku di ideal.house.
Aggiungi un blocco dell'app#
Crea un blocco dell'app dell'estensione del tema per la sezione del prodotto. I blocchi Shoplazza Liquid in un contesto prodotto possono accedere a product. Inizia con un contenitore vuoto, poi usa lo stato del modulo prodotto del tema attivo per fornire la variante selezionata:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Per un prodotto con una sola variante, il JavaScript del blocco può leggere l'unica voce documentata in product.variants dai dati serializzati in sicurezza dal tema. Per più varianti, mantieni vuoto il contenitore finché il modulo prodotto esistente del tema non determina una selezione. Questo evita di affidarsi a una proprietà Liquid non documentata per la variante selezionata.
Carica SDK#
In idealhouse.js, carica SDK una sola volta. Per un'app riutilizzabile, fornisci Shop ID e Publishable Key tramite la configurazione pubblica ripulita del blocco/incorporamento anziché codificare le credenziali di un solo commerciante:
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);
}
Non esporre mai il segreto dell'app né il Client Secret di ideal.house.
Mantieni sincronizzata la variante selezionata#
Collega la funzione di richiamo documentata del tema per il modulo prodotto a questo adattatore:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
L'oggetto variante di Shoplazza documenta sku, ma i temi possono implementare la selezione in modi diversi. Il collegamento della funzione di richiamo richiede un adattatore del cliente. Ricrea il contenitore dopo una nuova selezione; non limitarti a modificare il codice popolato da SDK.
Per schede di collezione, anteprima rapida, filtri di ricerca e sezioni generate sul client, aggiungi un contenitore a livello di articolo ed esegui il collegamento dopo la funzione di richiamo documentata del tema per la visualizzazione. Se in una scheda non è nota la variante definitiva, ometti il pulsante oppure rimanda alla pagina del prodotto.
Importare i prodotti#
Esporta ogni variant.sku supportato e importalo come sku di ideal.house tramite Caricamento dei prodotti. Consulta importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.
Esportazioni Admin API, webhook, sincronizzazione pianificata, OAuth e distribuzione dell'estensione sono implementazioni a carico del cliente.
Verificare e rimuovere#
Prova il posizionamento del blocco dell'app, l'abilitazione dell'incorporamento, un prodotto con una sola variante, tutte le scelte per più varianti, SKUs vuoti/duplicati/sconosciuti, schede di collezione, anteprima rapida, filtri, cronologia del browser, dispositivi mobili, localizzazione/valuta, consenso e modalità di anteprima/pubblicazione del tema. Verifica una sola richiesta SDK e l'associazione esatta dello SKU della variante.
Per rimuovere l'integrazione, disabilita e disinstalla l'estensione dell'app per il tema oppure rimuovi Liquid/JavaScript personalizzato, pubblica il tema ripulito, svuota le cache del negozio e verifica l'assenza di SDK e di tutti i nodi data-idealhouse-*.