Tutto quello che vorresti sapere prima di installare.
Uno sguardo dettagliato su come funziona Modulo Slider Homepage PrestaShop 8/9: Banner Veloci WebP, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.
Una griglia di hero, non l'ennesimo carosello
I moduli slider classici mostrano un'immagine dopo l'altra e si fermano lì. Questo riproduce la struttura di homepage dei grandi siti e-commerce: uno slider principale che occupa tre quarti della larghezza, due banner impilati alla sua destra (catalogo, spedizione, servizio) e due banner promozionali larghi sotto (marchi, offerte del momento). Su mobile la griglia si impila ordinatamente in una colonna. Ogni zona si riempie dalla stessa scheda del back office, con anteprima delle immagini in posizione e le loro dimensioni.
Costruito per i Core Web Vitals
Uno slider è quasi sempre l'elemento LCP di una homepage, ed è lì che la maggior parte dei moduli fallisce. Qui ogni immagine viene ridimensionata alla larghezza massima della sua zona e convertita in WebP al caricamento. La prima slide viene annunciata al browser con un tag link rel preload con fetchpriority high, posizionato nell'head: inizia a caricarsi prima ancora che il CSS venga interpretato. Tutte le altre immagini sono in lazy loading con decodifica asincrona, e gli attributi width e height salvati nel database eliminano ogni spostamento di layout. Il JavaScript dello slider pesa circa 3 KB, vanilla, caricato in defer, senza alcuna libreria.
Pianifica le campagne, al resto pensa il modulo
Ogni banner accetta una data di inizio e una di fine, al giorno o all'ora. La tua operazione di Natale si prepara a novembre, va online il 1° dicembre a mezzanotte e sparisce la mattina del 26, senza che nessuno acceda al back office. La cache del modulo si rigenera automaticamente per seguire il calendario, e ogni salvataggio nel back office la svuota all'istante.
Il mobile trattato come un canale vero, non come uno schermo rimpicciolito
Un visual panoramico da 1400 pixel è illeggibile ridotto sullo schermo di un telefono. Ogni slide accetta quindi un'immagine mobile dedicata, inquadrata in verticale, servita sotto i 768 px tramite l'elemento picture. Il preload segue: due tag preload con attributi media, ogni dispositivo scarica solo la propria variante. E se una zona non ha senso su mobile, un interruttore nella configurazione la taglia del tutto: le sue immagini passano in lazy e il browser non le richiede mai. Sono kilobyte davvero risparmiati, non semplicemente nascosti.
Pulito anche lato server
Il rendering del hero è in cache Smarty per lingua e per negozio: a regime, mostrare le cinque zone non costa nessuna query SQL. Quando la cache si rigenera, una sola query raggruppata recupera tutti i banner. CSS e JS vengono registrati solo sul controller della homepage, il resto del negozio non ne carica un byte. Il modulo rispetta gli standard PrestaShop: ObjectModel, controller di amministrazione dedicato, multinegozio e multilingua nativi, disinstallazione pulita.
Ancora non ci sono recensioni.