Slik legger du til Nested Navigation til Shopify Themes
I denne artikkelen vil vi diskutere hvordan du implementerer et fullstendig innholdsstyrt navigasjonssystem på flere nivåer innenfor en Shopify tema.
Shopify-temaer bruker Væske , et fleksibelt og kraftig malespråk, for å sende data fra en butikk til en mal. Hvis du ikke er kjent med Liquid, og Shopify temapark generelt, anbefaler jeg at du sjekker ut den offisielle Shopify tema dokumentasjon .
Starter
Hvis du noen gang har jobbet med plattformer som WordPress, kan du være kjent med admin-grensesnitt som lar deg lage flernivånavigasjon. Når du skriver ut i en malfil, resulterer disse ofte i en nestet, uordnet liste som ved hjelp av CSS kan stiles inn i en rekke designmønstre. For eksempel en rullegardinmeny eller en sidebarmeny som avslører mer detaljert filtrering når toppnivåmenyene klikkes eller svever over. Alle tilnærminger gir oss muligheten til å tilby dypere navigasjon til våre sider uten for mye komplikasjon.
Ved første inspeksjon av navigasjonsfunksjonen i Shopify kan du tro at den ikke gir oss denne muligheten. Men bevæpnet med en liten flytende kunnskap kan vi enkelt oppnå flere nivå menyer i våre temaer. Ved å bruke navigasjonsfunksjonaliteten kan vi tilby våre kunder en enkel måte å styre sine menyer på, samtidig som de som tema designere, gir de ønskede, nestede, uordnede lister for CSS-styling.
Vårt mål i denne opplæringen er å skape en nestet, uordnet liste som vi helt kan styre fra Shopify admin-området og for at disse endringene skal reflekteres i butikken vår.
Og her er sluttresultatet:
I motsetning til andre plattformer har Shopify ikke muligheten til å ha en "supermeny" som vi kan neste undermenyelementene våre i. Det sa at det ikke er en komplisert prosedyre for å få dette til å fungere. Ved å følge en enkel navngivningskonvensjon er det mulig å generere menystrukturer på flere nivåer.
Hvis du ønsker å kode sammen med opplæringen, er den enkleste måten å gjøre det på å registrere deg for en gratis Shopify Partner konto og opprett en gratis "dev-butikk". Disse er fullt utstyrt og lar deg prøve temaet ditt før du overleverer det til klienten eller lanserer din egen butikk.
Du kan prøve kodeeksemplene i noen av maler i tema-temaene "maler" -mappen, eller alternativt vil jeg anbefale å bruke temaene standardlayout-fil theme.liquid, da dette vil bety at koden din vil vises som standard på hver side.
Opprette menyer
La oss begynne med å opprette en ny meny, vår overordnede meny, ved å gå til navigasjonsfanen i Shopify admin. For å opprette en meny må vi åpne Shopify admin-grensesnittet og gå til "Navigasjon" -fanen på venstre side.
Alle butikker har en forhåndsdefinert standardmeny kalt "Hovedmeny". For å legge til elementer i listen klikker du bare på «legg til en ny lenke» -knapp og gir det nye elementet et "lenke navn" og en destinasjon. Med valgfeltet kan du enkelt lenke til interne seksjoner, for eksempel et bestemt produkt eller en samling. Alternativt kan du skrive inn din egen nettadresse (intern eller ekstern) ved å velge "webadresse" fra alternativene.
Det er enkelt å opprette og redigere menyer i Shopify admin.
Når vi har dette på plass, kan vi begynne å vurdere Væskekoden vi trenger for å sende ut dette i vårt tema.
For å kunne utføre menyen i vår temafil må vi kjenne "håndtaket" på menyen. Håndtak er unike identifikatorer innenfor Shopify for produkter, samlinger, lenkelister (begrepet som brukes for menyer i Shopify-temaer) og sider. De er vanligvis URL-sikre versjoner av elementet eller tittelen på elementet. For eksempel vil hovedmenyen resultere i et håndtak av hovedmenyen . Mens de er automatisk genererte, kan du endre dem hvis du ønsker det via admingrensesnittet.
Standardmenyen vår har en kobling til Coffee Cups-samlingen.
Enkeltnavigasjon
La oss starte med å skrive ut alle elementene fra vår hovedmeny. For å gjøre dette kan vi bruke en enkel "for loop" for å sende ut alle linklisteelementene igjen, slik er det:
{% for link in linklists.main-menu.links %}- http://docs.shopify.com/themes/liquid-basics/output" class=external rel=nofollow> Flytende filter. Et filter er en funksjon som endrer inngangsverdien på en bestemt måte. For eksempel, la oss se på opptaksfilteret :
{{ 'Keir Whitaker' | upcase }}
Når dette utføres, vil dette gjengi KEIR WHITAKER i vår HTML-fil.
Filtre tar en inngang, i dette eksemplet mitt navn som en tekststreng og endrer det tilsvarende. Når det gjelder opptaksfilteret , forvandler det utdata til store bokstaver. I vårt eksempel ovenfor tar fluktfilteret innspillet til URL og tittel, og unngår teksten og nettadressen slik at de blir sendt riktig ut.
Multi-nivå navigasjon
Nå har vi det grunnleggende under vår kontroll vi trenger en måte å skape et forhold til vår sekundære undermeny. Heldigvis er dette ikke så vanskelig, det tar bare et par flere linjer med flytende kode. For det første må vi gå tilbake til Shopify admin og opprette vår undermeny.
Vi trenger en måte å knytte våre to menyer til, slik at vår mal vet hvordan de skal sendes ut. Håndtak kommer til vår redning igjen. Det er ikke 100% klart i utgangspunktet, men hver kobling i tillegg til menyen selv har et unikt håndtak som vi har tilgang til.
La oss se på et eksempel ved å lage en undermeny fra koblingen "Coffee Cups". Vi kan trygt ut fra vårt menyelement kalt "Coffee Cups" automatisk generert håndtak vil være "kaffekopper". Alt du virkelig trenger å gjøre er å fjerne noen tegnsetting, erstatte store bokstaver med små bokstaver og mellomrom med bindestreker. Hvis vi ønsker at dette menyelementet har en undermeny, sørger vi bare for at undermenyen også har et håndtak av "kaffekopper". Det er verdt å merke seg at tittelen på menyen din kan være noe, den viktige faktoren er her håndtaket.
Vår undermeny har et håndtak av kaffekopper som gjør at vi kan forholde våre menyer sammen.
Nå er alt vi trenger, en liten ekstra flytende kode som hjelper oss med å utføre undermenyen i vår mal:
{% for link in linklists.main-menu.links %}- {{ sublink.url }}"> {{sublink.title | flukt }}
{% endfor%}
{% slutt om %} {% endfor%}
Ved første inspeksjon kan dette være litt skremmende. Vi har gått over flertallet av det allerede, så la oss undersøke den nye koden som gjør mesteparten av det nye arbeidet for oss:
{% if linklists[link.handle].links.size > 0 %}
Dette vises etter at foreldre meny lenken er utført, men før listepostene lukkes
tag (linje 4 i vårt kodeeksempel). "If-setningen" kontrollerer for å se om det finnes en lenke med samme håndtak som vår nåværende lenke, og hvis det eksisterer for å se om det har noen koblingselementer knyttet til det. Hvis svaret er ja, åpner malmen en ny uordnet liste og sender ut hvert undermenyelement som et listeelement som i vårt første eksempel. Hvis svaret er nei, fortsetter malen å skrive ut det neste overordnede menyelementet. 
Resultatet av koden vår er en nestet, uordnet liste over menyelementer.
Denne kontrollen for eksistensen av en undermeny med det samme håndtaket skjer ved hver iterasjon av hovedmenyen. Du vil også legge merke til at vår "if statement" er stengt av Liquid-koden {% end for%} og vår "for loop" med {% end for%} . Dette varsler malen om å fortsette når disse har fullført sitt arbeid.
Innpakning
Med litt planlegging er det faktisk veldig enkelt å lage menyer som er avhengige av hverandre. Selvfølgelig trenger du ikke å sende dem sammen - du kan, hvis du ønsker, sende undermenyen uavhengig hvor som helst i malen.
Jeg håper dette har gitt deg et innblikk i hvor enkelt det er å lage allsidige menysystemer i Shopify-temaer.