Installer la visionneuse 3D de Complete sur VTEX

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>

La partie qui suit /ar/ est le code de cette pièce. C’est elle qui identifie le produit dans la visionneuse.

Méthode 1 : dans la description du produit

1. 01

   Ouvrez le produit dans le catalogue

   Dans l’interface d’administration de VTEX, allez dans le catalogue et ouvrez le produit qui doit recevoir la 3D.

2. 02

   Collez le code dans la description

   Le champ de description du produit accepte le HTML. Collez le code d’intégration à l’endroit où la visionneuse doit apparaître.

3. 03

   Enregistrez et vérifiez dans la boutique

   Enregistrez, attendez la mise à jour du catalogue et ouvrez la page du produit sur ordinateur et sur téléphone.

Tous les thèmes VTEX n’affichent pas le HTML de la description tel qu’il a été saisi. Certains font passer la description par un filtre qui retire les iframes, et la visionneuse n’apparaît tout simplement pas, sans message d’erreur. C’est pourquoi la vérification dans la boutique, après l’enregistrement, n’a rien de facultatif.

Méthode 2 : un bloc dans le thème

Pour l’ensemble du catalogue, la voie la plus solide consiste à faire lire au thème le code de la pièce dans un champ du produit, puis à construire la visionneuse près de la galerie. Sur VTEX, on procède en général ainsi :

1. 01

   Créez une spécification de produit

   Dans le catalogue, créez un champ de spécification de type texte, par exemple « Complete 3D », dans le groupe de spécifications de la catégorie qui recevra les pièces.

2. 02

   Remplissez-le pour chaque produit

   Collez dans le champ uniquement le code de la pièce, la partie qui suit /ar/ dans le code d’intégration.

3. 03

   Demandez le bloc à la personne qui gère le thème

   La personne qui développe la boutique crée, sur la fiche produit, un bloc qui lit cette spécification et construit l’iframe avec la même adresse, la même largeur et les mêmes autorisations que le code du Dashboard. Quand le champ est vide, le bloc ne s’affiche pas.

4. 04

   Testez avant de publier

   Le test se fait dans un environnement de développement du thème, sur un produit dont le champ est rempli et sur un autre dont il est vide, avant de mettre la modification en ligne.

Le détail qu’on oublie souvent, c’est l’attribut allow de l’iframe. Sans « xr-spatial-tracking; fullscreen; camera », la pièce tourne sur la page, mais le téléphone n’ouvre pas la réalité augmentée. Mieux vaut transmettre le code du Dashboard en entier à la personne qui développera le bloc, et pas seulement l’adresse.

Si quelque chose ne s’affiche pas

Si la visionneuse n’apparaît pas par la description, la cause probable est le filtre HTML du thème, et il faut alors passer par le bloc. Si elle apparaît vide, vérifiez que le code de la pièce est complet. Si la pièce tourne mais que la réalité augmentée ne s’ouvre pas, vérifiez les autorisations de l’iframe et testez sur le téléphone lui-même, hors de l’éditeur.