Banner di Categoria: guida completa

Panoramica e requisiti

Banner di Categoria inserisce visual nella griglia prodotti delle tue pagine di categoria, nella posizione che scegli. Indichi la categoria, il numero di prodotto dopo il quale deve comparire il banner e l’immagine da usare per ogni lingua. Al resto pensa il modulo, anche dopo un filtro a faccette o un cambio pagina.

• Compatibile con PrestaShop da 8.0 a 9.x, tema Classic e temi derivati.
• PHP da 7.4 a 8.3.
• Multinegozio e multilingua (fr, en, es, de, it, nl, pl, pt).
• Nessun override, nessuna modifica ai template, nessun cron.
• Il markup del banner è generato lato server da un template Smarty; il JavaScript si limita a inserirlo nel punto giusto, senza jQuery né librerie di terze parti.

Installazione

1. Scarica l’archivio datafireflycategorybanner.zip dal tuo account cliente.
2. Nel back office apri Moduli > Gestore moduli.
3. Clicca su Carica un modulo e trascina l’archivio.
4. Clicca su Configura per raggiungere l’elenco dei banner.

All’installazione il modulo crea le sue tre tabelle (banner, traduzioni, associazione negozi), crea la cartella /img/datafireflycategorybanner/ e registra i suoi hook.

Creare un banner

Dalla pagina di configurazione clicca su Aggiungi un nuovo banner. Il modulo di modifica raccoglie le impostazioni seguenti.

Targeting

• Categoria: la categoria in cui compare il banner. L’elenco riprende l’albero del negozio, con le categorie disattivate segnalate.
• Applica alle sottocategorie: estende il banner a tutte le sottocategorie della categoria scelta, a qualsiasi profondità.
• Dopo il prodotto numero: il banner viene inserito dopo questo prodotto dell’elenco. Il valore 4 colloca il banner dopo il quarto prodotto mostrato.

Aspetto e link

