Intégration Shoplazza#
Ajoutez Room Visualizer à Shoplazza avec une Theme App Extension ou un thème personnalisé Liquid et affichez le SKU de la variante sélectionnée en tant que code produit ideal.house.
Statut de vérification : documentation du thème, de l’extension, du produit et de la variante Shoplazza examinée le 7 septembre 2026. Aucune application partenaire ou boutique de test marchand n’était disponible, l’installation et le changement de variante doivent donc être validés dans une boutique de développement.
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/marchand Shoplazza, un accès à la source du thème ou de l’extension d’application, le Shop ID, la Publishable Key et des enregistrements importés pour les SKU de variante pris en charge. Dupliquez le thème marchand avant personnalisation.
Une Theme App Extension est le chemin réutilisable et maintenable. Un App Block injecte une interface visible et doit être ajouté par le marchand à une section de produit compatible ; un App Embed peut charger un comportement global.
Contrat minimal du SDK#
<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>
Shoplazza documente variant.sku ; utilisez cette chaîne exacte en tant que ideal.house sku.
Ajouter un App Block#
Créez un App Block d’extension de thème pour la section produit. Les blocs Shoplazza Liquid dans un contexte de produit peuvent accéder à product. Commencez par un hôte vide, puis utilisez l’état du formulaire de produit du thème actif pour fournir la variante sélectionnée :
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Pour un produit à variante unique, le JavaScript du bloc peut lire la seule entrée documentée dans product.variants à partir de données sérialisées en toute sécurité par le thème. Pour plusieurs variantes, laissez l’hôte vide jusqu’à ce que le formulaire de produit existant du thème résolve une sélection. Cela évite de s’appuyer sur une propriété de variante sélectionnée non documentée de Liquid.
Charger le SDK#
Dans idealhouse.js, chargez le SDK une seule fois. Pour une application réutilisable, fournissez le Shop ID et la Publishable Key via une configuration publique de bloc/embed assainie plutôt que de coder en dur un seul marchand :
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);
}
N’exposez jamais le secret d’application ou le ideal.house Client Secret.
Garder la variante sélectionnée synchronisée#
Connectez le rappel de formulaire de produit documenté du thème à cet adaptateur :
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
L’objet variante de Shoplazza documente sku, mais les thèmes peuvent implémenter la sélection différemment. Le câblage du rappel est un travail d’adaptateur client. Recréez le conteneur après une nouvelle sélection ; ne modifiez pas uniquement le balisage rempli par le SDK.
Pour les cartes de collection, l’aperçu rapide, les filtres de recherche et les sections rendues côté client, ajoutez un hôte au niveau de l’élément et exécutez le pont après le rappel de rendu documenté du thème. Si aucune variante finale n’est connue sur une carte, omettez le bouton ou ajoutez un lien vers la page produit.
Importer les produits#
Exportez chaque variant.sku pris en charge et importez-le en tant que ideal.house sku via Téléversement de produit. Consultez Importer des produits, État de la tâche, Liste des produits, Mise à jour des produits, Suppression d’un produit et Erreurs et nouvelles tentatives.
Les exports Admin API, les webhooks, la synchronisation planifiée, l’OAuth et la distribution de l’extension sont une implémentation client.
Vérifier et supprimer#
Testez le placement de l’App Block, l’activation de l’Embed, un produit à variante unique, tous les choix multi-variantes, les SKU vides/en double/inconnus, les cartes de collection, l’aperçu rapide, les filtres, l’historique du navigateur, le mobile, la localisation/devises, le consentement et les modes d’aperçu/direct du thème. Confirmez une requête SDK et un mappage exact de la variante SKU.
Pour supprimer, désactivez et désinstallez la Theme App Extension ou supprimez le code Liquid/JavaScript personnalisé, publiez le thème propre, videz les caches de la boutique en ligne et vérifiez que le SDK et tous les nœuds data-idealhouse-* sont absents.