Navigazione per categorie: barra del menu e menu fuori tela

Gli assortimenti di grandi dimensioni hanno più categorie principali di quante ne possano stare in una riga. Finora c’era solo una scelta: inserire tutto nella barra del menu e sperare che ci entrasse – oppure rendere alcune categorie accessibili solo tramite il menu a sinistra. Con XONIC 4.10 potete decidere voi quali categorie inserire nella barra del menu. Tutte le altre rimangono accessibili con un clic: il pulsante «Altre categorie» si trova subito dopo l’ultima voce e apre un pannello con una colonna per ogni categoria principale.

La barra del menu con cinque categorie in evidenza e il pulsante «Altre categorie». Clicca per ingrandire.

Il pannello «Altre categorie»: una colonna per ogni categoria principale, con il link alla categoria completa alla fine di ciascuna colonna. Clicca per ingrandire.

Su smartphone e tablet le stesse voci vengono visualizzate come fila di chip sotto l’intestazione. Il menu a sinistra mostra in alto le voci in evidenza e sotto la riga «Altre categorie» con le restanti categorie principali.

La fila di chip, scorrendo verso destra: alla fine la scheda «Altre categorie».

Il menu a sinistra sullo smartphone con tutti i moduli. Clicca per ingrandire.

Dopo l’aggiornamento, la barra del menu di un negozio esistente apparirà inizialmente quasi identica a prima. La nuova suddivisione in «In evidenza» e «Altre categorie», così come la fila di chip, rimangono disattivate finché non le si attiva. Cosa cambia immediatamente e cosa rimane inizialmente disattivato (per i negozi con template personalizzato, vedere Negozi con template personalizzato):

Un sottomenu nella barra: alla fine della colonna ora compare «Mostra tutto in "X"». Cliccare per ingrandire.

In caso di nuova installazione a partire da XONIC 4.10, gli “Highlights”, la fila di chip e le immagini delle categorie al livello superiore sono già attivati.

1. Verificate che Impostazioni → Design → Intestazione (area superiore) → Barra di navigazione nell’intestazione (Menu, Home, Categorie) sia attivata (HEADER_DISPLAY_NAVIGATION) (valore true). Senza la barra di navigazione non ci sono né la barra né i chip, e i nuovi campi nella maschera delle categorie non vengono visualizzati.
2. Nello stesso gruppo, alla voce Navigazione in testa alla pagina: Categorie in evidenza nella barra del menu (HEADER_NAV_HIGHLIGHT_CATEGORIES), selezionate dove deve essere applicata la suddivisione in «In evidenza» e «Altre categorie»:

   Barra del menu e menu a sinistra
   true

   La barra del menu mostra le categorie in evidenza e, dietro di esse, il pulsante «Altre categorie». Il menu a sinistra mostra in alto le categorie in evidenza e sotto la riga «Altre categorie», mentre la fila di chip mostra le stesse categorie in evidenza e, alla fine, il chip «Altre categorie». Impostazione predefinita in caso di nuova installazione.

   Solo menu a sinistra
   offcanvas_only

   Il menu a sinistra e la fila di chip mostrano i contenuti in evidenza e «Altre categorie». La barra del menu rimane come prima: mostra le categorie con «Categoria come scheda di intestazione», senza il pulsante «Altre categorie».

   Solo barra del menu
   band_only

   La barra del menu mostra le categorie in evidenza e il pulsante «Altre categorie». Il menu a sinistra mostra, come in precedenza, tutte le categorie, mentre la fila di chip mostra le categorie con «Categoria come scheda di intestazione».

   Disattivato
   false

   La navigazione precedente con barra del menu, menu a sinistra e fila di chip. Ecco come appariranno i negozi esistenti dopo l’aggiornamento.

3. Attivare la fila di chip nello stesso gruppo sotto “Navigazione in testa alla pagina: Barra del menu mobile (chip) ” (HEADER_NAV_MOBILE_CHIPS) impostando il valore “ true ”. I chip seguono il menu a sinistra: se questo è suddiviso, mostrano i punti salienti e, alla fine, il chip «Altre categorie». Altrimenti mostrano, come finora, le categorie con l’opzione «Categoria come scheda nell’intestazione».
4. Stabilite quali categorie devono essere in evidenza (sezione successiva). Se non si apportano modifiche, tutte le categorie con l’opzione «Categoria come scheda nell’intestazione» saranno considerate in evidenza.
5. Accedete al vostro negozio e controllate la barra del menu, le schede e il menu a sinistra.

I due pulsanti nel gruppo «Header» (intestazione). Cliccare per ingrandire.

Aprire Prodotti → Categorie / Prodotti e modificare una categoria. Immediatamente sotto «Categoria come scheda dell’intestazione» sono presenti due nuovi campi.

