Installer la visionneuse 3D de Complete sur WooCommerce

Avant de commencer

Dans le Complete Dashboard, ouvrez « Mes produits », choisissez la pièce et copiez le code d’intégration :

<iframe src="https://www.completemagazine.com.br/ar/CODE-DU-PRODUIT" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

Pas à pas

1. 01

   Ouvrez le produit

   Dans l’administration de WordPress, allez dans Produits et ouvrez le produit qui doit recevoir la 3D.

2. 02

   Passez l’éditeur en mode code

   Dans la description du produit, quittez l’onglet Visuel pour l’onglet Texte. En mode Visuel, l’éditeur peut modifier le code au moment du collage.

3. 03

   Collez le code

   Collez le code d’intégration à l’endroit où la visionneuse doit apparaître. Si vous la voulez près du prix, utilisez la description courte du produit, que la plupart des thèmes affichent à côté de la galerie.

4. 04

   Mettez à jour et vérifiez

   Cliquez sur Mettre à jour, ouvrez la page du produit sur ordinateur et sur téléphone, puis touchez le bouton de réalité augmentée pour vérifier que la caméra s’ouvre.

La largeur du code suit la colonne dans laquelle il est collé, et la hauteur se règle dans le code lui-même, en modifiant la valeur de height. Dans la description courte, souvent une colonne étroite à côté des photos, une hauteur plus faible laisse le prix et le bouton d’achat visibles sans défiler.

Le droit qui retire l’iframe

WordPress ne conserve les iframes dans la description que si la personne qui enregistre le produit dispose du droit de publier du HTML non filtré. Dans une boutique classique, les administrateurs ont ce droit ; d’autres rôles peuvent ne pas l’avoir, et sur les installations multisites il est en général restreint. Lorsque ce droit manque, le code est retiré à l’enregistrement, sans avertissement : la description revient sans la visionneuse, et le reste du texte reste intact.

Si cela arrive, demandez à un administrateur de la boutique de coller le code, ou d’ajuster le droit du rôle chargé des produits. Des extensions de sécurité peuvent aussi filtrer les iframes ; dans ce cas, le problème ne vient pas de l’adresse de Complete, mais de la règle générale de l’extension, qui doit autoriser les iframes dans la description des produits.

Pour l’ajouter à tous les produits

Avec beaucoup de produits, coller le code dans chaque description devient fastidieux. La personne qui développe la boutique peut alors créer un champ personnalisé sur le produit pour stocker uniquement le code de la pièce, la partie qui suit /ar/, et un fragment dans le thème qui construit l’iframe près de la galerie dès que le champ est rempli. L’adresse, la largeur et les autorisations doivent être les mêmes que dans le code du Dashboard.

Si quelque chose ne s’affiche pas

Si la visionneuse disparaît après l’enregistrement, c’est le droit décrit plus haut. Si elle apparaît vide, vérifiez que le code a été collé en entier. Si la pièce tourne mais que la réalité augmentée ne s’ouvre pas, vérifiez l’attribut allow et testez sur le téléphone lui-même. Les extensions de cache peuvent afficher l’ancienne version de la page pendant un moment ; videz le cache avant de conclure que cela ne fonctionne pas.