Ideal House
Aller au contenu principal

Intégration WordPress#

Ajoutez le Room Visualizer ideal.house à un site WordPress en chargeant un seul script navigateur public et en rendant un conteneur dont le code produit correspond à un SKU de catalogue importé.

Statut de vérification : Documentation revue le 7 septembre 2026. Ce guide n'a pas été certifié de bout en bout sur le thème WordPress d’un client. Validez-le sur une copie de préproduction de vos versions exactes de thème et de constructeur de pages avant la publication.

Avant de charger le SDK : Ouvrez Tableau de bord → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS), et cliquez sur Enregistrer. Incluez le nom d'hôte publié et toutes les origines de prévisualisation ou de préproduction que vous utilisez ; séparez les origines multiples par des virgules. Voir étapes de configuration.

Portée et prérequis#

Ce guide couvre les sites de contenu WordPress, les thèmes classiques, les thèmes blocs et les constructeurs de pages qui permettent d'ajouter HTML. Si le site utilise des données produit WooCommerce, utilisez le guide WooCommerce pour la sélection de variante.

Préparer :

  • l'accès administrateur et, pour la méthode durable, un thème enfant ou un petit plugin spécifique au site ;
  • le Shop ID et la Publishable Key depuis le Tableau de bord ideal.house ;
  • un produit déjà importé dans ideal.house avec un sku connu ;
  • une page de préproduction où cache/minification peut être désactivée pendant les tests.

La Publishable Key est destinée au balisage navigateur. Ne placez jamais une clé Client Secret ou AI API dans du HTML WordPress.

Confirmer le contrat SDK#

L'installation minimale prise en charge comporte exactement un script SDK et un conteneur destiné au bouton généré par le 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>

data-product-code doit être égal au sku du catalogue, y compris la casse et la ponctuation. Le SDK est propriétaire du contenu du conteneur. WordPress ne fournit pas de plugin ideal.house dans ce guide.

Installer le script à l'échelle du site#

WordPress recommande de charger les scripts côté navigateur via wp_enqueue_script(). Ajoutez ce qui suit au fichier functions.php d’un thème enfant ou à un plugin spécifique au site. Le filtre ajoute les deux attributs de données requis à la balise que WordPress produit.

php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

Remplacez les deux espaces réservés. Les versions WordPress antérieures à 6.3 n'acceptent pas la forme de tableau du dernier argument wp_enqueue_script() ; passez true à la place et utilisez le filtre script_loader_tag pour ajouter async aussi.

N'installez pas à nouveau le SDK dans un bloc Code ou un gestionnaire de balises. Dans DevTools, document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length doit retourner 1.

Placer un bouton#

Dans l'éditeur de blocs, ajoutez un bloc HTML personnalisé là où le bouton doit apparaître :

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

Pour des cartes répétées, affichez le même balisage depuis le modèle de thème et échappez le code comme attribut HTML :

php
<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

Votre thème ou plugin doit fournir $idealhouse_product_code. N'utilisez pas d'ID de publication, de slug ou de titre sauf si cette valeur exacte est également le sku ideal.house importé.

Mappage produit et variante#

Créez un tableau de mappage explicite avant le lancement :

valeur WordPressvaleur ideal.houseRègle
champ personnalisé tel que idealhouse_skuskucorrespondance de chaîne exacte
une page sans variantesun produit importéun conteneur
élément de collection du constructeur de pageschamp SKU au niveau de l'élémentne jamais réutiliser un code à l'échelle de la collection

Si la page change entre les variantes, l'adaptateur client doit définir le nouveau data-product-code. Effacez l'ancien conteneur avant d'insérer le nouveau afin que l'état de visualisation obsolète ne puisse pas être réutilisé :

js
function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

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

Il s'agit de code adaptateur client. Il n'appelle pas de méthode ideal.house non documentée ni n'invente un événement WordPress ; appelez-le depuis le rappel documenté fourni par votre thème ou constructeur de pages.

Pour les filtres AJAX, le défilement infini, les fiches produit dans une fenêtre modale ou les transitions du constructeur de pages, insérez un nouveau conteneur après que le nouveau nœud produit est dans le DOM. Ne clonez pas un conteneur que le SDK a déjà peuplé. Si votre outil n'expose pas de rappel de rendu stable, ajoutez le conteneur dans son modèle d'élément afin que chaque rendu crée un balisage propre.

Après une modification de thème, purgez les caches WordPress, CDN et des plugins d'optimisation. Excluez https://sdk.ideal.house/sdk.js de la réécriture de délai/attente différée si un plugin de performance supprime ses attributs de données ou le reporte jusqu'après l'interaction.

Importer les données du catalogue#

Le contenu WordPress n'est pas synchronisé automatiquement. Exportez le champ personnalisé choisi en tant que sku et importez les enregistrements correspondants via Envoi de produits. Poursuivez avec importer des produits, statut de la tâche, liste des produits, mettre à jour des produits, supprimer un produit et erreurs et nouvelles tentatives.

Vérifier avant la publication#

  1. Ouvrez le site de préproduction dans une fenêtre de navigation privée, et non dans l'aperçu de l'éditeur WordPress.
  2. Confirmez que la requête SDK réussit et ne se produit qu'une fois.
  3. Inspectez le conteneur et comparez data-product-code caractère pour caractère avec le sku importé.
  4. Confirmez qu'un SKU importé produit une commande de visualisation utilisable et qu'un SKU inconnu n'expose pas de contrôle cassé.
  5. Testez la navigation du constructeur de pages, les filtres, Retour/Avant du navigateur, la mise en page mobile et les paramètres de consentement.
  6. Sélectionnez chaque variante prise en charge et confirmez que le conteneur est recréé avec son SKU.
  7. Vérifiez la console du navigateur et testez à nouveau avec cache/minification activés.

Supprimer l'intégration#

Supprimez la fonction d'enregistrement et le filtre script_loader_tag, puis supprimez chaque bloc data-idealhouse-button-container ou fragment de modèle. Purgez tous les caches et vérifiez que l’URL du SDK est absente de la source de la page et du panneau Réseau.

Références officielles de la plateforme#