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. Funziona in tutte e cinque le zone, slider e quattro banner: utile soprattutto quando il visual desktop contiene un testo che diventa illeggibile sul telefono (ad esempio un banner largo da 900×260 px).
• Usa questa immagine per tutte le lingue: casella mostrata sopra i campi Immagine, e un’altra sopra i campi Immagine mobile, non appena il negozio ha più di una lingua. Se selezionata, resta visibile solo il campo della lingua predefinita: l’immagine caricata viene elaborata una sola volta e servita in tutte le lingue, senza file duplicati sul disco. Deselezionala per fornire un visual diverso per lingua (ad esempio con testo tradotto nell’immagine). È selezionata per impostazione predefinita su un nuovo banner, e su un banner esistente quando tutte le lingue usano già lo stesso file.
• Titolo / testo alternativo: usato come attributo alt dell’immagine, per lingua.
• Link: scegli il tipo dall’elenco: prodotto (ricerca per nome o riferimento), categoria, produttore e pagina CMS (ricerca per nome) o URL personalizzato. Gli URL di prodotto, categoria, produttore e CMS sono generati automaticamente da PrestaShop nella lingua e nel negozio del visitatore, riscrittura URL inclusa. L’URL personalizzato si inserisce per lingua e può restare vuoto per un banner senza link.
• Posizione: ordine di visualizzazione nella zona (crescente).

Invio delle immagini al salvataggio

Quando fai clic su Salva, le immagini selezionate non partono in un’unica richiesta. Ogni immagine viene prima ridotta nel browser alla larghezza massima della sua zona, poi inviata da sola in una propria richiesta AJAX ed elaborata dal server (ridimensionamento e WebP), una dopo l’altra. Un messaggio mostra l’avanzamento immagine per immagine. Quando tutte le immagini sono elaborate, il form viene salvato senza alcun file. Il server elabora quindi sempre una sola immagine alla volta, anche per un banner in 8 lingue con immagini mobile.

Se un’immagine non va a buon fine, il salvataggio si interrompe e il messaggio indica il campo e il motivo (file troppo pesante per il limite di caricamento, immagine troppo grande per la memoria PHP, formato non supportato). Correggi quel campo e salva di nuovo: le immagini già inviate non vengono ricaricate.

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.

Il salvataggio fallisce con molte immagini

Dalla versione 1.4.0 le immagini vengono caricate una alla volta e ridotte nel browser prima dell’invio, quindi questo non dovrebbe più succedere. Se compare comunque un messaggio di errore, indica il campo e la causa. Per un file troppo pesante, aumenta upload_max_filesize e post_max_size nella configurazione PHP o riduci l’immagine. Per un’immagine troppo grande per la memoria, il modulo tenta di aumentare memory_limit automaticamente; se il tuo hosting non lo consente, ridimensiona il visual sotto i 3000 px di larghezza prima del caricamento. Verifica anche che il modulo sia alla versione 1.4.0 o successiva.

L’immagine mobile di un banner non compare sul telefono

Prima della versione 1.4.1, solo le slide dello slider usavano l’immagine mobile, e i quattro banner fissi mostravano sempre l’immagine desktop. Aggiorna il modulo alla 1.4.1: l’aggiornamento svuota la cache del modulo. Svuota anche l’eventuale cache a pagina intera (LiteSpeed, Varnish, CDN), poi prova sotto i 768 px di larghezza. Nella scheda Rete degli strumenti per sviluppatori deve caricarsi il file il cui nome contiene image_mobile.

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.