Cómo instalar el visor 3D de Complete en VTEX

Antes de empezar

En Complete Dashboard, abre “Mis productos”, elige la pieza y copia el código de inserción:

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

Lo que va después de /ar/ es el código de esa pieza. Es lo que identifica el producto en el visor.

Camino 1: en la descripción del producto

1. 01

   Abre el producto en el catálogo

   En el panel de administración de VTEX, entra en el catálogo y abre el producto que va a tener el 3D.

2. 02

   Pega el código en la descripción

   El campo de descripción del producto acepta HTML. Pega el código de inserción en el lugar donde debe aparecer el visor.

3. 03

   Guarda y revisa en la tienda

   Guarda, espera a que el catálogo se actualice y abre la página del producto en la computadora y en el teléfono.

No todos los temas de VTEX muestran el HTML de la descripción tal como se escribió. Algunos pasan la descripción por un filtro que elimina los iframes, y el visor simplemente no aparece, sin ningún mensaje de error. Por eso revisar la tienda después de guardar no es opcional.

Camino 2: un bloque en el tema

Para todo el catálogo, el camino más sólido es que el tema de la tienda lea el código de la pieza en un campo del producto y arme el visor junto a la galería. En VTEX, esto suele hacerse así:

1. 01

   Crea una especificación de producto

   En el catálogo, crea un campo de especificación de texto, por ejemplo “Complete 3D”, en el grupo de especificaciones de la categoría que va a recibir las piezas.

2. 02

   Complétalo en cada producto

   Pega en el campo solo el código de la pieza, lo que va después de /ar/ en el código de inserción.

3. 03

   Pide el bloque a quien se ocupa del tema

   Quien desarrolla la tienda crea, en la página de producto, un bloque que lee esa especificación y arma el iframe con la misma dirección, el mismo ancho y los mismos permisos que el código del Dashboard. Cuando el campo está vacío, el bloque no aparece.

4. 04

   Prueba antes de publicar

   La prueba debe hacerse en un entorno de desarrollo del tema, con un producto que tenga el campo completo y otro que no, antes de llevar el cambio a la tienda en vivo.

El detalle que suele quedar en el camino es el atributo allow del iframe. Sin “xr-spatial-tracking; fullscreen; camera”, la pieza gira en la página, pero el teléfono no abre la realidad aumentada. Conviene enviar el código completo del Dashboard a quien va a desarrollar el bloque, y no solo la dirección.

Si algo no aparece

Si el visor no aparece desde la descripción, lo más probable es el filtro de HTML del tema, y el camino pasa a ser el bloque. Si aparece en blanco, revisa que el código de la pieza esté completo. Si la pieza gira y la realidad aumentada no se abre, revisa los permisos del iframe y prueba en el propio teléfono, fuera del editor.