Quattrocento categorie non entrano in una sola barra
Il menu orizzontale del tema può contenere otto voci. Da lì, iniziano i tagli: categorie che non compaiono, sottomenu che vengono tagliati e, sui dispositivi mobili, un menu a tendina dove nessuno riesce a trovare nulla.
RKR Side Menu crea il proprio menu a tendina, Indipendentemente dal tema, con il suo albero dei livelli illimitato, icone e blocchi. E puoi crearne due: uno per desktop e uno per dispositivi mobili, con contenuti diversi se lo desideri.
1
Albero per entrambe le cose: il menu laterale e la barra superiore
10
tipi di input, tre dei quali automatici
0
kilobyte extra: con il caricamento ritardato il menu viene richiesto all'apertura
E sopra, una barra orizzontale dello stesso albero
Accanto al pulsante del menu, le voci che si scelgono, disposte orizzontalmente, con il comportamento tipico di un menu di intestazione. Non si tratta di un menu separato.Proviene dallo stesso albero, quindi viene ancora gestito in un unico luogo e non c'è nulla da manutenere due volte.
Tu scegli cosa va in altoUna casella per ogni voce, sullo stesso albero. E raggiunge qualsiasi livello: è possibile spostare una sottocategoria verso l'alto senza spostarla dalla sua posizione nel menu.
E cosa fa ognuno di loro?Automatico —si espande se ha un sottomenu—, sempre alla sua pagina o sempre espandi. Se chiedi a qualcosa che non ha una pagina di andare "alla sua pagina", si abbasserà per espandersi invece di lasciare una voce vuota che non fa nulla.
Un gruppo sulla destraCon linea di separazione opzionale, per ciò che non è un catalogo: contatti, blog, buoni regalo.
EminenteCon il suo sfondo e il suo testo, per la call to action. Uno è sufficiente: se tutti risaltano, nessuno risalta.
Testo breveUn'unica etichetta per il bar, per lingua: "Valutazione gratuita dei vostri gioielli" appare in alto come "Valutazione gratuita" senza modificare il nome nel menu o la categoria.
E si apre lungo il suo ramoUna voce con un sottomenu apre il menu laterale giù per quel ramo, non dall'inizio, e il ramo aperto è contrassegnato in modo che tu possa vedere da dove pende ciò che si trova davanti.
Viene disegnato dove lo si desidera —tramite l'hook del tema o manualmente dal template—, viene raccolto nel pulsante standard quando lo schermo si restringe e ha una propria schermata di personalizzazione dell'aspetto: altezza, carattere, spaziatura, arrotondamento, sottolineatura e colori.
L'albero: livelli illimitati e figli automatici
Gli elementi vengono riorganizzati trascinandoli e possono essere annidati senza limiti. Ogni riga ha tre pulsanti: modifica, elimina e appendere un bambino a quell'ingresso.
Esistono tre tipi di persone che svolgono il lavoro da sole e che, di fatto, salvano la situazione:
SottocategorieSi collega a una categoria e visualizza automaticamente le sue sottocategorie di primo livello.
Albero delle sottocategorieLo stesso, ma con l'intero albero sotto, fino in fondo.
Tutti i marchiElenca i marchi che hanno prodotti, in ordine alfabetico e con il relativo logo.
Non è una copia, è una consulenza. Se domani create una nuova categoria, questa apparirà automaticamente nel menu. Inoltre, le voci che rimandano alle categorie rispettano i gruppi di accesso: non vengono mostrate ai clienti senza autorizzazione, non perché siano presenti ma non funzionino correttamente, ma perché non sono presenti affatto.
Gli altri sette sono quelli usuali: titolo (raggruppa e non crea link), link libero con opzione di apertura in un'altra scheda, categoria diretta senza trascinare i suoi elementi secondari, prodotto, marchio, fornitore e pagina CMS.
Come aprire un sottomenu: tre modi, e quello giusto dipende dallo schermo
Sostituire il pannelloIl sottomenu scorre e copre quello precedente. Il comportamento classico. Funziona sempre.
Due colonneIl sottomenu si apre a destra e il pannello precedente rimane visibile e utilizzabile: è possibile passare al ramo successivo senza tornare indietro. Per desktop.
Distribuzione onlineIl sottomenu si apre in basso, rientrato, lasciando visibile il resto del menu. Per dispositivi mobili: lo stesso vantaggio senza sprecare larghezza, in modo che i nomi vengano letti per intero.
La modalità viene scelta separatamente per desktop e mobile, e punto di taglio È possibile impostarlo (768 pixel per impostazione predefinita).
Con il pannello raggruppato, Un ramo con nipoti viene presentato in colonne: ogni figlio funge da intestazione, con la propria sotto, e si passa automaticamente alla colonna successiva quando quella precedente è piena. Per evitare che la colonna di sinistra si riduca, il menu raddoppia la sua larghezza senza superare il limite impostato: se, con tale limite, una colonna scendesse al di sotto dei 150 pixel, le colonne vengono automaticamente disattivate.
Caricamento differito: il menu smette di caricarsi su tutte le pagine
Un menu di grandi dimensioni occupa centinaia di kilobyte in formato HTML. ogni pagina, anche se nessuno la apre. Il lazy loading decide quanta parte del contenuto viene caricata, a livelli; il resto viene richiesto quando il visitatore apre quel ramo, e solo una volta per pagina.
- Disattivato — il menu completo. Per i menu brevi: le opzioni più semplici senza richieste particolari.
- Livello 1 — niente; il menu viene richiesto con il primo gesto sul pulsante.
- Livello 2 — il primo livello e i sottomenu quando li apri. Il solito equilibrio: in un negozio grande, il peso è sui rami più profondi.
- Livello 3 o 4 — i primi due o tre livelli, per alberi molto profondi.
- Inoltre, rimandare qualsiasi ramo che passi attraverso N voci anche se rientra nel livello servito: il modo conveniente per estrarre un lungo elenco come quello di tutti i marchi da HTML.
IL I dati strutturati vengono sempre forniti nella loro interezza. alla profondità che imposti, indipendentemente dai comandi di caricamento differito: Google vede l'intero albero anche se il visitatore riceve solo il primo livello.
Sotto l'albero, che li fa comprare
Intestazione propriaIl tuo logo e il tuo testo in alto, al posto di una barra vuota.
Pulsanti extraLe call to action che desideri sopra l'albero: prenota un appuntamento, dove siamo, offerte.
ContattoTelefono, email, orari di apertura e WhatsApp, tutto a portata di tocco.
FiduciaSpedizione, tempi di consegna e resi: cosa valutare prima di decidere.
Il mio account e le mie retiAccesso clienti e profili utente.
HTML gratuitoUn blocco per tutto ciò che non rientra in nessuna delle categorie precedenti.
Deve essere in linea con l'immagine del tuo negozio e deve essere leggibile.
Tema scuro o bianco; in alto, una tavolozza preassemblata —Rekire, Mezzanotte, Tenue, Contrasto elevato o Caldo: e in più, se necessario, i colori di sfondo, testo, evidenziazione e separatore. Il modulo calcola gli spazi vuoti in base allo sfondo, scegliendo una tonalità leggibile.
E durante il salvataggio misurare il contrastoSe non raggiunge il rapporto d'aspetto 4,5:1 raccomandato dalle linee guida sull'accessibilità, ti avviserà. Un menu illeggibile non è una questione di gusto.
Le icone provengono da Material Icons (cercandole per nome nell'editor) oppure possono essere tue: in formato PNG, JPG, GIF o SVG con risoluzione 24×24.
Dettagli che si notano quando lo si utilizza
- Cerca all'interno del menuFiltra le voci mentre digiti. Con un albero di grandi dimensioni, la differenza tra trovare qualcosa e rinunciare è significativa.
- Indica la tua posizione: evidenzia la voce della pagina aperta e il suo ramo. Se non c'è una corrispondenza esatta, prova il percorso padre, quindi una tabulazione ne contrassegna la categoria.
- E segna il ramo apertoSfondo, testo in grassetto e una piccola barra a sinistra lungo tutto il ramo, non solo all'ultimo livello. Nella visualizzazione a colonne, e soprattutto quando si accede dalla barra (senza aver cliccato su nulla nel menu), questa è l'unica indicazione della posizione del contenuto.
- La modalità del sottomenu del telefono cellulare è veramente rispettataLe colonne richiedono la larghezza corrente anziché deciderla autonomamente, quindi reagiscono anche quando si ruota il telefono. Chi desidera le colonne sui propri dispositivi mobili può ancora averle.
- Vicino scorrendo Al tocco: il menu segue il dito e ricompare se non lo si rilascia completamente. Lo scorrimento verticale non lo chiude mai.
- Precaricamento al passaggio del mouseIl browser richiede l'inserimento della pagina iniziale in background, sotto il cursore del mouse. Questa funzione è disponibile solo con il mouse, mai con un touchscreen.
- Contatore del sottomenu, pulsante di chiusura, e il contenuto della pagina scorre invece di essere coperto.
- Importazione ed esportazione L'intero menu: viene assemblato in fase di test e portato in produzione senza ripetere il lavoro.
Installazione: non è necessario toccare l'oggetto
Con l'inserimento automatico abilitato (come di default), il modulo viene posizionato automaticamente. Poiché il menu è una barra laterale e si disconnette dalla sua origine, il risultato è identico a quello che si otterrebbe richiamandolo dal tema. Se si preferisce posizionarlo manualmente, è disponibile un apposito hook.
Il pulsante che lo apre è un collegamento al menu di ancoraggio, e niente di più: Menu per desktop e #rkrmenu-mobile per dispositivi mobili.
Il menu sposta il contenuto quando si apre e deve sapere quale elemento spostare: per impostazione predefinita principale. Se il tuo tema non ne ha uno, specifichi un altro selettore e, se non esiste, il modulo si avvia comunque senza scorrimento invece di interrompere la pagina.
Le tue personalizzazioni non andranno perse durante l'aggiornamento
Il tuo CSS personalizzato, l'HTML per il piè di pagina del menu e le icone che hai caricato si trovavano tutti all'interno della cartella del modulo, e il gestore dei moduli sostituisce tale cartella durante gli aggiornamenti, rimuovendo tutti questi elementi. Il menu è tornato al suo aspetto predefinito. senza alcun preavviso, E proprio in quel momento, nessuno sospetta del modulo.
Ora risiedono in una cartella gestita da PrestaShop e, durante l'aggiornamento, i file rimanenti nella vecchia posizione vengono trasferiti senza sovrascrivere nessuno dei nuovi. Se il trasferimento fallisce a causa dei permessi, si dice —nel registro di sistema e nel pannello Diagnostica, con la cartella specifica—, perché tacere significherebbe che il commerciante rischierebbe di perdere il lavoro a un solo aggiornamento.
Compatibile con PrestaShop 8 e PrestaShop 9
Sviluppato e mantenuto da RICHIEDERE
