Todo lo que querrías saber antes de instalar.
Una mirada detallada a cómo funciona Módulo Slider Página de Inicio PrestaShop 8/9: Banners Rápidos WebP, por qué lo construimos así y la lógica detrás de las características anteriores.
Una rejilla de hero, no un carrusel más
Los módulos de slider clásicos muestran una imagen tras otra y ahí se quedan. Este reproduce la estructura de inicio de los grandes sitios de e-commerce: un slider principal que ocupa tres cuartos del ancho, dos banners apilados a su derecha (catálogo, envío, servicio) y dos banners promocionales anchos debajo (marcas, ofertas del momento). En móvil la rejilla se apila limpiamente en una columna. Cada zona se rellena desde la misma pestaña del back office, con vista previa de las imágenes colocadas y sus dimensiones.
Construido para los Core Web Vitals
Un slider es casi siempre el elemento LCP de una página de inicio, y ahí es donde fallan la mayoría de los módulos. Aquí, cada imagen se redimensiona al ancho máximo de su zona y se convierte a WebP al subirla. La primera diapositiva se anuncia al navegador con una etiqueta link rel preload con fetchpriority high, colocada en el head: empieza a cargarse antes incluso de que el CSS se interprete. Todas las demás imágenes van en lazy loading con decodificación asíncrona, y los atributos width y height guardados en base de datos eliminan cualquier salto de maquetación. El JavaScript del slider pesa unos 3 KB, vanilla, cargado en defer, sin ninguna librería.
Planifica tus campañas, el módulo se ocupa del resto
Cada banner acepta una fecha de inicio y una fecha de fin, al día o a la hora. Tu operación de Navidad se prepara en noviembre, se publica el 1 de diciembre a medianoche y desaparece la mañana del 26, sin que nadie entre en el back office. La caché del módulo se regenera automáticamente para seguir el calendario, y cualquier guardado en el back office la vacía al instante.
El móvil tratado como un canal real, no como una pantalla encogida
Un visual panorámico de 1400 píxeles resulta ilegible reducido en la pantalla de un teléfono. Por eso cada diapositiva acepta una imagen móvil dedicada, encuadrada en vertical, servida por debajo de 768 px mediante el elemento picture. La precarga acompaña: dos etiquetas preload con atributos media, cada dispositivo descarga solo su variante. Y si una zona no tiene sentido en móvil, un interruptor en la configuración la corta por completo: sus imágenes pasan a lazy y el navegador nunca las solicita. Son kilobytes realmente ahorrados, no simplemente ocultados.
Limpio también en el servidor
El renderizado del hero se cachea en Smarty por idioma y por tienda: en régimen normal, mostrar las cinco zonas no cuesta ninguna consulta SQL. Cuando la caché se regenera, una sola consulta agrupada recupera todos los banners. El CSS y el JS se registran solo en el controlador de inicio, el resto de la tienda no carga ni un byte. El módulo sigue los estándares de PrestaShop: ObjectModel, controlador de administración dedicado, multitienda y multiidioma nativos, desinstalación limpia.
No hay valoraciones aún.