Slider y Banners de la Página de Inicio: documentación

Presentación

DF Home Banners muestra una rejilla de hero completa en la página de inicio de tu tienda, compuesta por cinco zonas: un slider principal (varias diapositivas), un banner lateral superior, un banner lateral inferior, un banner ancho izquierdo y un banner ancho derecho. En escritorio el slider ocupa alrededor del 75% del ancho con los dos banners laterales apilados a su derecha, y los dos banners anchos se muestran debajo. En móvil la rejilla se apila en una sola columna.

El módulo está construido para la velocidad: conversión WebP al subir, precarga de la imagen LCP, lazy loading, atributos de dimensiones contra el CLS, 3 KB de JavaScript vanilla y caché Smarty. Sin dependencias: ni Composer ni jQuery.

Instalación

1. En tu back office de PrestaShop, ve a Módulos > Gestor de módulos > Subir un módulo.
2. Selecciona el archivo dfhomebanners.zip descargado desde tu cuenta DataFirefly.
3. El módulo se instala y crea una pestaña DF Home Banners en el menú Mejorar, junto con sus tablas y la carpeta de subida de imágenes.

Configuración del módulo

La página de configuración (Módulos > DF Home Banners > Configurar) contiene:

• Retardo de autoplay del slider en milisegundos, mínimo 2000. El slider se pausa al pasar el cursor, cuando la pestaña del navegador está oculta, y respeta la preferencia del sistema prefers-reduced-motion.
• Cinco interruptores de visualización móvil, uno por zona. Una zona desactivada se oculta por debajo de 768 px y sus imágenes nunca se descargan en móvil: pasan a lazy loading, y una imagen lazy oculta no es solicitada por el navegador. Si el slider se desactiva en móvil, su precarga LCP se restringe automáticamente al escritorio.

Cada guardado de la configuración vacía la caché del módulo, el efecto es inmediato en el front office.

Gestionar los banners

La gestión se hace en la pestaña DF Home Banners del menú Mejorar. La lista muestra todos los banners con su zona, título, fechas, posición y estado, con filtros y activación en un clic.

Crear un banner

Haz clic en Añadir y rellena:

• Zona: el slider principal acepta varios banners (uno por diapositiva); cada una de las cuatro zonas fijas muestra el primer banner activo, según el orden de posiciones.
• Imagen: un campo por idioma. Formatos aceptados: JPEG, PNG, WebP. La imagen se redimensiona al ancho máximo de su zona (1400 px para el slider, 560 px para las laterales, 900 px para las anchas) y se convierte a WebP calidad 82, conservando un archivo de respaldo JPEG o PNG. Las dimensiones finales se guardan y se inyectan como atributos width / height para eliminar el CLS.
• Imagen móvil: opcional, un campo por idioma. Encuádrala en vertical; se redimensiona a 768 px, se convierte a WebP y se sirve por debajo de 768 px de viewport mediante el elemento picture. Útil sobre todo para las diapositivas del slider.
• Título / texto alternativo: usado como atributo alt de la imagen, por idioma.
• URL del enlace: por idioma, opcional.
• Posición: orden de visualización dentro de la zona (ascendente).

Programar con fechas de inicio y fin

Los dos campos de fecha son opcionales. Formato aceptado: AAAA-MM-DD o AAAA-MM-DD HH:MM:SS. Una fecha de inicio sola publica el banner a partir de ese momento; una fecha de fin sola lo retira en ese momento; ambas juntas delimitan la campaña. Campos vacíos: el banner se muestra permanentemente mientras esté activo.

Multitienda y multiidioma

En contexto multitienda, cada banner se asocia a las tiendas que elijas mediante las casillas de asociación del formulario. La imagen, la imagen móvil, el enlace y el texto alternativo se definen por idioma; un idioma sin imagen simplemente no muestra nada (el banner queda oculto en ese idioma hasta que se suba una imagen). La caché está aislada por idioma y por tienda.

Rendimiento: lo que hace el módulo

• LCP: la primera diapositiva activa del slider se anuncia en el head con una etiqueta link rel="preload" con fetchpriority="high". Con imagen móvil, se emiten dos etiquetas preload con atributos media: cada dispositivo solo precarga su variante.
• CLS: los atributos width y height se colocan en cada imagen, el espacio se reserva antes de la carga.
• Peso: salida en WebP, lazy loading en todas las imágenes salvo la LCP, decoding="async" en todas.
• JavaScript: unos 3 KB de vanilla cargados en defer al final de la página. Flechas, puntos, swipe táctil, autoplay.
• Servidor: renderizado en caché Smarty por idioma y tienda, una sola consulta SQL agrupada en la regeneración. CSS y JS registrados solo en el controlador de inicio.

Solución de problemas

Los banners no aparecen en el front office

• Comprueba que el banner está activo, que hay una imagen subida para el idioma consultado, y que la fecha actual está dentro del rango definido.
• Comprueba la asociación de tienda del banner en multitienda.
• El tema debe exponer el hook displayHome, presente en todos los temas basados en Classic. Si un módulo de slider nativo ya ocupa la zona (ps_imageslider), desactívalo para evitar el duplicado visual.

La conversión WebP no se realiza

Tu PHP probablemente no dispone de imagewebp. El módulo sirve entonces los archivos JPEG / PNG originales redimensionados. Pide a tu proveedor de alojamiento que active el soporte WebP de GD.

Un cambio no aparece de inmediato

Guarda cualquier banner o la configuración: la caché del módulo se vacía en cada escritura. Vacía también la caché Smarty global de PrestaShop si tu tienda está detrás de una caché de página completa (Varnish, LiteSpeed, CDN).

Desinstalación

La desinstalación elimina la pestaña de administración, las tablas del módulo y sus valores de configuración. Los archivos de imagen subidos permanecen en la carpeta del módulo hasta que esta se borre del disco.