Integrazione con OpenCart#
Aggiungi Room Visualizer tramite un'estensione OpenCart 4 o un tema personalizzato e associa un codice prodotto stabile del negozio al catalogo ideal.house.
Stato della verifica: documentazione delle estensioni OpenCart 4 esaminata il 7 settembre 2026. Non era disponibile un negozio di prova. OpenCart 3 e i temi di terze parti usano percorsi e convenzioni per gli eventi differenti; adatta questa guida alla versione principale installata.
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 scelta del codice#
Prepara un negozio di prova, l'accesso per sviluppare estensioni/temi, Shop ID, Publishable Key e record di prova importati. Il nucleo di OpenCart espone normalmente model nei modelli del prodotto, mentre SKU può richiedere interventi sul controller/sull'estensione in base alla versione e al tema. Scegli un valore e usalo coerentemente come sku di ideal.house.
Non modificare direttamente i file del catalogo nel nucleo del sistema. Distribuisci le modifiche come estensione OpenCart 4 oppure conservale in un tema personalizzato sotto controllo di versione.
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 essere uguale allo sku importato in ideal.house, carattere per carattere.
Genera il contenitore del prodotto#
Estendi il modello del prodotto attivo tramite l'estensione. Se scegli esplicitamente di associare il campo OpenCart model a sku di ideal.house, inserisci questo codice vicino alle azioni del prodotto:
{% if model %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ model }}">
</div>
</div>
{% endif %}
L'escape automatico di Twig dipende dalla configurazione dell'ambiente; assicurati che al valore scelto sia applicato l'escape per gli attributi HTML. Se scegli il campo SKU effettivo, aggiungi tale valore ripulito ai dati del modello del controller nell'estensione e visualizzalo al posto di model.
Caricare SDK una sola volta#
Aggiungi una risorsa JavaScript al negozio tramite il meccanismo di estensioni/temi. Deve creare un solo script con gli attributi obbligatori:
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);
}
Memorizza i due valori pubblici nella configurazione dell'estensione e inseriscili nella pagina in sicurezza. Non inserire mai un Client Secret di ideal.house in JavaScript, Twig, registri dell'estensione o HTML in cache.
Opzioni, varianti e visualizzazione dinamica#
Le opzioni OpenCart non corrispondono sempre in modo univoco a varianti dotate di SKU. Se il negozio usa un'estensione per opzioni/varianti, integrati con il modello dei dati e con la funzione di richiamo documentata dell'estensione che segnala quando la variante è stata determinata. Sostituisci il contenitore soltanto quando viene fornito il codice esatto selezionato:
function renderIdealhouseCode(host, productCode) {
host.replaceChildren();
const code = String(productCode || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Questo è codice adattatore del cliente; la guida non definisce un evento universale per le varianti OpenCart. Per ricerca AJAX, filtri di categoria, finestre a comparsa e anteprima rapida, genera contenitori puliti nei modelli dell'estensione oppure richiama il collegamento dalla sua funzione di richiamo documentata al completamento. Non copiare mai gli elementi figli prodotti da SDK.
Importare i prodotti#
Esporta il model/SKU OpenCart scelto per ogni articolo visualizzabile e associalo a sku di ideal.house. Usa Caricamento dei prodotti, quindi segui importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.
Le chiamate OpenCart Admin API, le esportazioni pianificate, i gestori degli eventi e i webhook sono interventi di integrazione a carico del cliente.
Verificare e rimuovere#
Prova prodotti semplici, ogni combinazione di opzioni supportata, codici mancanti e duplicati, SKUs sconosciuti a ideal.house, pagine di categoria/ricerca, anteprima rapida, Indietro/Avanti del browser, disposizione sui dispositivi mobili, più negozi, lingue/valute, consenso e cache/minificazione di produzione. Verifica esattamente una richiesta SDK e la corrispondenza esatta del codice.
Per rimuovere l'integrazione, disabilita/disinstalla l'estensione oppure rimuovi la sovrascrittura del tema personalizzato e la risorsa, aggiorna modifiche/eventi di OpenCart, svuota le cache del tema/CDN e verifica l'assenza della richiesta SDK e dei contenitori.