Intégration PrestaShop#

Utilisez un petit module PrestaShop pour charger Room Visualizer et rendre un bouton à partir de la référence du produit ou de la combinaison actuelle.

État de vérification : documentation des modules, hooks et ressources PrestaShop 8/9 consultée le 7 septembre 2026. Aucune boutique marchand n'était disponible. L'exemple utilise des hooks documentés communs à Classic et Hummingbird, mais les thèmes tiers peuvent les déplacer ou les omettre.

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

Préparez une boutique de préproduction, un accès au développement de modules, Shop ID, Publishable Key, et des SKU importés. Décidez si le code ideal.house provient de la référence du produit de base reference ou de la référence de la combinaison sélectionnée reference. Chaque combinaison visualisable doit avoir une référence unique et non vide.

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 exactement au code sku importé de ideal.house. Les identifiants PrestaShop ne sont pas interchangeables avec les références.

Créer un point d'insertion de module#

Enregistrez displayProductAdditionalInfo pour placer du contenu sur les pages produits et actionFrontControllerSetMedia pour charger votre adaptateur local. Classic et Hummingbird documentent tous deux le hook d'affichage dans les modèles de produit et d'aperçu rapide.

php

public function install()
{
    return parent::install()
        && $this->registerHook('displayProductAdditionalInfo')
        && $this->registerHook('actionFrontControllerSetMedia');
}

public function hookActionFrontControllerSetMedia($params)
{
    $this->context->controller->registerJavascript(
        'module-' . $this->name . '-adapter',
        'modules/' . $this->name . '/views/js/adapter.js',
        array('position' => 'bottom', 'priority' => 200)
    );
}

Dans le rappel du hook d'affichage, obtenez le produit présenté, choisissez sa référence, assignez-la à Smarty et rendez un modèle de module. Échappez la valeur dans ce modèle :

smarty

<div class="idealhouse-host">
  {if $idealhouse_product_code}
    <div
      data-idealhouse-button-container
      data-product-code="{$idealhouse_product_code|escape:'html':'UTF-8'}">
    </div>
  {/if}
</div>

Ne copiez pas le code PHP abrégé comme un module de production complet : ajoutez les métadonnées de module normales, la compatibilité de version, le stockage de configuration, les vérifications de permissions et le nettoyage de désinstallation.

Charger le SDK une seule fois#

Dans adapter.js, créez l'élément SDK exact après avoir lu les deux valeurs publiques de la configuration de boutique en ligne assainie de votre module :

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 = window.idealhousePublicConfig.shopId;
  script.dataset.publishableKey = window.idealhousePublicConfig.publishableKey;
  document.head.append(script);
}

Exposez idealhousePublicConfig avec le mécanisme de définition/configuration JavaScript pris en charge par PrestaShop. N'exposez jamais de secret client Client Secret.

Changements de combinaison et pages dynamiques#

Le cycle de vie de rafraîchissement des produits du thème et les modules de combinaison tiers varient. Au point où le thème actif a résolu la combinaison sélectionnée, passez sa référence à ce pont client :

function renderIdealhouseCombination(host, reference) {
  host.replaceChildren();
  const code = String(reference || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Ne devinez pas à partir des étiquettes affichées. L'aperçu rapide est inclus dans les emplacements de hooks documentés, mais vérifiez que le thème actif rend réellement le hook. Pour les filtres AJAX ou les fragments de produits rafraîchis, laissez le hook créer un nouvel hôte ou invoquer le pont après le rappel de mise à jour documenté du thème.

Importer les données produit#

Mappez la référence produit/combinaison reference de PrestaShop sur le code sku de ideal.house. Utilisez Téléversement de produits et les guides pour importation, statut de la tâche, liste, mises à jour, suppression et erreurs/nouvelles tentatives. Tout export Webservice, cron ou synchronisation basée sur des hooks de PrestaShop relève de l'implémentation du client.

Vérifier et supprimer#

Testez un produit simple, chaque combinaison, les références manquantes/doublons, un SKU inconnu ideal.house, l'aperçu rapide, les listes, la navigation facettée, l'historique du navigateur, le mobile, les contextes de vente langue/devise, le consentement et la mise en cache de production. Confirmez une requête SDK et l'égalité exacte de la référence/SKU.

Désinstallez ou désactivez le module, assurez-vous que ses hooks/configurations/ressources sont supprimés, videz les caches Smarty et de la boutique en ligne, et vérifiez que le balisage URL du SDK et data-idealhouse-* est absent.