# 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…

- Página: <https://www.datafirefly.com/es/documentation/homepage-slider-banners-prestashop/>
- Idioma: es
- Actualizado el: 2026-09-29
- Otros idiomas: [fr](https://www.datafirefly.com/documentation/homepage-slider-banners-prestashop/index.md), [en](https://www.datafirefly.com/en/documentation/homepage-slider-banners-prestashop/index.md), [de](https://www.datafirefly.com/de/documentation/homepage-slider-banners-prestashop/index.md), [it](https://www.datafirefly.com/it/documentation/homepage-slider-banners-prestashop/index.md), [pl](https://www.datafirefly.com/pl/documentation/homepage-slider-banners-prestashop/index.md), [nl](https://www.datafirefly.com/nl/documentation/homepage-slider-banners-prestashop/index.md), [pt](https://www.datafirefly.com/pt/documentation/homepage-slider-banners-prestashop/index.md)
- Índice: <https://www.datafirefly.com/es/documentation/llms.txt>

## 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.

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` / `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`. 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 900x260 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 `alt` de 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 `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.

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.