Slider y Banners de la Página de Inicio: documentación
Instalar y configurar el módulo de slider y banners de inicio: zonas, WebP, imagen móvil, programación y rendimiento.
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
- En tu back office de PrestaShop, ve a Módulos > Gestor de módulos > Subir un módulo.
- Selecciona el archivo
dfhomebanners.zipdescargado desde tu cuenta DataFirefly. - 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.
Requisitos: PrestaShop 8.0 o superior, PHP con la extensión GD (presente en prácticamente todos los alojamientos). La función imagewebp de GD se usa para la conversión WebP; si falta, el módulo funciona igualmente con los archivos JPEG / PNG originales.
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/heightpara 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. Funciona en las cinco zonas, slider y cuatro banners: útil sobre todo cuando el visual de escritorio lleva un texto que se vuelve ilegible en el teléfono (un banner ancho de 900×260 px, por ejemplo). - Usar esta imagen para todos los idiomas: casilla que aparece encima de los campos Imagen, y otra encima de los campos Imagen móvil, en cuanto la tienda tiene más de un idioma. Marcada, solo queda visible el campo del idioma por defecto: la imagen subida se procesa una sola vez y se sirve en todos los idiomas, sin archivos duplicados en disco. Desmárcala para dar un visual distinto por idioma (por ejemplo, con texto traducido en la imagen). Viene marcada por defecto en un banner nuevo, y en un banner existente cuando todos los idiomas ya usan el mismo archivo.
- Título / texto alternativo: usado como atributo
altde la imagen, por idioma. - Enlace: elige el tipo en la lista: producto (búsqueda por nombre o referencia), categoría, fabricante y página CMS (búsqueda por nombre) o URL personalizada. Las URLs de producto, categoría, fabricante y CMS las genera PrestaShop automáticamente en el idioma y la tienda del visitante, reescritura de URL incluida. La URL personalizada se introduce por idioma y puede quedar vacía para un banner sin enlace.
- Posición: orden de visualización dentro de la zona (ascendente).
Envío de las imágenes al guardar
Al hacer clic en Guardar, las imágenes seleccionadas no se envían en una sola petición. Cada imagen se reduce primero en el navegador al ancho máximo de su zona, luego se envía sola en su propia petición AJAX y el servidor la procesa (redimensionado y WebP), una tras otra. Un mensaje muestra el progreso imagen por imagen. Cuando todas las imágenes están procesadas, el formulario se guarda sin ningún archivo. Así el servidor solo procesa una imagen a la vez, incluso para un banner en 8 idiomas con imágenes móviles.
Si una imagen falla, el guardado se detiene y el mensaje indica el campo y el motivo (archivo demasiado pesado para el límite de subida, imagen demasiado grande para la memoria de PHP, formato no admitido). Corrige ese campo y vuelve a guardar: las imágenes ya enviadas no se vuelven a subir.
Si JavaScript no está disponible, el formulario vuelve al envío clásico de todas las imágenes a la vez. Al reemplazar una imagen, el archivo anterior solo se elimina después del guardado, y solo si ningún otro idioma lo sigue usando.
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.
Como el renderizado está en caché, el módulo integra un token horario en su clave de caché: un banner programado aparece o desaparece dentro de la hora siguiente a su vencimiento, sin ninguna intervención. Cualquier guardado en el back office fuerza la regeneración inmediata.
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
headcon una etiquetalink rel="preload"confetchpriority="high". Con imagen móvil, se emiten dos etiquetas preload con atributosmedia: cada dispositivo solo precarga su variante. - CLS: los atributos
widthyheightse 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
deferal 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.
Para un LCP óptimo, apunta a un visual de slider de menos de 150 KB tras la conversión (el módulo muestra el peso obtenido). Un JPEG de origen de buena calidad basta, la conversión WebP hace el resto.
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.
El guardado falla con muchas imágenes
Desde la versión 1.4.0, las imágenes se suben una a una y se reducen en el navegador antes del envío, así que esto ya no debería ocurrir. Si aun así aparece un mensaje de error, indica el campo y la causa. Para un archivo demasiado pesado, aumenta upload_max_filesize y post_max_size en la configuración de PHP o reduce la imagen. Para una imagen demasiado grande para la memoria, el módulo intenta aumentar memory_limit automáticamente; si tu alojamiento no lo permite, redimensiona el visual por debajo de 3000 px de ancho antes de subirlo. Comprueba también que el módulo está en la versión 1.4.0 o superior.
La imagen móvil de un banner no aparece en el teléfono
Antes de la versión 1.4.1, solo las diapositivas del slider usaban la imagen móvil, y los cuatro banners fijos mostraban siempre la imagen de escritorio. Actualiza el módulo a la 1.4.1: la actualización vacía la caché del módulo. Vacía también la caché de página completa si la hay (LiteSpeed, Varnish, CDN) y prueba por debajo de 768 px de ancho. En la pestaña Red de las herramientas de desarrollo debe cargarse el archivo cuyo nombre contiene image_mobile.
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.