In evidenza nella barra del menu

• Automatico (come scheda dell’intestazione) – l’impostazione predefinita. La categoria è in evidenza quando “Categoria come scheda dell’intestazione” è attivata. Senza ulteriori interventi, il negozio riprende così la selezione precedente.
• Sì – la categoria è sempre presente nella barra, indipendentemente dalla scheda dell’intestazione.
• No – la categoria non compare mai nella barra, ma sotto «Altre categorie».

Accanto al campo è indicato l’impostazione attuale: «Attuale: categoria in evidenza – la categoria è visualizzata direttamente nella barra del menu» oppure «Attuale: non in evidenza – la categoria non è visualizzata direttamente nella barra del menu». Se l’opzione principale è disattivata, la maschera lo segnala. In tal caso vale solo «Categoria come scheda dell’intestazione»; «Sì» e «No» hanno effetto solo dopo l’attivazione.

Se la suddivisione vale solo nel menu a sinistra, l’indicazione si riferisce all’elenco superiore nel menu a sinistra, ad esempio «Attuale: categoria in evidenza – la categoria si trova in alto nel menu a sinistra fuori dalla tela». Nella barra del menu si applica quindi solo “Categoria come scheda di intestazione”, come indicato anche dalla schermata. Se si applica solo alla barra del menu, “Sì” e “No” hanno effetto solo lì, mentre il menu a sinistra continua a mostrare tutte le categorie.

Anche le sottocategorie possono essere in evidenza. Esse ottengono una voce dedicata nella barra e rimangono inoltre accessibili dalla loro categoria principale. L’ordine nella barra segue la struttura ad albero delle categorie. Le modifiche sono visibili immediatamente dopo aver salvato la categoria.

I due nuovi campi nella maschera delle categorie con indicatore di stato. Cliccare per ingrandire.

Evidenziazione nella navigazione

Con il secondo campo è possibile evidenziare una categoria: Nessuna, Colore di risalto (il nome appare nel colore di risalto del vostro negozio), Saldi (badge) o Novità (badge) (un piccolo badge accanto al nome). L’evidenziazione appare ovunque allo stesso modo: nella barra del menu, nei sottomenu, nel pannello «Altre categorie», nei chip e nel menu a sinistra. È visibile a tutti i livelli e la categoria mantiene la propria posizione nell’ordine di visualizzazione.

A partire da una larghezza dello schermo di 1200 px, il negozio mostra la barra del menu. Se questa è suddivisa, il pulsante «Altre categorie» si trova direttamente dopo l’ultima voce. Il relativo pannello mostra, per ogni categoria principale, una colonna con le relative sottocategorie. Il numero di sottocategorie visualizzate per colonna è regolato dalla stessa impostazione utilizzata per i sottomenu della barra. Se ce ne sono di più, l’opzione «Mostra tutte in “X”» porta alla categoria completa.

• Scorrimento automatico: se non tutti gli elementi in evidenza rientrano in una riga, le voci in eccesso vengono spostate nel pannello e lì vengono visualizzate per prime.
• Categoria attiva: se la categoria corrente si trova sotto «Altre categorie», il pulsante è sottolineato.
• Utilizzo con il mouse: il pannello si apre al passaggio del cursore. Un clic lo mantiene aperto, il clic successivo lo chiude. Anche un clic fuori dall’area o il tasto Esc lo chiudono.
• Tablet e tastiera: il pannello si apre toccando lo schermo oppure premendo il tasto Invio o la barra spaziatrice.

Nella pagina della categoria «Outdoor», il pulsante «Altre categorie» è sottolineato. Cliccare per ingrandire.

Con una larghezza dello schermo inferiore a 1200 px, al posto della barra appare la fila di chip: pulsanti rotondi, scorrevoli orizzontalmente. Il chip della categoria corrente ha uno sfondo scuro e, all’apertura della pagina, viene spostato nell’area visibile.

I chip fanno parte della navigazione mobile e seguono quindi il menu a sinistra. Se il menu a sinistra è suddiviso in “In evidenza” e “Altre categorie”, i chip mostrano gli stessi contenuti in evidenza, mentre l’ultimo chip “Altre categorie” apre il menu a sinistra direttamente nel pannello “Altre categorie”. Altrimenti mostrano, come in precedenza, le categorie con l’opzione «Categoria come scheda dell’intestazione».

Il menu a sinistra si apre tramite l’icona del menu nell’intestazione. Sullo smartphone occupa l’intera larghezza; a partire da una larghezza dello schermo di 768 px, appare come un pannello laterale largo 440 px. Un’intestazione fissa indica la posizione dell’utente e contiene i pulsanti “Indietro” e “Chiudi”. Ogni sottolivello inizia con «Mostra tutto in “X”».

