Mega Menu & Burger — Guida completa

Panoramica

Il modulo Mega Menu & Burger (datafireflymegamenu) sostituisce la navigazione del tuo negozio con un sistema completo e configurabile: mega menu a più colonne, menu a tendina walker ricorsivo classico e menu burger fluido su mobile. Tutto si costruisce visivamente nel back office, con il trascinamento, senza toccare una riga di codice.

Ogni menu può mostrare categorie, prodotti (con foto e prezzo), marche, pagine CMS, link personalizzati, blocchi HTML liberi o immagini promozionali, organizzati in colonne all’interno di pannelli mega. Il modulo è completamente multilingua e multinegozio, e l’elemento corrispondente alla pagina visitata viene evidenziato automaticamente.

Compatibilità

• PrestaShop 8.0 a 9.x
• PHP 7.4 a 8.x
• Negozio singolo e multinegozio
• 5 lingue incluse: FR, EN, ES, DE, IT (e traducibile senza limiti)
• Tema Classic e temi personalizzati
• Architettura PSR-4 senza dipendenza da Composer

Installazione

1. Nel back office, apri Moduli > Gestore moduli.
2. Fai clic su Carica un modulo e seleziona il file datafireflymegamenu.zip.
3. Una volta installato, fai clic su Configura.

Primi passi

1. Apri la configurazione del modulo. A sinistra, l’elenco I miei menu e le Impostazioni del menu; a destra, la Struttura del menu.
2. Fai clic su Nuovo menu, dagli un nome (per lingua), scegli il suo hook di visualizzazione e il suo layout, poi salva.
3. Nell’area Struttura del menu, fai clic su Aggiungi elemento radice e scegli il suo tipo.
4. Trascina gli elementi per riordinarli o annidarli. Le posizioni vengono salvate automaticamente.

Impostazioni del menu

Il pannello Impostazioni del menu controlla il comportamento globale di un menu:

• Nome del menu: etichetta interna, traducibile per lingua.
• Hook di visualizzazione: posizione in cui il menu viene renderizzato (vedi la sezione Visualizzazione e hook).
• Layout: Mega menu (pannelli a colonne) o Tendina classica (walker ricorsivo).
• Apertura: i sottomenu si aprono al passaggio del mouse o al clic. Al passaggio del mouse, un breve ritardo di grazia alla chiusura evita lo sfarfallio nei movimenti in diagonale.
• Breakpoint mobile (px): larghezza sotto la quale il menu passa alla modalità mobile/burger (991 px di default).
• Larghezza massima (px): centra la barra sulla larghezza scelta per allinearla al contenitore del tema (es. 1140 px). 0 = tutta larghezza.
• Barra fissa (sticky): il menu resta fissato in alto durante lo scorrimento.
• Pannelli mega a tutta larghezza: i pannelli mega si estendono su tutta la larghezza della barra.
• Menu burger su mobile: attiva il menu burger sotto il breakpoint.
• Attivato: mostra o nasconde il menu sul front office.
• Negozi (multinegozio): seleziona i negozi in cui il menu viene mostrato.

Costruire l’albero (trascinamento)

La struttura di un menu si costruisce nell’area Struttura del menu. Ogni riga rappresenta un elemento, con una maniglia di trascinamento, una pillola che ne indica il tipo e pulsanti di azione.

• Riordinare: afferra la maniglia e sposta l’elemento verticalmente.
• Annidare: rilascia un elemento dentro un altro per renderlo un sottoelemento (annidamento illimitato).
• Aggiungi sottoelemento: pulsante dedicato su ogni riga.
• Modifica / Elimina: icone su ogni riga. L’eliminazione di un elemento elimina anche i suoi sottoelementi.

Tipi di elementi

Ogni elemento ha un tipo che ne determina il contenuto e il link. La finestra di modifica adatta automaticamente i campi disponibili al tipo scelto:

• Link personalizzato: un URL libero, traducibile per lingua.
• Categoria: link a una categoria del negozio, con immagine e contatore prodotti opzionali.
• Albero categorie (auto): genera automaticamente le sottocategorie (vedi sezione dedicata).
• Prodotto: link a una scheda prodotto, con foto di copertina e prezzo opzionali.
• Marca: link a una marca; Tutte le marche: link alla pagina delle marche.
• Fornitore: link a un fornitore.
• Pagina CMS e Categoria CMS: link ai tuoi contenuti editoriali.
• Blocco HTML / CMS: contenuto HTML libero, ideale per una promo o un testo arricchito.
• Immagine / promo: un’immagine cliccabile (con URL).
• Etichetta: un semplice titolo non cliccabile, utile come intestazione di colonna.
• Separatore: una linea di separazione — orizzontale nei pannelli a tendina e mega, verticale tra gli elementi della barra.

Per ogni elemento puoi anche definire: un’etichetta, un badge colorato (testo + colore), un’icona Material, una classe CSS personalizzata, l’apertura in una nuova scheda e la visibilità per dispositivo (mobile, tablet, desktop).

Opzioni di visualizzazione: immagini, prezzi e contatori

A seconda del tipo scelto, la finestra di modifica offre un blocco Opzioni di visualizzazione:

• Mostra l’immagine (categoria, albero, prodotto): mostra l’immagine della categoria o la foto di copertina del prodotto in miniatura nel menu. Deselezionala per un menu 100 % testo. Un’immagine caricata manualmente sull’elemento ha sempre la priorità.
• Mostra il prezzo (prodotto): mostra il prezzo del prodotto, formattato secondo la valuta e la lingua del visitatore, a destra dell’etichetta.
• Mostra il contatore prodotti (categoria, albero): mostra in una pillola il numero di prodotti attivi della categoria, sottocategorie incluse.
• Aggiungi un link «Vedi tutto» (albero): aggiunge alla fine dell’elenco un link alla categoria radice dell’albero.

