Ideal House
Aller au contenu principal

Intégration Ecwid#

Utilisez une application de boutique en ligne personnalisée Ecwid et le cycle de vie de l'API JS de la boutique en ligne documentée pour ajouter des contrôles Room Visualizer aux pages de produits Ecwid.

Statut de vérification : documentation de l'API JS de la boutique en ligne Ecwid consultée le 7 septembre 2026. Aucune application Ecwid ni boutique de test marchand n'était disponible. Les champs exacts de la charge de page doivent être confirmés par rapport à la référence actuelle de OnPageLoaded avant le déploiement.

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 et chemin pris en charge#

Ecwid nécessite une application personnalisée avec un fichier JavaScript auto-hébergé pour une personnalisation durable de la boutique en ligne. Préparez une boutique/application de développement Ecwid, un fichier adaptateur hébergé via HTTPS, un Shop ID, une Publishable Key, et des SKU de produits/variantes importés.

Si Ecwid est intégré dans un autre CMS, l'application de boutique en ligne personnalisée reste l'endroit fiable pour le code, car elle s'exécute avec la boutique en ligne Ecwid. Un script de page parente peut ne pas partager le même cycle de vie ou le même document dans tous les modes d'intégration.

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>

Utilisez le Ecwid SKU exact que vous avez importé en tant que ideal.house sku.

Initialisez votre application de boutique en ligne Ecwid#

Suivez le démarrage rapide de la boutique en ligne personnalisée de Ecwid pour enregistrer le fichier auto-hébergé. Lancez-le avec le rappel de préparation de l'API documenté, puis chargez le ideal.house SDK une seule fois :

js
Ecwid.OnAPILoaded.add(function () {
  if (document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) return;

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

Pour une application multi-boutiques, obtenez les deux valeurs publiques ideal.house à partir de la configuration publique sécurisée de votre application. N'insérez jamais un secret d'application Ecwid, un jeton d'accès ou un ideal.house Client Secret dans ce fichier.

Rendu sur les pages de produits#

Ecwid documente Ecwid.OnPageLoaded.add() et fournit des informations de page à son rappel. Utilisez la référence actuelle de l'API pour confirmer le type et l'identifiant de la page de produit, récupérez ou lisez les données du produit via l'interface client prise en charge par Ecwid, puis transmettez le SKU résolu à :

js
function mountIdealhouse(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;

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

Insérez host dans un emplacement stable des détails du produit après que Ecwid a terminé le rendu de la page. Supprimez l'hôte précédent lorsque le type de page change. Le sélecteur DOM et la recherche de la charge de page vers le produit sont du code adaptateur client, car les mises en page de boutique en ligne et les versions de charge de Ecwid peuvent changer.

Options et navigation#

Lorsqu'un acheteur choisit des options de produit, attendez que Ecwid résolve la variante achetable et son SKU. Appelez mountIdealhouse() avec ce SKU, ou effacez l'hôte si la sélection est incomplète. Ne concaténez pas les libellés d'options pour fabriquer un code.

Ecwid est une boutique en ligne monopage. Utilisez son cycle de vie de page documenté (rappels de changement de page OnPageLoaded) au lieu d'écouter uniquement le DOMContentLoaded du navigateur. La navigation par catégorie/recherche, les boutons Retour/Avance du navigateur, les widgets intégrés et les fenêtres contextuelles de produits doivent supprimer les hôtes de produits obsolètes et monter un nouveau conteneur après le rendu.

Importer les produits#

Exportez les champs de produit et de variante SKU de Ecwid et mappez-les vers ideal.house sku. Utilisez Téléversement de produits, y compris importer des produits, état de la tâche, liste des produits, mettre à jour les produits, supprimer un produit, et erreurs et nouvelles tentatives.

Tout export Ecwid REST API, webhook, installation OAuth ou synchronisation récurrente est à la charge du client et doit être implémenté côté serveur avec l'autorisation appropriée de Ecwid.

Vérifier et supprimer#

Testez l'installation de l'application, l'initialisation de l'API, les transitions produit/catégorie/recherche, chaque variante, les SKU manquants et inconnus, les boutons Retour/Avance du navigateur, un widget Ecwid intégré sur un autre site, la mise en page mobile, le consentement et les clients connectés/déconnectés. Confirmez une requête SDK dans le document contenant l'hôte et l'égalité exacte du SKU.

Pour supprimer, détachez le fichier JavaScript auto-hébergé de l'application personnalisée ou désinstallez l'application, supprimez les hôtes/écouteurs injectés, et vérifiez que l'URL du SDK et tous les nœuds data-idealhouse-* disparaissent après la navigation dans la boutique en ligne et un rechargement forcé.

Références officielles de la plateforme#