Slider e Banner della Homepage: documentazione

Panoramica

DF Home Banners mostra una griglia di hero completa sulla homepage del tuo negozio, composta da cinque zone: uno slider principale (più slide), un banner laterale alto, un banner laterale basso, un banner largo sinistro e un banner largo destro. Su desktop lo slider occupa circa il 75% della larghezza con i due banner laterali impilati alla sua destra, e i due banner larghi appaiono sotto. Su mobile la griglia si impila in una sola colonna.

Il modulo è costruito per la velocità: conversione WebP al caricamento, preload dell’immagine LCP, lazy loading, attributi di dimensione contro il CLS, 3 KB di JavaScript vanilla e cache Smarty. Nessuna dipendenza: né Composer né jQuery.

Installazione

1. Nel back office di PrestaShop, vai su Moduli > Gestore moduli > Carica un modulo.
2. Seleziona il file dfhomebanners.zip scaricato dal tuo account DataFirefly.
3. Il modulo si installa e crea una scheda DF Home Banners nel menu Migliora, insieme alle sue tabelle e alla cartella di caricamento delle immagini.

Configurazione del modulo

La pagina di configurazione (Moduli > DF Home Banners > Configura) contiene:

• Ritardo di autoplay dello slider in millisecondi, minimo 2000. Lo slider si mette in pausa al passaggio del mouse, quando la scheda del browser è nascosta, e rispetta la preferenza di sistema prefers-reduced-motion.
• Cinque interruttori di visualizzazione mobile, uno per zona. Una zona disattivata viene nascosta sotto i 768 px e le sue immagini non vengono mai scaricate dai visitatori mobile: passano in lazy loading, e un’immagine lazy nascosta non viene richiesta dal browser. Se lo slider è disattivato su mobile, il suo preload LCP viene automaticamente limitato al desktop.

Ogni salvataggio della configurazione svuota la cache del modulo, l’effetto è immediato sul front office.

Gestire i banner

La gestione avviene nella scheda DF Home Banners del menu Migliora. L’elenco mostra tutti i banner con zona, titolo, date, posizione e stato, con filtri e attivazione in un clic.

Creare un banner

Clicca su Aggiungi e compila:

• Zona: lo slider principale accetta più banner (uno per slide); ognuna delle quattro zone fisse mostra il primo banner attivo, secondo l’ordine delle posizioni.
• Immagine: un campo per lingua. Formati accettati: JPEG, PNG, WebP. L’immagine viene ridimensionata alla larghezza massima della sua zona (1400 px per lo slider, 560 px per le laterali, 900 px per le larghe) e convertita in WebP qualità 82, conservando un file di riserva JPEG o PNG. Le dimensioni finali vengono salvate e iniettate come attributi width / height per eliminare il CLS.
• Immagine mobile: facoltativa, un campo per lingua. Inquadrala in verticale; viene ridimensionata a 768 px, convertita in WebP e servita sotto i 768 px di viewport tramite l’elemento picture. Utile soprattutto per le slide dello slider.
• Titolo / testo alternativo: usato come attributo alt dell’immagine, per lingua.
• URL del link: per lingua, facoltativo.
• Posizione: ordine di visualizzazione nella zona (crescente).

Pianificare con date di inizio e fine

I due campi data sono facoltativi. Formato accettato: AAAA-MM-GG o AAAA-MM-GG HH:MM:SS. Una data di inizio da sola pubblica il banner da quel momento; una data di fine da sola lo ritira in quel momento; entrambe insieme delimitano la campagna. Campi vuoti: il banner resta visibile finché è attivo.

Multinegozio e multilingua

In contesto multinegozio, ogni banner si associa ai negozi scelti tramite le caselle di associazione del modulo. Immagine, immagine mobile, link e testo alternativo si definiscono per lingua; una lingua senza immagine semplicemente non mostra nulla (il banner resta nascosto in quella lingua finché non viene caricata un’immagine). La cache è isolata per lingua e per negozio.

Prestazioni: cosa fa il modulo

• LCP: la prima slide attiva dello slider viene annunciata nell’head tramite un tag link rel="preload" con fetchpriority="high". Con un’immagine mobile vengono emessi due tag preload con attributi media: ogni dispositivo precarica solo la propria variante.
• CLS: gli attributi width e height sono posti su ogni immagine, lo spazio viene riservato prima del caricamento.
• Peso: uscita in WebP, lazy loading su ogni immagine non LCP, decoding="async" ovunque.
• JavaScript: circa 3 KB di vanilla caricati in defer a fine pagina. Frecce, punti, swipe touch, autoplay.
• Server: rendering in cache Smarty per lingua e negozio, una sola query SQL raggruppata alla rigenerazione. CSS e JS registrati solo sul controller della homepage.

Risoluzione dei problemi

I banner non appaiono sul front office

• Verifica che il banner sia attivo, che ci sia un’immagine caricata per la lingua consultata, e che la data odierna rientri nell’intervallo definito.
• Verifica l’associazione negozio del banner in multinegozio.
• Il tema deve esporre l’hook displayHome, presente in tutti i temi basati su Classic. Se un modulo slider nativo occupa già l’area (ps_imageslider), disattivalo per evitare il doppione visivo.

La conversione WebP non avviene

Il tuo PHP probabilmente non dispone di imagewebp. Il modulo serve allora i file JPEG / PNG originali ridimensionati. Chiedi al tuo hosting di attivare il supporto WebP di GD.

Una modifica non appare subito

Salva un banner qualsiasi o la configurazione: la cache del modulo viene svuotata a ogni scrittura. Svuota anche la cache Smarty globale di PrestaShop se il negozio è dietro una cache di pagina completa (Varnish, LiteSpeed, CDN).

Disinstallazione

La disinstallazione rimuove la scheda di amministrazione, le tabelle del modulo e i suoi valori di configurazione. I file immagine caricati restano nella cartella del modulo finché questa non viene eliminata dal disco.