Layout del Menu Prodotti

Scopo: Presentare e descrivere i diversi stili predefiniti per il menu laterale (Side menu), che è lo strumento di navigazione principale per le categorie del catalogo.
Destinatari: Webmaster, sviluppatori front-end, amministratori.
Quando serve: Durante la fase di setup del sito, per scegliere lo stile del menu che meglio si integra con il design generale e l'usabilità del catalogo.

Introduzione al Menu Prodotti

Il Menu Prodotti, o "Side menu", è la barra di navigazione verticale (solitamente a sinistra) che permette ai clienti di esplorare le categorie e sottocategorie del tuo catalogo. È un elemento cruciale per l'usabilità di siti con una vasta offerta di prodotti. Il template di default offre diversi stili per questo componente.

Note

Dove si gestisce il file del Menu Prodotti?
Per cambiare lo stile del tuo menu laterale, devi intervenire sul template che lo contiene, solitamente il Layout Categorie o la Homepage Sidemenu.

1. Vai in CMS > Template > Template Grafici.

2. Seleziona il tab Layout Generale

3. Clicca sul pulsante Template Side Menu per aprire il file explorer.

4. Nel file explorer che si apre, naviga nella cartella classB (o simile) e seleziona il file .html corrispondente al layout che desideri utilizzare.

Di seguito trovi il catalogo dei menù prodotti disponibili.

Tipologie di Side Menu

Nome Menu	Descrizione	File da Utilizzare
Side menu classic	La versione base del menu. Un elenco pulito di categorie e sottocategorie.	classB_side_menu_classic.html
Side menu classic arrow	Aggiunge un'icona a freccia accanto alle categorie che contengono sottocategorie.	classB_side_menu_classic_arrow.html
Side menu classic background	Evidenzia la categoria attualmente selezionata con un colore di sfondo.	classB_side_menu_classic_background.html
Side menu classic icon	Permette di associare un'icona a ogni categoria di primo livello.	classB_side_menu_classic_icon.html
Side menu toggle	Un menu a "fisarmonica": le sottocategorie sono nascoste e appaiono al click.	classB_side_menu_toogle.html

FAQ & Esempi pratici

Ho scelto il layout Side menu toggle, ma vorrei che al caricamento della pagina una specifica categoria fosse già aperta. È possibile?

Sì, ma richiede una piccola modifica al codice JavaScript. Dovrai individuare lo script che gestisce il funzionamento del menu "toggle" (probabilmente in un file custom.js o simile) e aggiungere una funzione che, al caricamento della pagina, applichi la classe "open" o "active" alla categoria che desideri mostrare aperta di default.

Sto usando il Side menu classic icon, ma le icone non appaiono. Dove devo definirle?

Le icone non vengono assegnate automaticamente. Devi associarle a ogni categoria principale. Per farlo, vai nel modulo Catalogo Prodotti Gestione categorie. Seleziona la categoria a cui vuoi aggiungere un'icona e cerca un campo chiamato "Icona" o "Classe Icona". Lì dovrai inserire la classe CSS dell'icona che vuoi usare (es. fa fa-book se usi Font Awesome).

Le mie categorie sono ordinate alfabeticamente nel menu, ma io vorrei un ordine personalizzato. Come faccio?

L'ordine delle voci nel menu rispecchia l'ordine che hai impostato per le categorie nel back-end. Per cambiarlo, vai in Catalogo Prodotti Gestione categorie. Lì troverai un campo "Ordinamento" (o una funzionalità di drag & drop) che ti permette di definire l'ordine esatto in cui le categorie devono apparire.

Vorrei usare il Side menu toggle per il mio catalogo principale, ma un menu classic per la sezione FAQ. È possibile usare due menu diversi in due parti diverse del sito?

Sì. Poiché il file del menu viene "incluso" all'interno del layout di sezione, puoi avere layout diversi che richiamano menu diversi. Ad esempio, nel tuo Layout Categorie includerai il file classB_side_menu_toogle.html, mentre nel tuo Layout CMS (usato per la pagina FAQ) includerai il file classB_side_menu_classic.html.

Quando un cliente seleziona una categoria, la pagina si ricarica completamente. Vorrei un'esperienza più fluida, magari con i prodotti che si caricano senza ricaricare la pagina. Si può fare?

Questo richiede una personalizzazione avanzata (basata su AJAX/JavaScript) che va oltre le funzionalità standard dei template predefiniti. Dovresti modificare il codice JavaScript del template per intercettare il click sulla categoria, eseguire una chiamata API per recuperare i prodotti e aggiornare dinamicamente solo la griglia dei prodotti senza ricaricare l'intera pagina. È un lavoro per uno sviluppatore front-end esperto.