Ideal House
Aller au contenu principal

Intégration SHOPLINE#

Intégrez Room Visualizer à une boutique en ligne SHOPLINE via une extension d’application de thème ou un bloc de thème personnalisé contrôlé.

Statut de vérification : documentation des thèmes Online Store SHOPLINE 2.x/3.0 examinée le 7 septembre 2026. Aucune application partenaire ou boutique de test marchand n’était disponible. La syntaxe des modèles et les types d’extensions pris en charge varient selon la génération de la boutique en ligne ; validez donc par rapport à la version exacte de la boutique.

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.

Choisir une surface d’intégration#

  • Pour une application publique réutilisable sur Online Store 2.0/2.1, SHOPLINE recommande une Theme App Extension avec un App Block et un App Embed Block facultatif.
  • Les thèmes Online Store 3.0 fournissent des blocs réutilisables avec des ressources JavaScript facultatifs et des App Blocks.
  • Les API Script Tag/Asset sont anciennes ou dépendent de la version/type d’application ; ne les choisissez pas sans vérifier le tableau de compatibilité de SHOPLINE.
  • Pour une personnalisation de thème d’une seule boutique, utilisez la structure de bloc/modèle et de ressources de la version active.

Préparez une boutique de développement, un accès à l’extension/thème, le Shop ID, la Publishable Key et des codes de variante importés.

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>

Le code produit doit correspondre au sku du catalogue ideal.house. Cette documentation ne prétend pas qu’une application ideal.house SHOPLINE installable existe.

Construire le bloc de thème#

Créez un App Block ou un bloc de thème public qui affiche un hôte sur les pages de détail de produit. Utilisez l’objet produit/variante exact et les aides d’échappement documentés pour votre génération de boutique en ligne. Le HTML final de la boutique en ligne doit être :

html
<div class="idealhouse-host">
  <div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
</div>

Dans la source du modèle, remplacez CHAIR-OAK-01 par l’expression de code/SKU de la variante actuellement sélectionnée. Ne collez pas une expression Shopify Liquid dans les modèles Handlebars SHOPLINE 3.0 ; ce sont des langages et des contrats d’objets différents.

Pour un App Block, ajoutez-le à la section produit dans l’éditeur de thème. Pour un App Embed, utilisez-le pour charger le SDK globalement sans interface visible. Les App Blocks nécessitent généralement que le marchand les active et les place après l’installation.

Charger le SDK une seule fois#

Dans la ressource JavaScript de l’extension/thème, créez le script avec les deux paramètres publics avant de l’ajouter :

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

Utilisez la configuration de l’extension/les paramètres dynamiques pour les identifiants multi-marchands. N’exposez que la Publishable Key ; conservez les secrets d’application sur votre serveur.

Variantes sélectionnées et sections dynamiques#

Connectez le rappel de sélection de produit documenté du thème actif à un adaptateur client :

js
function setIdealhouseVariant(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);
}

Les thèmes SHOPLINE sont personnalisables, ce guide n’invente donc pas d’événement de variante de boutique en ligne universel. Online Store 3.0 documente les événements de section/bloc de l’éditeur de thème, mais ce sont des événements du cycle de vie de l’éditeur, et non des événements de sélection de variante par l’acheteur.

Lorsque les sections, filtres, pagination, aperçu rapide ou l’aperçu de l’éditeur de thème réaffichent un nœud de produit, créez un conteneur neuf. Nettoyez les écouteurs lorsqu’un bloc se décharge dans l’éditeur de thème. Les boutons des cartes produit nécessitent un SKU au niveau de l’élément ; omettez le contrôle si une variante finale n’est pas connue.

Importer les produits#

Exportez les données produit et variante SHOPLINE, et associez le code de boutique en ligne sélectionné au ideal.house sku. Utilisez Téléversement de produit et les guides approuvés pour Importer, État de la tâche, Liste, Mises à jour, Suppression et Gestion des nouvelles tentatives.

La synchronisation Admin SHOPLINE API, les webhooks, l’OAuth d’application et la distribution dans le magasin d’applications sont un travail d’adaptateur client.

Vérifier et supprimer#

Testez l’installation et l’activation du bloc marchand, un produit simple, chaque variante, les codes manquants/inconnus, les cartes, l’aperçu rapide, les filtres, la navigation de type SPA, le mobile, le consentement, l’aperçu de l’éditeur de thème et chaque version de boutique en ligne prise en charge. Confirmez une requête SDK et un mappage exact du code/SKU.

Pour supprimer, désactivez le App Block/Embed et désinstallez l’extension, ou supprimez le bloc personnalisé et la ressource. Publiez le thème propre, videz les caches et vérifiez qu’aucun balisage SDK URL ou data-idealhouse-* ne subsiste.

Références officielles de la plateforme#