Intégration OpenCart#
Ajoutez Room Visualizer via une extension OpenCart 4 ou un thème personnalisé, et associez un code produit de boutique en ligne stable au catalogue ideal.house.
Statut de vérification : documentation des extensions OpenCart 4 examinée le 7 septembre 2026. Aucune boutique de test n’était disponible. Les versions OpenCart 3 et les thèmes tiers utilisent des chemins et des conventions d’événements différents ; adaptez ce guide à la version majeure installée.
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 choix du code#
Préparez une boutique de préproduction, un accès au développement d’extension/thème, le Shop ID, la Publishable Key et des enregistrements de test importés. Le noyau OpenCart expose généralement model dans les modèles de produit, tandis que le SKU peut nécessiter un travail de contrôleur/extension selon la version et le thème. Choisissez une valeur et utilisez-la de manière cohérente en tant que ideal.house sku.
Ne modifiez pas directement les fichiers du catalogue principal. Emballez les modifications dans une extension OpenCart 4 ou conservez-les dans un thème personnalisé sous contrôle de versions.
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>
Le code produit doit être identique au ideal.house sku importé, caractère par caractère.
Rendre le conteneur de produit#
Étendez le modèle de produit actif via votre extension. Si vous associez délibérément le champ OpenCart model au ideal.house sku, placez ceci près des actions du produit :
{% if model %}
<div class="idealhouse-host">
<div
data-idealhouse-button-container
data-product-code="{{ model }}">
</div>
</div>
{% endif %}
L’échappement automatique de Twig dépend de la configuration de l’environnement ; assurez-vous que la valeur choisie est échappée pour un attribut HTML. Si vous choisissez le champ SKU réel, ajoutez cette valeur assainie aux données du modèle du contrôleur dans votre extension et affichez-la à la place de model.
Charger le SDK une seule fois#
Ajoutez une ressource JavaScript de boutique en ligne via le mécanisme d’extension/thème. Il doit créer un script avec les attributs requis :
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);
}
Stockez les deux valeurs publiques dans la configuration de l’extension et affichez-les en toute sécurité. Ne placez jamais un ideal.house Client Secret dans le JavaScript, Twig, les journaux d’extension ou le HTML mis en cache.
Options, variantes et rendu dynamique#
Les options OpenCart ne correspondent pas universellement une à une aux variantes portant un SKU. Si votre boutique utilise une extension d’options/variantes, intégrez-vous au rappel de variante résolue et au modèle de données documentés de cette extension. Remplacez l’hôte uniquement s’il fournit le code sélectionné exact :
function renderIdealhouseCode(host, productCode) {
host.replaceChildren();
const code = String(productCode || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Il s’agit de code d’adaptateur client ; il n’y a pas d’événement de variante OpenCart universel dans ce guide. Pour la recherche AJAX, les filtres de catégorie, les fenêtres contextuelles et l’aperçu rapide, affichez des conteneurs propres dans les modèles de l’extension ou appelez le pont depuis son rappel de complétion documenté. Ne copiez jamais les enfants produits par le SDK.
Importer les produits#
Exportez le OpenCart model/SKU choisi pour chaque élément visualisable et associez-le au ideal.house sku. Utilisez Téléversement de produit, puis suivez 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 appels OpenCart Admin API, les exports planifiés, les écouteurs d’événements et les webhooks sont un travail d’intégration à la charge du client.
Vérifier et supprimer#
Testez les produits simples, chaque combinaison d’options prise en charge, les codes manquants et en double, les SKU ideal.house inconnus, les pages de catégorie/recherche, l’aperçu rapide, les boutons Retour/Avant du navigateur, la mise en page mobile, les boutiques multiples, les langues/devises, le consentement et le cache/minification de production. Confirmez exactement une requête SDK et une correspondance exacte du code.
Pour supprimer, désactivez/désinstallez l’extension ou supprimez la surcharge et la ressource du thème personnalisé, actualisez les modifications/événements OpenCart, videz les caches de thème/CDN et vérifiez que la requête SDK et les conteneurs sont absents.