Imagen al Pasar el Ratón e Insignias Automáticas — Guía de configuración
Instala y configura la imagen al pasar el ratón y las insignias automáticas Nuevo, Oferta y Stock bajo.
Esta guía explica cómo instalar y configurar el módulo Imagen al Pasar el Ratón e Insignias Automáticas para PrestaShop 8 y 9. El módulo muestra la segunda imagen del producto al pasar el ratón en los listados y aplica automáticamente insignias Nuevo, Oferta y Stock bajo según las reglas que definas, sin sobrescribir tu tema.
Instalación
La instalación funciona como en cualquier módulo de PrestaShop:
- Desde el back office, ve a Módulos > Gestor de módulos.
- Haz clic en Subir un módulo y suelta el archivo ZIP del módulo.
- Una vez completada la instalación, haz clic en Configurar para abrir la página de ajustes.
El módulo registra el hook actionFrontControllerSetMedia y carga sus recursos (CSS y JavaScript) solo en las páginas de listado y en la página de producto. No se sobrescribe ningún archivo de plantilla.
Ajustes de la imagen al pasar el ratón
El primer bloque de configuración controla el cambio de imagen al pasar el ratón:
- Mostrar la segunda imagen al pasar el ratón: activa o desactiva el efecto. Los productos con una sola imagen se omiten automáticamente.
- Efecto de transición: Fundido, Fundido + zoom o Instantáneo.
- Posición de las insignias: la esquina donde aparecen las insignias (arriba izquierda, arriba derecha, abajo izquierda, abajo derecha). Este ajuste es común a todas las insignias.
La imagen de hover es la segunda imagen del producto según el orden de posición definido en la pestaña Imágenes de la ficha de producto. Para cambiar la imagen que se muestra al pasar el ratón, simplemente reordena las imágenes del producto.
Las tres insignias automáticas
Cada insignia se puede activar de forma independiente, con su propia etiqueta multiidioma, color de fondo y color de texto.
Insignia «Nuevo»
Se muestra durante un número de días configurable tras la fecha de creación del producto. El valor por defecto reutiliza el ajuste de PrestaShop PS_NB_DAYS_NEW_PRODUCT. Define la duración deseada en el campo Producto considerado nuevo durante (días).
Insignia «Oferta»
Aparece cuando un producto está marcado como «En oferta» o cuando hay un precio específico con reducción activo para el contexto del visitante (tienda, moneda, país, grupo de clientes y fechas de validez). La opción Mostrar el porcentaje de descuento reemplaza la etiqueta por el valor, por ejemplo -20 %, cuando la reducción es porcentual.
Insignia «Stock bajo»
Aparece cuando la cantidad disponible del producto es estrictamente mayor que 0 e inferior o igual al umbral de stock bajo que definas. La cantidad se lee de la tabla stock_available con resolución multitienda (la tienda actual tiene prioridad sobre el grupo de tiendas).
Etiquetas multiidioma
Las etiquetas Nuevo, Oferta y Stock bajo se incluyen por defecto en francés, inglés, español, alemán e italiano. Cada etiqueta es editable idioma por idioma desde la página de configuración: selecciona el idioma en el selector del campo y luego introduce el texto deseado.
Rendimiento y compatibilidad
- Una única llamada AJAX agrupada por página obtiene los datos de todos los productos visibles (hasta 120 productos por lote).
- La imagen de hover se carga en lazy load, solo al primer paso del ratón.
- El script es JavaScript vanilla, sin dependencia de jQuery.
- El módulo detecta las miniaturas de producto en JavaScript: es compatible con el tema classic y los temas hijos, y se readapta automáticamente tras la navegación por facetas y la paginación AJAX.
- En móvil táctil, el cambio de imagen al pasar el ratón se desactiva automáticamente.
Resolución de problemas
El hover no muestra una segunda imagen. Comprueba que el producto tenga al menos dos imágenes en la pestaña Imágenes de su ficha, y que la opción de imagen al pasar el ratón esté activada.
Una insignia no aparece. Asegúrate de que la insignia esté activada, que su etiqueta no esté vacía para el idioma actual, y que se cumpla la condición (producto reciente, precio específico activo, o cantidad por debajo del umbral).
No se muestra nada tras filtrar. El módulo se readapta tras la navegación por facetas; si tu tema usa un mecanismo de renderizado personalizado, vacía la caché de PrestaShop (Parámetros avanzados > Rendimiento) tras la instalación.