Mega menu: colonne, immagini e blocchi HTML

Per trasformare un sottomenu in pannello mega, apri l’elemento padre e imposta Visualizzazione del sottomenu su Mega panel (colonne). Definisci poi il numero di colonne.

Ogni figlio diretto del padre diventa allora una colonna del pannello. Puoi regolare la larghezza di ogni colonna tramite il suo campo Larghezza colonna (span), e inserirvi sottolink, un blocco HTML o un’immagine promozionale.

Albero categorie automatico

Il tipo Albero categorie (auto) evita qualsiasi inserimento manuale: genera da solo le sue sottocategorie a partire da una categoria radice, fino al livello definito dal campo Sottolivelli.

Le sue Opzioni di visualizzazione permettono di attivare o meno le immagini delle categorie (miniature), il contatore prodotti per categoria e un link «Vedi tutto» che punta alla categoria radice, aggiunto alla fine dell’elenco.

Associa questo tipo a una visualizzazione Mega panel per ottenere, in pochi secondi, un mega menu «Negozio» completo e sempre sincronizzato con il tuo catalogo.

Multilingua e multinegozio

L’etichetta, l’URL personalizzato, il badge e il contenuto HTML di ogni elemento sono traducibili tramite le schede di lingua della finestra di modifica. Anche il nome del menu è multilingua.

In multinegozio, ogni menu viene associato a uno o più negozi dalle sue impostazioni. Uno stesso menu può quindi essere mostrato solo su alcuni negozi.

Visualizzazione, hook e posizione

Un menu viene mostrato tramite l’hook scelto nelle sue impostazioni. Gli hook supportati sono:

• displayNav2 — barra di navigazione principale (default)
• displayTop — parte superiore della pagina, accanto al logo e alla barra di ricerca
• displayNavFullWidth — banda a tutta larghezza
• displayFooter — piè di pagina
• displayLeftColumn e displayRightColumn — colonne laterali

Su displayTop, la barra si adatta automaticamente alla larghezza del suo contenuto per convivere con il logo e la barra di ricerca del tema sulla stessa riga; i pannelli mega a tutta larghezza vi vengono centrati sullo schermo.

Pagina attiva e navigazione

L’elemento di menu corrispondente alla pagina visitata — e il suo elemento radice — ricevono automaticamente la classe is-active e vengono evidenziati secondo lo stile hover del menu. Il rilevamento avviene nel browser (corrispondenza esatta dell’URL, poi migliore corrispondenza di sezione), il che resta perfettamente compatibile con la cache di rendering.

Modalità mobile e menu burger

Sotto il breakpoint definito, il menu passa automaticamente alla modalità mobile. Se l’opzione Menu burger su mobile è attiva, la navigazione assume la forma di un menu burger: pannello scorrevole (slide-in), sottomenu a fisarmonica, sfondo oscurato (backdrop) e blocco dello scorrimento della pagina.

Il modulo rispetta la preferenza di sistema movimento ridotto (prefers-reduced-motion) disattivando le animazioni per gli utenti interessati.

Prestazioni e cache

Il rendering di ogni menu è messo in cache da Smarty, con una chiave che tiene conto del menu, della lingua, del negozio, della valuta e del gruppo cliente. I menu vengono così mostrati senza ricalcolo a ogni pagina.

La cache viene invalidata automaticamente quando una categoria, una pagina CMS o una marca viene aggiunta, modificata o eliminata, così come a ogni salvataggio di un menu o di un elemento nel back office. Alberi automatici, contatori prodotti e prezzi restano quindi sincronizzati con il tuo catalogo.

FAQ e risoluzione dei problemi

Il menu non appare sul front office

Verifica che il menu sia attivato, che sia associato al negozio giusto e che il suo hook corrisponda a una posizione realmente mostrata dal tuo tema. Poi svuota la cache di PrestaShop e ricarica in navigazione privata.

L’hook scelto non appare nel mio tema

Non tutti i temi implementano tutti gli hook. Scegli un hook realmente presente nel tuo tema (spesso displayNav2 o displayTop), oppure innesta il modulo su un hook personalizzato tramite la pagina Posizioni.

Il mio mega menu non mostra colonne

Apri l’elemento padre e imposta Visualizzazione del sottomenu su Mega panel (colonne), definisci il numero di colonne e verifica che esistano elementi figli: ogni figlio diretto diventa una colonna.

Le immagini di categorie o prodotti non vengono mostrate

Verifica che la casella Mostra l’immagine sia selezionata nelle Opzioni di visualizzazione dell’elemento, che la categoria abbia davvero un’immagine (o il prodotto una foto di copertina), poi svuota la cache. Per un menu senza immagini, deseleziona semplicemente questa opzione.

Il menu va a capo o sposta la barra di ricerca (displayTop)

Dalla versione 1.2.1, la barra si adatta al suo contenuto su displayTop. Se il problema persiste dopo l’aggiornamento, svuota la cache di PrestaShop: l’HTML in cache deve essere rigenerato con le nuove classi.

Le modifiche non appaiono immediatamente

Poiché il rendering è in cache, svuota la cache di PrestaShop dopo una modifica manuale. Le modifiche di categorie, pagine CMS, marche, menu ed elementi invalidano la cache automaticamente.

È compatibile con PrestaShop 9?

Sì. Il modulo è compatibile con PrestaShop 8 e 9, in multinegozio e multilingua, e gestisce in modo nativo le differenze tecniche tra le due versioni. I prezzi mostrati nel menu utilizzano il formattatore di locale di PrestaShop 9 con ripiego automatico su PrestaShop 8.