respuesta rapida
360° en OpenCart 3/4: publicar en Studio (nombre = Model, Activo) → pegar widget.js en Design → Theme Editor → product/product.twig → data-key + data-sku Manual (AUTO solo si hay sku JSON-LD). Carga diferida y modal. Actualizar caché del tema. Probar una ficha en vivo, no la vista previa de Admin.
Las galerías de OpenCart pasan fotos fijas. Quien compra sigue sin poder girar el artículo. Puede añadir una rotación 360° fotografiada sin un módulo de OpenCart: alojar los fotogramas en Spinnify y pegar un script.
Esta guía es para OpenCart 3 y 4 (Theme Editor Twig). OpenCart 1.5 y 2.x usan archivos .tpl. El mismo fragmento widget.js funciona en la ficha de producto. No instala una extensión OpenCart extra de Spinnify.
3 pasos de las fotos a la ficha OpenCart en vivo
El trabajo es el embed: un script en la ficha de producto y luego el enlace al Model del catálogo (el campo SKU habitual).
1. Preparar en Spinnify Studio
Antes de abrir OpenCart Admin:
- Crear una cuenta en Spinnify Studio.
- Crear un producto y subir una serie de fotos (24–36 fotogramas, 4:3 para fotos de PC).
- Importante: el nombre del producto en Studio debe coincidir con el campo Model de OpenCart (importan espacios y guiones; no importan mayúsculas).
- Dejar el producto Activo. Un producto oculto no muestra el botón.
2. Añadir código en OpenCart
Dos formas de pegar el mismo fragmento de Studio. Cópielo en Instalación del widget → Mostrar código.
Método A: Theme Editor (el mejor para fichas). Design → Theme Editor → product/product.twig (OpenCart 4: catalog/view/template/product/product.twig). Pegar el script junto a la galería, guardar y actualizar la caché del tema. Theme Editor guarda una anulación en la base, no el archivo en disco. Prefiera data-sku Manual igual al Model, o data-sku="{{ product.model }}" en Twig. Si product.model está vacío, escriba el nombre de Studio a mano.
Método B: common/header.twig más AUTO (solo si existe sku JSON-LD). Esto carga el script en cada página, así que evítelo salvo que el tema ya imprima JSON-LD Product de Schema.org con sku. Prefiera la plantilla de producto.
3. Configurar el enlace
El código se ve así: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="SKU_FROM_PANEL" defer></script>
- data-key: su clave de widget de Studio. No la cambie.
- data-sku: el Model de OpenCart (Manual). AUTO solo si hay sku JSON-LD, o URL si guardó la ruta de la página en Studio.
Por qué sigue siendo rápido
Un script de terceros en OpenCart plantea dudas de PageSpeed porque la plantilla del producto ya carga galería y JS del tema. Spinnify deja el trabajo extra fuera del primer pintado: los fotogramas quedan en el CDN hasta que alguien pide girar. La galería OpenCart pinta primero; la capa 360 se abre después en un modal.
- Carga diferida: el navegador no pide el conjunto de fotogramas hasta que alguien hace clic.
- Aislamiento: el visor se abre en un modal y no sustituye la galería OpenCart en el primer pintado.
- CDN: los fotogramas van en WebP/AVIF redimensionado, no como archivos extra en el almacenamiento de imágenes de OpenCart.
Lista: ¿no aparece el botón?
Si falta el botón 3D View, recorra esta lista en una URL de producto en vivo, no en la vista previa de Admin.
- ¿Actualizó la caché del tema? Engranaje del panel admin: desactivar o vaciar la caché del tema. Extensions → Modifications → Refresh si hay OCMod. Journal tiene su propia caché.
- ¿Está en una URL de producto en vivo? La vista previa de Admin es un mal test para scripts de tienda.
- Theme Editor vs archivo: Theme Editor gana frente a FTP. Si editó product.twig en disco y no cambia nada, cierre la anulación de Theme Editor o vacíe la caché.
- ¿Coinciden los nombres? El nombre en Studio y el Model de OpenCart deben coincidir (espacios y guiones incluidos).
- ¿El producto de Studio está Activo?
- ¿Copió data-key de su cuenta?
- Un script por página: no pegue el fragmento dos veces, y no lo ponga en header.twig salvo que acepte AUTO en cada página.
¿Puedo personalizar el aspecto del botón?
Sí. El lanzador se diseña en Studio, no en el CSS del tema. Puede alinearlo con la tienda sin editar la plantilla del producto:
- Posición: derecha, izquierda o centro.
- Colores y etiqueta acordes al tema OpenCart.
- Formato: icono flotante redondo o pestaña fina.
Después OpenCart sigue sirviendo la galería. La capa 360° se abre cuando alguien la pide.
Grabar giros: guía con smartphone. Otras tiendas HTML: Tilda Zero Block. Guía completa de Spinnify.
