Come aggiungere la navigazione nidificata ai temi Shopify
In questo articolo discuteremo come implementare un sistema di navigazione multilivello gestito completamente contenuto all'interno di a Shopify tema.
Uso dei temi Shopify Liquido , un linguaggio template flessibile e potente, per l'output di dati da un negozio in un modello. Se non hai familiarità con Liquid e lo sviluppo di temi di Shopify in generale, ti consiglio di controllare il funzionario Shopify documentazione del tema .
Iniziare
Se hai mai lavorato con piattaforme come WordPress, potresti avere familiarità con le interfacce di amministrazione che ti consentono di creare una navigazione a più livelli. Quando vengono generati in un file di modello, spesso questo risulta in una lista non ordinata e annidata che, usando i CSS, possiamo applicare uno stile a una varietà di schemi di progettazione. Ad esempio un menu a discesa o un menu della barra laterale che rivela un filtraggio più dettagliato quando i menu di livello superiore vengono cliccati o spostati sopra. Tutti gli approcci ci danno la possibilità di offrire una navigazione più profonda nei nostri siti senza troppe complicazioni.
Al primo controllo della funzione di navigazione in Shopify si potrebbe pensare che non ci offre questa capacità. Tuttavia, armati di una piccola conoscenza di Liquid, possiamo facilmente ottenere menu multi-livello nei nostri temi. Usando la funzionalità di navigazione possiamo offrire ai nostri clienti un modo semplice per gestire i loro menu mentre ci offrono, come progettisti di temi, gli elenchi non ordinati annidati desiderati per lo stile CSS.
Il nostro obiettivo in questo tutorial è quello di creare un elenco non ordinato nidificato che possiamo controllare completamente dall'area amministrativa di Shopify e che tali modifiche si riflettano nel nostro negozio.
Ed ecco il risultato finale:
A differenza di altre piattaforme, Shopify non ha la possibilità di avere un "super menu" in cui possiamo annidare le voci del nostro sottomenu. Detto questo, non è una procedura complicata per farlo funzionare. Seguendo una semplice convenzione di denominazione è possibile generare strutture di menu a più livelli.
Se desideri programmare insieme al tutorial, il modo più semplice per farlo è iscriverti gratuitamente Shopify Partner account e creare un "dev shop" gratuito. Questi sono pienamente disponibili e ti permettono di provare il tuo tema prima di consegnarlo al tuo cliente o di avviare il tuo negozio.
Puoi provare gli esempi di codice in uno qualsiasi dei modelli nella cartella temi "templates" dei temi o, in alternativa, ti consigliamo di utilizzare il file di layout di default temi theme.liquid, poiché ciò significherà che il tuo codice verrà visualizzato per impostazione predefinita su ogni pagina.
Creare menu
Iniziamo creando un nuovo menu, il nostro menu principale, andando alla scheda Navigazione nell'amministratore di Shopify. Per creare un menu, è necessario aprire l'interfaccia di amministrazione di Shopify e andare alla scheda "Navigazione" sul lato sinistro.
Tutti i negozi hanno un menu predefinito predefinito chiamato "Menu principale". Per aggiungere elementi all'elenco basta fare clic sul pulsante "aggiungi un altro link" e dare al tuo nuovo articolo un "nome link" e una destinazione. Il menu a discesa di selezione ti consentirà di collegarti facilmente a sezioni interne come un particolare prodotto o collezione. In alternativa puoi inserire il tuo URL (interno o esterno) scegliendo "indirizzo web" dalle opzioni.
È facile creare e modificare i menu nell'amministratore di Shopify.
Una volta che abbiamo questo posto possiamo iniziare a considerare il codice Liquid di cui avremo bisogno per produrre questo nel nostro tema.
Per generare il menu nel nostro file di tema, è necessario conoscere il "manico" del menu. Le maniglie sono identificatori univoci all'interno Shopify per prodotti, raccolte, elenchi di collegamenti (il termine utilizzato per i menu nei temi di Shopify) e pagine. Sono generalmente versioni sicure dell'URL del nome o del titolo dell'articolo. Ad esempio, il menu principale risulterebbe in una maniglia del menu principale . Anche se sono generati automaticamente, puoi cambiarli se lo desideri tramite l'interfaccia di amministrazione.
Il nostro menu principale predefinito presenta un collegamento alla collezione di tazze di caffè.
Navigazione a livello singolo
Iniziamo inserendo tutti gli elementi dal nostro "menu principale". Per fare ciò possiamo usare un semplice "ciclo for" per generare a turno tutte le voci dell'elenco di link, ecco come:
{% for link in linklists.main-menu.links %}- http://docs.shopify.com/themes/liquid-basics/output" class=external rel=nofollow> Filtro liquido Un filtro è una funzione che modifica il valore di input in un determinato modo. A titolo di esempio, diamo un'occhiata al filtro upcase :
{{ 'Keir Whitaker' | upcase }}
Quando viene prodotto, questo renderà KEIR WHITAKER nel nostro file HTML.
I filtri prendono un input, in questo esempio il mio nome come stringa di testo e lo cambia di conseguenza. Nel caso del filtro upcase trasforma l'output in caratteri maiuscoli. Nel nostro esempio sopra il filtro di escape prende l'input di URL e titolo e sfugge al testo e all'URL in modo che vengano emessi correttamente.
Navigazione a più livelli
Ora che abbiamo le basi sotto il nostro controllo, abbiamo bisogno di un modo per creare una relazione con il nostro sottomenu secondario. Fortunatamente non è così difficile, ci vogliono solo un paio di righe di codice Liquid. Per prima cosa dobbiamo tornare all'amministratore di Shopify e creare il nostro sottomenu.
Abbiamo bisogno di un modo per mettere in relazione i nostri due menu in modo che il nostro modello sappia come produrli. I manici tornano in nostro soccorso ancora una volta. Inizialmente non è chiaro al 100%, ma ogni link in aggiunta al menu stesso ha un handle unico al quale abbiamo accesso.
Diamo un'occhiata a un esempio creando un sottomenu dal nostro collegamento "Tazzine da caffè". Possiamo tranquillamente supporre che la nostra voce di menu chiamata "tazze di caffè", la maniglia generata automaticamente sarà "tazze di caffè". Tutto quello che devi veramente fare è rimuovere la punteggiatura, sostituire i caratteri maiuscoli con lettere minuscole e spazi con trattini. Se desideriamo che questa voce di menu abbia un sottomenu, ci assicuriamo semplicemente che il nostro sottomenu abbia anche una maniglia di "tazze di caffè". Vale la pena notare che il titolo del menu può essere qualsiasi cosa, il fattore importante qui è la maniglia.
Il nostro sottomenu ha una maniglia di tazze da caffè che ci permette di mettere insieme i nostri menu.
Ora tutto ciò di cui abbiamo bisogno è un piccolo codice liquido in più per aiutarci a generare il sottomenu nel nostro modello:
{% for link in linklists.main-menu.links %}- {{ sublink.url }}"> {{sublink.title | fuga }}
{% endfor%}
{% finisci se %} {% endfor%}
Alla prima ispezione questo potrebbe essere un po 'scoraggiante. Ne abbiamo già esaminato la maggior parte, quindi esaminiamo il nuovo codice che sta facendo la maggior parte del nuovo lavoro per noi:
{% if linklists[link.handle].links.size > 0 %}
Questo appare dopo che il link del menu principale viene emesso ma prima della chiusura delle voci dell'elenco
tag (riga 4 nel nostro esempio di codice). La "dichiarazione if" verifica se esiste un elenco di collegamenti con lo stesso handle del nostro attuale elemento di collegamento e se esiste per vedere se ha degli elementi di collegamento ad esso associati. Se la risposta è sì, il modello apre una nuova lista non ordinata e restituisce ciascuna voce di sottomenu come voce di elenco come nel nostro primo esempio. Se la risposta è no, il modello continua a generare l'elemento successivo del menu principale. 
Il risultato finale del nostro codice è un elenco annidato non ordinato di voci di menu.
Questo controllo dell'esistenza di un sottomenu con lo stesso handle si verifica in ogni iterazione del menu genitore. Noterai inoltre che la nostra "istruzione if" è chiusa con il codice Liquid {% end per%} e il nostro "ciclo for" con {% di fine per%} . Questo avverte il modello per andare avanti quando questi hanno completato il loro lavoro.
Avvolgendo
Con un po 'di pianificazione è in realtà molto facile creare menu che dipendono l'uno dall'altro. Naturalmente non è necessario produrli insieme - è possibile se si desidera esportare il sottomenu in modo indipendente in qualsiasi punto del modello.
Spero che questo ti abbia dato un'idea di quanto sia facile creare sistemi di menu versatili nei temi di Shopify.