Vista de Producto 360° (df360spin) — Documentación
Instalar, configurar y alimentar el visor de producto 360° df360spin: preparación de las imágenes spin, ajustes globales, creación de una secuencia y buenas prácticas de fotografía.
Presentación
Vista de Producto 360° (df360spin) añade a tus fichas de producto un visor interactivo que reconstruye una rotación completa del artículo a partir de una simple secuencia de imágenes. El visitante arrastra el producto con el ratón o el dedo para girarlo, con reproducción automática, pantalla completa, contador de imágenes y navegación con teclado. El módulo no sobrescribe ninguna plantilla: se inserta mediante un hook de visualización que tú eliges.
Una vista 360° no es un modelo 3D: es una serie de fotos tomadas alrededor del producto. La calidad del resultado depende ante todo de la regularidad de tu sesión de fotos.
Preparar las imágenes
Fotografía el producto en un plato giratorio tomando un número regular de vistas igualmente espaciadas, con el mismo encuadre e iluminación. Gira el plato un ángulo constante entre cada toma (por ejemplo 10° para 36 imágenes, es decir 360° ÷ 36).
Número de imágenes recomendado
- 24 imágenes (15° por paso): rotación correcta, secuencia ligera.
- 36 imágenes (10° por paso): buen equilibrio entre fluidez y peso, recomendado en la mayoría de los casos.
- 72 imágenes (5° por paso): rotación muy fluida para productos de alto valor, secuencia más pesada.
El módulo acepta hasta 120 fotogramas por secuencia. Por debajo de 24 imágenes, la rotación parece entrecortada.
Nombre y formato
Nombra los archivos en orden de rotación, con ceros a la izquierda para garantizar el orden correcto: frame_01.jpg, frame_02.jpg, … El módulo ordena automáticamente las imágenes por nombre de archivo al importar. Exporta en JPG, PNG o WebP a un tamaño coherente. Las imágenes más anchas que la anchura máxima configurada se redimensionan automáticamente en el servidor.
Un fondo neutro y uniforme (blanco o gris claro) y una iluminación fija dan la rotación más limpia. Bloquea la exposición y el balance de blancos de la cámara para evitar variaciones de brillo de una imagen a otra.
Instalación
- En el back office, abre Módulos > Gestor de módulos, haz clic en Subir un módulo y selecciona el archivo ZIP
df360spin. - Una vez instalado, haz clic en Configurar para ajustar las opciones globales.
- Aparece una nueva pestaña Vistas 360° Spin en Catálogo para gestionar tus secuencias.
Ajustes globales
Desde la página de configuración del módulo, defines el comportamiento por defecto de todos los visores:
- Posición de visualización: debajo de las miniaturas del producto (recomendado), en el bloque de información adicional o en el pie de la ficha de producto.
- Reproducción automática por defecto: inicia la rotación continua al cargar. Puede sobrescribirse secuencia por secuencia.
- Velocidad de reproducción (ms por imagen): tiempo que se muestra cada imagen en reproducción automática. Cuanto menor es el valor, más rápida es la rotación. A modo orientativo, 60 ms sobre 36 imágenes dan una vuelta completa en unos 2 segundos.
- Sensibilidad de arrastre: número de píxeles de arrastre necesarios para avanzar un fotograma. Un valor bajo hace la rotación más reactiva.
- Anchura máxima de los fotogramas (px): más allá de esta anchura, las imágenes importadas se redimensionan automáticamente.
- Lazy loading: carga las imágenes solo cuando el visor entra en la zona visible de la pantalla.
Crear una secuencia 360°
- Abre Catálogo > Vistas 360° Spin y luego haz clic en Añadir una secuencia 360°.
- En el campo Producto, escribe el nombre, la referencia o el identificador del producto: aparece una lista de sugerencias, selecciona el producto correcto.
- Deja la secuencia activa y elige el modo de reproducción automática (usar el ajuste global, activado o desactivado).
- Guarda: aparece el panel de gestión de fotogramas.
Un producto solo puede tener una secuencia por tienda. En multitienda, cada tienda gestiona su propia secuencia para el mismo producto.
Importar y ordenar los fotogramas
- Arrastra y suelta tus imágenes en la zona de depósito, o haz clic para seleccionarlas. Puedes enviar varias a la vez.
- Las imágenes se suben por lotes con una barra de progreso y luego se ordenan por nombre de archivo.
- Reordénalas arrastrando las miniaturas; el nuevo orden se guarda automáticamente.
- Pasa el ratón sobre una miniatura y haz clic en la cruz roja para eliminar una imagen.
- Haz clic en Vista previa de la rotación para reproducir la secuencia directamente en el back office antes de publicar.
Experiencia del cliente
En la ficha de producto, el visitante arrastra el producto para girarlo en ambos sentidos, con el ratón o el dedo, con una inercia al final del gesto. La barra de control ofrece un botón de reproducción / pausa, un contador de imágenes y un botón de pantalla completa. Con el teclado, las flechas izquierda y derecha avanzan fotograma a fotograma y la barra espaciadora inicia o pausa la rotación. Se respeta la preferencia del sistema de movimiento reducido: la reproducción automática no se inicia si el usuario la ha desactivado en su sistema.
Resolución de problemas
El visor no aparece
Comprueba que la secuencia está activa, que contiene al menos dos imágenes y que la posición de visualización elegida en los ajustes corresponde a un hook presente en tu tema. El módulo apunta a los temas basados en classic.
La rotación es entrecortada
Aumenta el número de imágenes de la secuencia (apunta a 36 o más) y comprueba la regularidad del ángulo entre cada toma.
Las imágenes tardan en cargar
Deja el lazy loading activado, reduce la anchura máxima de los fotogramas en los ajustes y prioriza el formato WebP al exportar.
Compatibilidad
- PrestaShop 8.0 a 9.x, tema classic y temas hijos.
- Multitienda: una secuencia por producto y por tienda.
- Pantalla táctil y ratón, pantalla completa del navegador.
- Vanilla JS sin jQuery, sin override de plantilla.