Intégration Wix#

Intégrez le Room Visualizer avec Wix Stores via la surface d'extension Wix correspondant à votre type de site. Wix Editor et Wix Studio nécessitent des approches différentes.

Statut de vérification : documentation des extensions Wix consultée le 7 septembre 2026. Aucun site client Wix ni identifiants d'application n'étaient disponibles, cette intégration n'est donc pas certifiée de bout en bout. Le SDK doit partager le même document DOM de la boutique en ligne que son conteneur ; une iframe HTML n'est pas un substitut.

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é ainsi que les origines d'aperçu ou de préproduction que vous utilisez ; séparez plusieurs origines par des virgules. Consultez les étapes de configuration.

Choisir le bon chemin Wix#

Wix indique que les scripts intégrés de Stores ne sont pas disponibles dans Wix Studio et oriente les applications vers une extension de plugin de site. N'installez pas une solution de script intégré pour l'éditeur et n'affirmez pas une couverture Studio.

Prérequis#

Préparez un site de test Wix avec Wix Stores, la permission de publier du code personnalisé ou une extension d'application, le Shop ID et la Publishable Key de ideal.house, ainsi qu'un SKU de test importé. Déterminez si la variante Wix sélectionnée possède son propre SKU. Conservez tous les secrets d'application et les clés d'API backend hors de la page du navigateur.

Balise minimale du SDK#

Lorsque Wix permet à votre code de s'exécuter dans le document de la boutique en ligne, la balise ideal.house prise en charge est :

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

Le code produit doit correspondre exactement au sku du catalogue importé dans ideal.house.

Wix Editor : installation pour un site#

Dans le tableau de bord Wix, ajoutez la balise SDK via Paramètres → Code personnalisé, placez-la dans le corps/fin de corps, et choisissez les pages produit qui en ont besoin. Publiez le site ; le mode aperçu ne suffit pas pour une vérification en production.

Ajoutez ensuite un élément personnalisé de page produit ou un point d'extension Wix Stores qui génère le conteneur dans le même document de premier niveau. Évitez l'intégration HTML de Wix pour le bouton : elle s'exécute dans une iframe, si bien qu'un script dans le document parent ne peut pas découvrir son conteneur et qu'un script dans l'iframe ne peut pas contrôler la page produit.

L'élément positionnable doit exposer une opération dans votre propre code :

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Appelez-la uniquement après que Wix a signalé un produit/variante courant complet via l'API disponible pour votre page ou extension. Il s'agit de code adaptateur côté client ; il ne nomme délibérément aucun événement de page Wix non vérifié.

Application Wix : script intégré pour les boutiques Wix Editor#

Wix Stores fournit les emplacements details-placeholder et bottom-placeholder pour les extensions de scripts intégrés. Ajoutez un hôte à l'un de ces emplacements réservés ; ne remplacez pas son contenu car d'autres applications peuvent le partager. Configurez le script SDK comme un fragment intégré distinct ou créez-le programmatiquement avec les attributs exacts src, data-shop-id et data-publishable-key.

La Site API de Wix disponible pour les scripts intégrés créés via CLI peut lire le contexte de la boutique en ligne. Résolvez le SKU de la variante courante via l'API de boutiques prise en charge par Wix, puis appelez votre pont setIdealhouseSku(). Conservez l'emplacement réservé vide jusqu'à ce qu'un SKU complet existe.

Wix Studio : plugin de site#

Créez un plugin de site Wix Stores ciblant un emplacement de page produit documenté. Affichez le conteneur depuis l'interface du plugin et chargez le SDK dans le document de site rendu par Wix. Le plugin doit transmettre le SKU de la variante courante résolue au conteneur DOM. Les noms d'emplacements et les API de composants de Wix Studio peuvent évoluer ; choisissez-les dans la référence CLI/API actuelle lors de la génération de l'extension plutôt que de copier un nom de ce guide.

N'utilisez pas d'emplacement de plugin qui affiche le contrôle dans une iframe isolée : le SDK et son visualiseur ne sont pas certifiés pour cette frontière. Choisissez un point d'extension Wix qui place le conteneur dans le document de la boutique en ligne, ou utilisez une boutique en ligne headless où vous contrôlez le document.

Correspondance des produits et navigation#

Associez le sku du produit ou de la variante Wix vers le sku de ideal.house. Ne basculez pas silencieusement sur l'identifiant de produit Wix car un identifiant généré ne correspondra pas à un code catalogue SKU à moins de l'avoir importé délibérément.

Les pages produit Wix peuvent remplacer le contenu lors de la sélection d'options ou de la navigation côté client. Pour chaque rappel de produit/choix documenté :

1. effacez le conteneur précédemment affiché ;
2. résolvez la variante sélectionnée complète ;
3. insérez un conteneur neuf avec son SKU ;
4. laissez le conteneur vide si aucun SKU complet ou visualisable n'existe.

Pour les galeries et les répéteurs, chaque élément a besoin de son propre SKU au niveau de l'élément. Les produits en aperçu rapide et en modale nécessitent le même pont de cycle de vie dans l'emplacement de la modale.

Importer les produits#

Wix Stores ne se synchronise pas automatiquement avec ideal.house. Exportez les champs produit et variante de Wix, définissez chaque SKU de Wix souhaité comme sku, et utilisez Téléversement de produits. Consultez Importer des produits, Statut de la tâche, Lister les produits, Mettre à jour les produits, Supprimer un produit et Erreurs et nouvelles tentatives.

Une synchronisation automatique de Wix vers ideal.house, un flux d'installation d'application ou un processeur de webhook Wix est un travail côté client ; ce guide ne s'y engage pas.

Vérifier avant publication#

1. Testez le site publié dans une fenêtre de navigation privée sur ordinateur et sur mobile.
2. Vérifiez que le SDK se charge une seule fois dans le même document que le conteneur.
3. Comparez le code produit du DOM au SKU importé, exactement.
4. Modifiez chaque option jusqu'à ce qu'une variante finale soit sélectionnée ; vérifiez que l'ancien conteneur est supprimé et qu'un nouveau apparaît.
5. Testez la navigation côté client de Wix, les pages de galerie/répéteur de produits, l'aperçu rapide, les boutons Retour/Avant du navigateur, les paramètres de consentement et les modes membre/déconnecté.
6. Vérifiez qu'un SKU inconnu ou vide ne laisse aucun contrôle de visualiseur cassé.
7. Pour une application, testez l'installation, l'activation, la désactivation et la désinstallation sur des sites de test Wix Editor et Studio distincts, selon les prises en charge.

Supprimer l'intégration#

Supprimez ou désactivez l'entrée de code personnalisé Wix et retirez l'élément de page produit. Pour une application, retirez l'extension de script intégré ou de plugin de site et désinstallez-la du site de test. Publiez, puis vérifiez que la requête du script et tous les nœuds data-idealhouse-* ont disparu.

Références officielles de la plateforme#

• Wix : Personnaliser Wix Stores à l'aide de scripts intégrés
• Wix : À propos des scripts intégrés
• Wix : À propos des extensions de site
• Wix : Éléments personnalisés