Så här lägger du till nestad navigering till Shopify-teman
I den här artikeln kommer vi att diskutera hur man implementerar ett helt innehållskortat navigationssystem på flera nivåer inom en Shopify tema.
Shopify teman använder Flytande , ett flexibelt och kraftfullt malspråk, för att mata ut data från en butik till en mall. Om du inte är bekant med Liquid och Shopify temabyggnad i allmänhet rekommenderar jag att du checkar ut tjänstemannen Shopify temadokumentation .
Komma igång
Om du någonsin har arbetat med plattformar som WordPress kanske du känner till administrativa gränssnitt som gör att du kan skapa flera nivånavigeringar. När du matar ut i en mallfil resulterar det ofta i en nestad, oorderad lista som med hjälp av CSS kan utformas i en mängd olika mönster. Till exempel en rullgardinsmeny eller en sidomenynsmeny som avslöjar mer detaljerad filtrering när menyerna på toppnivå klickas eller svängs över. Alla tillvägagångssätt ger oss möjlighet att erbjuda djupare navigering till våra webbplatser utan för mycket komplikation.
När du först kontrollerar navigeringsfunktionen i Shopify kanske du tror att den inte ger oss den här möjligheten. Men beväpnad med lite Liquid kunskap kan vi enkelt uppnå flera menyer i våra teman. Genom att använda navigeringsfunktionen kan vi erbjuda våra kunder ett enkelt sätt att hantera sina menyer, samtidigt som vi som tematekniker skapar de önskade, inordnade, oorderade listorna för CSS-styling.
Vårt mål i denna handledning är att skapa en kapslad oorderad lista som vi helt kan styra från inom Shopify admin-området och för att dessa ändringar ska återspeglas i vår butik.
Och här är slutresultatet:
Till skillnad från andra plattformar har Shopify inte möjlighet att ha en "supermeny" som vi kan hyra våra undermenyobjekt. Det sägs att det inte är ett komplicerat förfarande för att få det att fungera. Genom att följa en enkel namngivningskonvention är det möjligt att generera menynivåstrukturer på flera nivåer.
Om du vill koda tillsammans med handledningen är det enklaste sättet att göra det, att registrera dig för en gratis Shopify Partner konto och skapa en gratis "dev shop". Dessa är fullt utrustade och låter dig pröva ditt tema innan du överlämnar det till din klient eller startar din egen butik.
Du kan prova kodexemplen i någon av mallarna i teman "Templates" teman, eller alternativt rekommenderar jag att du använder teman som standardlayoutfil theme.liquid, eftersom det här betyder att din kod kommer att visas som standard på varje sida.
Skapa menyer
Låt oss börja med att skapa en ny meny, vår överordnade meny, genom att gå till fliken Navigation i Shopify admin. För att skapa en meny behöver vi öppna Shopify admin-gränssnittet och gå till fliken "Navigation" på vänster sida.
Alla butiker har en fördefinierad standardmeny som heter "Huvudmeny". För att lägga till objekt i listan klickar du bara på "lägg till en annan länk" -knapp och ge ditt nya objekt ett "länknamn" och en destination. Med rullgardinsmenyn kan du enkelt länka till interna avsnitt, t.ex. en viss produkt eller samling. Alternativt kan du ange din egen webbadress (intern eller extern) genom att välja "webbadress" från alternativen.
Det är lätt att skapa och redigera menyer i Shopify admin.
När vi har det här på plats kan vi börja överväga den flytande koden vi behöver för att utföra detta i vårt tema.
För att mata ut menyn i vår temafil måste vi känna till "handtaget" på menyn. Handtag är unika identifierare inom Shopify för produkter, samlingar, länklistor (termen som används för menyer i Shopify-teman) och sidor. De är generellt URL-säkra versioner av objektet eller titeln på objektet. Till exempel skulle huvudmenyn resultera i ett handtag i huvudmenyn . Medan de är automatiskt genererade kan du ändra dem om du önskar via admingränssnittet.
Vår standard huvudmeny har en länk till Coffee Cups samling.
Enkelnavigering
Låt oss börja med att mata ut alla föremål från vår huvudmeny. För att göra detta kan vi använda en enkel "för loop" för att mata ut alla länklistobjekt i sin tur, så här är hur:
{% for link in linklists.main-menu.links %}- http://docs.shopify.com/themes/liquid-basics/output" class=external rel=nofollow> Vätskefilter. Ett filter är en funktion som ändrar ingångsvärdet på ett visst sätt. Låt oss exempelvis titta på uppvärmningsfiltret :
{{ 'Keir Whitaker' | upcase }}
När resultatet kommer att göra KEIR WHITAKER i vår HTML-fil.
Filter tar en inmatning, i det här exemplet mitt namn som en textsträng och ändras i enlighet med detta. När det gäller uppvärmningsfiltret omvandlar den utgången till stora bokstäver. I vårt exempel ovan tar flyktfiltret inmatningen av URL och titel och släpper texten och webbadressen så att de skrivs ut korrekt.
Flernivånavigering
Nu har vi grunderna under vår kontroll vi behöver ett sätt att skapa en relation till vår sekundära undermeny. Lyckligtvis är det inte så svårt, det tar bara några par rader av flytande kod. För det första måste vi gå tillbaka till Shopify admin och skapa vår undermeny.
Vi behöver ett sätt att relatera våra två menyer, så vår mall vet hur man skriver ut dem. Handtag kommer till vår räddning igen. Det är inte 100% klart i början men varje länk utöver menyn själv har ett unikt handtag som vi har tillgång till.
Låt oss titta på ett exempel genom att skapa en undermeny från vår kopp kaffe koppar. Vi kan säkert anta vårt menyalternativ som kallas "Kaffekoppar" automatiskt genererat handtag blir "kaffekoppar". Allt du verkligen behöver göra är att ta bort skiljetecken, byt ut stora bokstäver med små bokstäver och mellanslag med streck. Om vi vill att det här menyalternativet ska ha en undermeny, kontrollerar vi helt enkelt att vår undermeny också har ett handtag av "kaffekoppar". Det är värt att notera att titeln på din meny kan vara något, den viktiga faktorn är här handtaget.
Vår undermeny har ett handtag med kaffekoppar som gör det möjligt för oss att relatera våra menyer tillsammans.
Nu behöver vi bara lite extra Liquid-kod för att hjälpa oss att producera undermenyn i vår mall:
{% for link in linklists.main-menu.links %}- {{ sublink.url }}"> {{sublink.title | fly}}
{% endfor%}
{% endif%} {% endfor%}
Vid första inspektionen kan det vara lite skrämmande. Vi har gått över huvuddelen av det redan så låt oss undersöka den nya koden som gör större delen av det nya arbetet för oss:
{% if linklists[link.handle].links.size > 0 %}
Detta visas efter att huvudmenyns länk har matats ut men innan listobjekten stängs
tagg (rad 4 i vårt kodexempel). "If-satsen" kontrollerar att det finns en länklista med samma handtag som vår nuvarande länkobjekt och om det finns existerande för att se om det har några länkobjekt i samband med det. Om svaret är ja öppnar mallen en ny oorderad lista och matar ut varje undermenyobjekt som ett listobjekt enligt vårt första exempel. Om svaret är nej, fortsätter mallen att mata ut nästa menyobjekt. 
Slutresultatet av vår kod är en kapslad oorderad lista över menyalternativ.
Denna kontroll för förekomsten av en undermeny med samma handtag uppstår vid varje iteration av föräldramenyn. Du kommer också märka att vår "if statement" stängs av med Liquid-koden {% end for%} och vår "for loop" med {% end for%} . Detta varnar mallen för att gå vidare när dessa har slutfört sitt arbete.
Avslutar
Med lite planering är det faktiskt väldigt lätt att skapa menyer som är beroende av varandra. Självklart behöver du inte skriva ut dem tillsammans - du kan, om du vill, skriva ut menyn självständigt var som helst i din mall.
Jag hoppas att detta har gett dig en inblick i hur lätt det är att skapa mångsidiga menysystem i Shopify-teman.