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

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>

Paso a paso

1. 01

   Abre el producto

   En el escritorio de WordPress, entra en Productos y abre el producto que va a tener el 3D.

2. 02

   Usa el modo de código del editor

   En la descripción del producto, cambia la pestaña Visual por la pestaña Texto. En el modo Visual, el editor puede alterar el código al pegarlo.

3. 03

   Pega el código

   Pega el código de inserción en el lugar donde debe aparecer el visor. Si prefieres que quede cerca del precio, usa la descripción corta del producto, que la mayoría de los temas muestra junto a la galería.

4. 04

   Actualiza y revisa

   Haz clic en Actualizar, abre la página del producto en la computadora y en el teléfono y toca el botón de realidad aumentada para confirmar que se abre la cámara.

El ancho del código se ajusta a la columna donde se pega, y la altura se puede cambiar en el propio código, modificando el valor de height. En la descripción corta, que suele ser una columna estrecha junto a las fotos, una altura menor deja el precio y el botón de compra a la vista sin desplazarse.

El permiso que elimina el iframe

WordPress solo conserva los iframes en la descripción cuando quien guarda el producto tiene el permiso de HTML sin filtrar. En las tiendas comunes, los administradores tienen ese permiso; otros perfiles pueden no tenerlo, y en instalaciones con varios sitios suele estar restringido. Cuando falta el permiso, el código se elimina al guardar, sin aviso: la descripción vuelve sin el visor y el resto del texto queda intacto.

Si eso ocurre, pide a un administrador de la tienda que pegue el código, o que ajuste el permiso del perfil que gestiona los productos. Los plugins de seguridad también pueden filtrar iframes; en ese caso, el problema no es la dirección de Complete, sino la regla general del plugin, que tiene que permitir iframes en la descripción de producto.

Para ponerlo en todos los productos

Con muchos productos, pegar el código en cada descripción se vuelve laborioso. En ese caso, quien desarrolla la tienda puede crear un campo personalizado en el producto para guardar solo el código de la pieza, lo que va después de /ar/, y un fragmento en el tema que arme el iframe junto a la galería siempre que el campo esté completo. La dirección, el ancho y los permisos deben ser los mismos que los del código del Dashboard.

Si algo no aparece

Si el visor desaparece después de guardar, es el permiso descrito arriba. Si aparece en blanco, revisa que el código se haya pegado completo. Si la pieza gira y la realidad aumentada no se abre, revisa el atributo allow y prueba en el propio teléfono. Los plugins de caché pueden mostrar la versión anterior de la página durante un tiempo; vacía la caché antes de concluir que no funcionó.