Integrazione con Shopware 6#

Aggiungi Room Visualizer tramite un plugin o un tema personalizzato di Shopware 6 e usa il numero del prodotto selezionato nel canale di vendita come Product Code di ideal.house.

Stato della verifica: documentazione del negozio Shopware esaminata il 7 settembre 2026. Non era disponibile un negozio cliente. Questa procedura riguarda il negozio standard Shopware 6 basato su Twig; i negozi headless/componibili richiedono un adattatore specifico per il proprio framework.

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 di sviluppo, l'accesso ai sorgenti del plugin/tema, un canale di vendita di prova, Shop ID, Publishable Key e numeri di prodotto importati. Lavora in un plugin o tema figlio anziché modificare il nucleo di Storefront o un tema del fornitore.

Contratto minimo di SDK#

html

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

Associa esattamente productNumber di Shopware a sku di ideal.house. SDK non interroga Store API di Shopware.

Estendi il modello del prodotto#

Nel plugin, estendi il modello/blocco Twig utilizzato vicino al componente di acquisto nella versione installata di Shopware. Genera un contenitore usando il prodotto corrente del canale di vendita:

twig

{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}

{% block buy_widget_buy_container %}
    {{ parent() }}
    {% if page.product.productNumber %}
        <div class="idealhouse-host">
            <div
                data-idealhouse-button-container
                data-product-code="{{ page.product.productNumber|escape }}">
            </div>
        </div>
    {% endif %}
{% endblock %}

I nomi dei blocchi e il contesto possono cambiare tra versioni e temi di Shopware. Esamina il modello della versione attiva, scegli il blocco di estensione più circoscritto e verifica che page.product sia disponibile al suo interno. Per una scheda prodotto, usa invece il contesto del prodotto della scheda.

Carica SDK#

I plugin di Shopware possono aggiungere JavaScript al negozio e sovrascrivere i modelli. Aggiungi un punto di ingresso locale per il negozio che crei lo script SDK una sola volta:

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

Compila le risorse del negozio e attiva il plugin/tema seguendo la procedura prevista per la tua versione di Shopware. In un plugin riutilizzabile, usa valori di configurazione per le credenziali; inserisci nella pagina soltanto la Publishable Key utilizzabile in sicurezza nel browser.

Varianti e contenuti dinamici#

Shopware rappresenta spesso le varianti acquistabili come prodotti distinti con un proprio productNumber e una URL canonica. Con una navigazione completa, Twig eseguito sul server genera naturalmente il nuovo codice. Se il tema cambia variante senza caricare una nuova pagina, collega la sua funzione di richiamo documentata al completamento a:

function replaceIdealhouseProduct(host, productNumber) {
  host.replaceChildren();
  const code = String(productNumber || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Questo collegamento è responsabilità del cliente, perché i temi e i plugin di varianti di terze parti differiscono. Gli elenchi caricati tramite filtri/componenti a scomparsa devono generare o ricreare contenitori puliti dopo l'arrivo del nuovo DOM. Non clonare gli elementi figli generati da SDK.

Importazione dei prodotti#

Esporta il productNumber di ogni prodotto/variante Shopware come sku di ideal.house. Importa tramite Caricamento dei prodotti, quindi consulta importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.

Qualsiasi sincronizzazione tramite Store API/Admin API, attività pianificata o integrazione con Flow Builder/webhook costituisce codice separato del cliente.

Verificare e rimuovere#

Prova un prodotto padre, ogni variante visualizzabile, numeri di prodotto mancanti e sconosciuti, elenchi, filtri, pannelli a scomparsa/anteprima rapida, Indietro/Avanti del browser, disposizione sui dispositivi mobili, comportamento di cache/proxy e tutti i canali di vendita/domini pertinenti. Verifica una sola richiesta SDK e la corrispondenza esatta productNumber/SKU.

Per rimuovere l'integrazione, disattiva/disinstalla il plugin oppure rimuovi Twig e JavaScript del tema figlio, ricompila le risorse del negozio, svuota le cache e verifica che non rimangano richieste SDK né contenitori.