È possibile effettuare la selezione in Impostazioni → Design → Off-Canvas → Off-Canvas a sinistra: Modello di navigazione. La profondità del menu continua a essere determinata dalla profondità delle categorie nello stesso gruppo (impostazione predefinita 2): A 1 non ci sono sottolivelli, a 2 ci sono sottolivelli senza accordion, a 3 si aggiunge l’accordion per il terzo livello.

Il menu si apre nel punto in cui si trova il cliente

Il menu si apre nel pannello che contiene la categoria corrente, evidenziandola. Se ci si trova su una sottocategoria, il menu si apre nel pannello della categoria principale; se ci si trova su una categoria di terzo livello, si apre con l’accordion già espanso; se ci si trova su una categoria sotto «Altre categorie», si apre nel pannello corrispondente. Le pagine dei prodotti si comportano come la loro categoria. Alla chiusura, il menu torna a questo punto di partenza.

Secondo livello con pulsante “Indietro”, terzo livello come accordion.

Il pannello «Altre categorie» con immagine e breve descrizione.

A partire da una larghezza di 768 px, il menu appare come pannello laterale. Clicca per ingrandire.

È possibile configurare tutti i moduli in Impostazioni → Design → Off-Canvas.

Immagini delle categorie e breve descrizione

Se lo si desidera, il menu mostra anche al livello superiore l’immagine della categoria (48 px accanto al nome) e, sotto il nome, una riga tratta dalla breve descrizione della categoria. La breve descrizione appare solo se è attivata anche l’ opzione Impostazioni → Design → Generale → Attiva la breve descrizione anche per le categorie e le pagine CMS (ENABLE_SHORT_DESCRIPTION) e se la categoria dispone di una breve descrizione.

Riquadri promozionali dal Gestore banner

Nel menu, fino a due riquadri con immagine, titolo, breve testo e il link «Scopri ora» segnalano le promozioni. È possibile crearli come banner in Strumenti → Gestione banner (gruppo di banner offcanvas_nav):

• Il nome del banner diventa il titolo del riquadro, il testo HTML diventa il testo (senza formattazione), l’URL del banner diventa la destinazione del link.
• Il file immagine del banner e il file immagine del banner (per dispositivi mobili) si sostituiscono a vicenda se uno dei due manca.
• Vengono visualizzati gli ultimi due banner attivi del gruppo creati. Se non ci sono banner attivi, il menu non mostra alcuna tessera.
• I campi«Validità da» e «Validità fino a» controllano il periodo di validità. In questo gruppo non è applicabile una limitazione in base alle impressioni, poiché il menu viene caricato su ogni pagina e non vengono conteggiati gli annunci. Il Banner Manager conta i clic come di consueto.

Un banner del gruppo offcanvas_nav nel gestore banner. Clicca per ingrandire.

Area servizi

Sotto la barra di navigazione, l’area servizi riassume ciò di cui i clienti hanno bisogno quando sono in viaggio: pagine informative, richiamata (se il servizio di richiamata è attivo), lingua e valuta, lista dei desideri e, come ultima riga, Accedi o Il mio account. Le singole righe seguono i pulsanti presenti nell’intestazione del sito. È possibile definire quali pagine informative visualizzare nel CMS → Gestione CMS per ogni singola pagina, tramite il campo “Priorità/Ordine di visualizzazione” nel menu a tendina a sinistra sotto “Informazioni” (0 = non visualizzare).

L’area servizi è attivata di default e, pertanto, dopo l’aggiornamento, appare immediatamente nella maggior parte dei negozi. È possibile nasconderla tramite l’impostazione «Off-Canvas a sinistra: area servizi» nello stesso gruppo (valore false).

Ricerca nel menu

Per i negozi senza campo di ricerca nell’intestazione, è possibile visualizzare un campo di ricerca nella parte superiore del menu. Se il vostro negozio dispone già di una funzione di ricerca nell’intestazione, disattivate questa opzione, altrimenti la ricerca apparirà due volte.

Panoramica di tutte le impostazioni

Le prime sei impostazioni si trovano in Impostazioni → Design → Off-Canvas. L’ultima impostazione determina se il menu a sinistra viene suddiviso in “In evidenza” e “Altre categorie”. Si trova in Impostazioni → Design → Intestazione (area di testa).

Il gruppo Off-Canvas in Impostazioni → Design. Clicca per ingrandire.

La nuova navigazione per categorie è parte integrante di XONIC 4.10; non è necessario alcun modulo aggiuntivo. XONIC 4.10 è in fase di preparazione; comunicheremo la data di rilascio nelle nostre notizie.