• Link del banner: URL di destinazione, assoluto (https://…) o che inizia con una barra (/novita). Lascia vuoto per un banner non cliccabile.
• Classe CSS: classi di griglia applicate alla cella del banner, ad esempio col-12 o col-12 col-md-6. Lascia vuoto per riprendere automaticamente le classi delle celle prodotto del tuo tema.
• CSS personalizzato: dichiarazioni applicate solo a questo banner, ad esempio border-radius: 12px; padding: 10px;.

Pianificazione e stato

• Data di inizio e Data di fine: finestra di visualizzazione, nel formato AAAA-MM-GG HH:MM:SS. Un campo vuoto significa nessun limite da quel lato.
• Attivo: mostra o sospende il banner senza eliminarlo.
• Associazione ai negozi: in multinegozio, spunta i negozi interessati.

Immagini per lingua

I campi Immagine del banner e Testo alternativo esistono per ogni lingua attiva. Le schede di lingua in cima al modulo mostrano i campi della lingua selezionata. Quando un’immagine è già presente compare un’anteprima, accompagnata da un interruttore Elimina l’immagine che riguarda solo quella lingua.

Come viene calcolata la posizione

La posizione si esprime in numero di prodotti e vale per ogni pagina dell’elenco. Un banner impostato su 4 compare dopo il quarto prodotto della pagina corrente, sia che il visitatore si trovi a pagina 1 sia a pagina 3.

Più banner possono puntare alla stessa categoria, ciascuno alla sua posizione. Quando due banner condividono la stessa posizione vengono inseriti uno dopo l’altro, nell’ordine di salvataggio. Se la posizione supera il numero di prodotti mostrati nella pagina, il banner viene semplicemente saltato per quella pagina, senza spostare gli altri.

Per impostazione predefinita il banner assume la larghezza di una cella prodotto: il modulo legge le classi di griglia del primo prodotto dell’elenco e le applica al banner. Compila il campo Classe CSS per forzare un’altra larghezza, ad esempio un banner a tutta larghezza con col-12.

Pianificare un’operazione

Imposta una data di inizio e una data di fine perché un banner compaia e sparisca da solo. È lo strumento giusto per preparare saldi, Black Friday o un’operazione di fine anno con settimane di anticipo.

• Solo data di inizio: il banner compare in quella data e resta poi visibile.
• Solo data di fine: il banner viene mostrato subito e si ferma a quella data.
• Entrambe le date: il banner è visibile solo in quella finestra.
• Nessuna data: il banner è permanente.

Coprire un intero albero

L’opzione Applica alle sottocategorie evita di ricreare lo stesso banner in ogni reparto. Impostato su una categoria padre, il banner compare in quella categoria e in tutte le sue discendenti.

La risoluzione si appoggia sull’albero annidato nativo di PrestaShop (colonne nleft e nright), quindi senza query aggiuntive per pagina. Se sposti categorie nell’albero, PrestaShop ricalcola quei valori e l’ambito si adegua da solo.

Immagini e lingue

Ogni banner accetta un visual e un testo alternativo per lingua, il che permette di adattare un messaggio o un prezzo al mercato. Se una lingua non ha ricevuto il proprio visual, il modulo mostra quello della lingua predefinita del negozio invece di nascondere il banner.

Le dimensioni dell’immagine vengono rilevate al caricamento e scritte negli attributi width e height dell’HTML, evitando lo spostamento del layout durante il caricamento. I file vengono rinominati con un suffisso casuale e archiviati in /img/datafireflycategorybanner/.

Multinegozio

Quando la funzione multinegozio è attiva, il modulo di modifica mostra un blocco Associazione ai negozi. Un banner compare solo nei negozi spuntati, e l’elenco del back office mostra soltanto i banner visibili nel contesto negozio corrente.

Se non viene spuntato alcun negozio, il modulo associa il banner al contesto corrente, così da non creare mai un banner orfano.

Filtri a faccette, ordinamento e paginazione

Su PrestaShop 8 e 9 i filtri a faccette, l’ordinamento e la paginazione ricaricano l’elenco prodotti via AJAX senza ricaricare la pagina. Il modulo ascolta l’evento updateProductList di PrestaShop, rimuove i banner precedenti e li reinserisce nelle posizioni corrette dopo ogni aggiornamento del DOM.

CSS e JavaScript vengono caricati solo sulle pagine di categoria, e soltanto quando la categoria corrente ha almeno un banner attivo e mostrabile.

Aggiornare dalla versione 1.0.0

Installa semplicemente il nuovo archivio sopra il vecchio dal gestore moduli. Lo script di aggiornamento si occupa di:

• aggiungere le colonne di ambito, pianificazione e dimensioni dell’immagine;
• creare la tabella di associazione ai negozi e riportarvi il negozio d’origine di ogni banner;
• spostare le immagini esistenti da views/img/banners/ a /img/datafireflycategorybanner/ e rilevarne le dimensioni;
• rimuovere un hook diventato inutile.

I tuoi banner, le loro posizioni e i loro visual vengono conservati.

FAQ e risoluzione dei problemi

Il banner non compare nella pagina di categoria

Verifica nell’ordine: il banner è attivo; la data odierna rientra nella finestra di pianificazione; la categoria puntata è quella consultata, oppure l’ambito alle sottocategorie è attivo; la lingua mostrata ha un’immagine, o ce l’ha la lingua predefinita; in multinegozio, il negozio corrente è spuntato. Svuota infine la cache di PrestaShop.

Il banner compare nel posto sbagliato

La posizione conta i prodotti della pagina corrente. Se il tuo elenco mostra 12 prodotti per pagina, un banner in posizione 20 non comparirà in nessuna pagina. Riduci il valore o aumenta il numero di prodotti per pagina.

Il banner rompe il layout della griglia

Svuota il campo Classe CSS perché il banner riprenda le classi delle celle prodotto del tuo tema. Se vuoi un banner a tutta larghezza, inserisci col-12. Evita di mescolare classi di sistemi di griglia diversi.

Il banner sparisce dopo un filtro

Il modulo si riaggancia all’evento updateProductList. Se il tuo tema o un modulo di filtraggio di terze parti sostituisce interamente il contenitore dell’elenco prodotti senza scatenare quell’evento, il reinserimento non può avvenire. Contatta il supporto indicando tema e modulo di filtraggio usati.

L’immagine non viene caricata

Il modulo accetta file JPG, PNG, GIF, WebP e SVG fino a 4 MB. Verifica inoltre che /img/datafireflycategorybanner/ sia scrivibile e che le direttive PHP upload_max_filesize e post_max_size siano superiori al peso del file.

Il link del banner viene rifiutato

Sono accettati solo URL che iniziano con http://, https:// o con una barra. È una protezione contro l’iniezione di indirizzi javascript: o data:.

Cosa succede alla disinstallazione?

Il modulo elimina le sue tabelle e la cartella /img/datafireflycategorybanner/ con i visual che contiene. Salva le tue immagini se prevedi di reinstallarlo in seguito.