Intégration Shopware 6#

Ajoutez Room Visualizer via un plugin Shopware 6 ou un thème personnalisé et utilisez le numéro du produit sélectionné dans le canal de vente comme code produit ideal.house.

État de vérification : documentation de la boutique en ligne Shopware consultée le 7 septembre 2026. Aucune boutique client n'était disponible. Cette approche cible la boutique en ligne Twig standard de Shopware 6 ; les boutiques en ligne headless/composables nécessitent leur adaptateur spécifique au framework.

Avant de charger le SDK : ouvrez Tableau de bord → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS), puis cliquez sur Enregistrer. Incluez le nom d'hôte publié et toutes les origines d'aperçu ou de préproduction que vous utilisez ; séparez plusieurs origines par des virgules. Voir les étapes de configuration.

Prérequis#

Préparez une boutique de développement, un accès aux sources du plugin/thème, un canal de vente de préproduction, Shop ID, Publishable Key, et des numéros de produits importés. Travaillez dans un plugin ou un thème enfant plutôt que de modifier le cœur de Storefront ou un thème fournisseur.

Contrat minimal du 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>

Associez le productNumber Shopware au sku ideal.house exactement. Le SDK n'interroge pas l'API boutique de Shopware.

Étendre le modèle produit#

Dans votre plugin, étendez le modèle/bloc Twig utilisé près du widget d'achat dans votre version installée de Shopware. Rendez un hôte en utilisant le produit du canal de vente actuel :

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

Les noms de blocs et le contexte peuvent changer entre les versions et les thèmes de Shopware. Inspectez le modèle de la version active, choisissez le bloc d'extension le plus restreint et vérifiez que page.product est disponible là-bas. Pour une carte produit, utilisez plutôt le contexte produit de la carte.

Charger le SDK#

Les plugins Shopware peuvent ajouter du JavaScript de boutique en ligne et remplacer des modèles. Ajoutez une entrée de boutique en ligne locale qui crée le script SDK une seule fois :

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

Compilez les ressources de la boutique en ligne et activez le plugin/thème en utilisant le processus pour votre version de Shopware. Utilisez des valeurs de configuration pour les identifiants dans un plugin réutilisable ; ne rendez que la clé publique Publishable Key sûre pour le navigateur.

Variantes et contenu dynamique#

Shopware représente souvent les variantes achetables comme des produits distincts avec leur propre productNumber et URL canonique. Lors d'une navigation complète, le Twig rendu côté serveur émet naturellement le nouveau code. Si votre thème bascule entre les variantes sans chargement de page, connectez son rappel de complétion documenté à :

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

Ce pont est de la responsabilité du client car les thèmes et les plugins de variantes tiers diffèrent. Les listes chargées via des filtres/composants en panneau latéral doivent rendre ou recréer des conteneurs propres après l'arrivée du nouveau DOM. Ne clonez pas les enfants générés par le SDK.

Importation de produits#

Exportez le numéro de produit/variante productNumber de chaque produit/variante Shopware en tant que code produit sku de ideal.house. Importez via Téléversement de produits, puis utilisez Importer des produits, Statut de la tâche, Lister les produits, Mettre à jour les produits, Supprimer un produit et Erreurs et nouvelles tentatives.

Toute synchronisation API boutique/API administrateur, tâche planifiée ou intégration Flow Builder/webhook est un code client distinct.

Vérifier et supprimer#

Testez un produit parent, chaque variante visualisable, les numéros de produits manquants et inconnus, les listes, les filtres, l'aperçu rapide/en panneau latéral, les boutons Précédent/Suivant du navigateur, la mise en page mobile, le comportement cache/proxy et tous les canaux de vente/domaines pertinents. Confirmez une requête SDK et l'association exacte productNumber/SKU.

Pour supprimer, désactivez/désinstallez le plugin ou supprimez le Twig du thème enfant et le JavaScript, reconstruisez les ressources de la boutique en ligne, videz les caches et vérifiez qu'aucune requête SDK ou conteneur ne subsiste.