I denne artikel vil vi diskutere, hvordan man implementerer et fuldt styret navigationssystem på flere niveauer inden for en Shopify tema.

Shopify temaer bruger Væske , et fleksibelt og kraftfuldt skabelonsprog, til at output data fra en butik til en skabelon. Hvis du ikke er bekendt med væske, og Shopify tembygning generelt så anbefaler jeg at tjekke den officielle Shopify tema dokumentation .

Kom i gang

Hvis du nogensinde har arbejdet med platforme som WordPress, kan du være bekendt med admin grænseflader, der giver dig mulighed for at oprette flerniveau navigation. Når der udskrives i en skabelonfil, resulterer disse ofte i en indlejret, uordnet liste, som vi ved hjælp af CSS kan indstille i forskellige designmønstre. For eksempel en drop-down menu eller en sidebarmenu, der afslører mere detaljeret filtrering, når topmenuerne klikkes eller svæves over. Alle tilgange giver os mulighed for at tilbyde dybere navigation til vores websteder uden for meget komplikation.

Shopify-udgaver-tema

Ved først at inspicere navigationsfunktionen i Shopify tror du måske, at det ikke giver os denne mulighed. Men bevæbnet med lidt Liquid viden kan vi nemt nå menuer på flere niveauer i vores temaer. Ved at bruge navigationsfunktionaliteten kan vi tilbyde vores kunder en nem måde at styre deres menuer på, samtidig med at vi som tema designere giver de ønskede indlejrede, uordnede lister til CSS styling.

Vores mål i denne tutorial er at oprette en indlejret, uordnet liste, som vi fuldt ud kan styre fra Shopify admin-området, og at disse ændringer afspejles i vores butik.

Og her er slutresultatet:

I modsætning til andre platforme har Shopify ikke muligheden for at have en "supermenu", som vi kan indhente vores undermenupunkter i. Det er sagt, at det ikke er en kompliceret procedure for at få det til at fungere. Ved at følge en simpel navngivningskonvention er det muligt at generere menuer med flere niveauer.

Hvis du ønsker at kode sammen med vejledningen, er den enkleste måde at gøre det på at tilmelde dig en gratis Shopify Partner konto og opret en gratis "dev shop". Disse er fuldt udstyret og giver dig mulighed for at prøve dit tema, før du overleverer det til din klient eller lancerer din egen butik.

Du kan prøve kodeeksemplerne i nogen af ​​skabelonerne i temaerne "temaer", temaer eller temaer. Alternativt vil jeg anbefale at bruge temaerne Standardlayout-fil theme.liquid, da dette vil betyde, at din kode vil blive vist som standard på hver side.

Oprettelse af menuer

Lad os begynde med at oprette en ny menu, vores overordnede menu, ved at gå til fanen Navigation i Shopify-administratoren. For at oprette en menu skal vi åbne Shopify admin interface og gå til fanen "Navigation" på venstre side.

Alle butikker har en foruddefineret standardmenu kaldet "Hovedmenu". For at tilføje varer til listen skal du blot klikke på knappen "Tilføj en anden link" og give dit nye emne et "linknavn" og en destination. Selekter drop down giver dig mulighed for nemt at linke til interne sektioner som et bestemt produkt eller en samling. Alternativt kan du indtaste din egen webadresse (intern eller ekstern) ved at vælge "webadresse" fra indstillingerne.

Navigation-admin

Det er nemt at oprette og redigere menuer i Shopify admin.

Når vi har dette på plads, kan vi begynde at overveje Liquid-koden, som vi skal bruge til at udføre dette i vores tema.

For at kunne udstille menuen i vores temafil skal vi kende menuens "håndtag". Håndtag er unikke identifikatorer indenfor Shopify for produkter, samlinger, link lister (begrebet bruges til menuer i Shopify temaer) og sider. De er generelt URL-sikre versioner af varens navn eller titel. For eksempel vil hovedmenuen resultere i et håndtag i hovedmenuen . Mens de automatisk genereres, kan du ændre dem, hvis du ønsker det via admin-grænsefladen.

hovedmenu

Vores standardmenu indeholder et link til Coffee Cups kollektionen.

Enkeltnavigering

Lad os starte med at udstede alle varer fra vores "hovedmenu". For at gøre dette kan vi bruge en simpel "for loop" til at udgive alle linklisteelementerne igen, så er det sådan:

    {% for link in linklists.main-menu.links %}
  • http://docs.shopify.com/themes/liquid-basics/output" class=external rel=nofollow> Væskefilter. Et filter er en funktion, der ændrer indtastningsværdien på en bestemt måde. For eksempel, lad os se på opkastfilteret :

    {{ 'Keir Whitaker' | upcase }}

    Ved udgang vil dette gøre KEIR WHITAKER i vores HTML-fil.

    Filtre tager et input, i dette eksempel er mit navn som en tekststreng og ændres i overensstemmelse hermed. I tilfælde af opkastfilteret forvandler det output til store bogstaver. I vores eksempel ovenfor tager escapefilteret indgangen til URL og titel og undslipper teksten og URL'en, så de udføres korrekt.

    Multi-niveau navigation

    Nu har vi det grundlæggende under vores kontrol, vi har brug for en måde at skabe et forhold til vores sekundære undermenu. Heldigvis er det ikke så svært, det tager bare et par flere linjer af Liquid-kode. For det første skal vi gå tilbage til Shopify admin og oprette vores undermenu.

    Vi har brug for en måde at forbinde vores to menuer på, så vores skabelon ved, hvordan de skal udskrives. Håndtag kommer til vores redning igen. Det er først 100% klart, men hvert eneste link ud over menuen har et unikt håndtag, som vi har adgang til.

    Lad os se på et eksempel ved at oprette en undermenu fra vores "Coffee Cups" link. Vi kan sikkert tage udgangspunkt i vores menupunkt kaldet "Coffee Cups" automatisk genereret håndtag vil være "kaffekopper". Alt du virkelig skal gøre er at fjerne eventuelle tegnsætning, erstatte store bogstaver med små bogstaver og mellemrum med bindestreger. Hvis vi gerne vil have dette menupunkt til at have en undermenu, sørger vi simpelthen for, at vores undermenu også har et håndtag af "kaffekopper". Det er værd at bemærke, at titlen på din menu kan være noget, den vigtige faktor her er håndtaget.

    undermenu

    Vores undermenu har et håndtag af kaffekopper, der giver os mulighed for at forholde vores menuer sammen.

    Nu er alt, hvad vi har brug for, en lille ekstra flydende kode til at hjælpe os med at udstille undermenuen i vores skabelon:

      {% Afslut Hvis %} 
  • {% endfor%}

Ved første inspektion kan det være lidt skræmmende. Vi har gået over størstedelen af ​​det allerede så lad os undersøge den nye kode, der gør hovedparten af ​​det nye arbejde for os:

{% if linklists[link.handle].links.size > 0 %}

Dette vises, når hovedmenuforbindelsen er udført, men før lukning af lister er afsluttet tag (linje 4 i vores kodeeksempel). "If-sætningen" kontrollerer for at se, om der findes en linkliste med det samme håndtag som vores nuværende link, og hvis det eksisterer for at se, om det har nogen linkelementer, der er forbundet med det. Hvis svaret er ja, åbner skabelonen en ny uordnet liste og udsender hver undermenupunkt som en liste som i vores første eksempel. Hvis svaret er nej, fortsætter skabelonen med at sende det næste overordnede menupunkt.

output-menu

Slutresultatet af vores kode er en indlejret uordnet liste over menupunkter.

Denne kontrol for eksistensen af ​​en undermenu med det samme håndtag sker på hver iteration af hovedmenuen. Du vil også bemærke, at vores "if statement" er lukket med Liquid-koden {% end for%} og vores "for loop" med {% end for%} . Dette giver besked om, at skabelonen skal gå videre, når disse har gennemført deres arbejde.

Afslutter

Med lidt planlægning er det faktisk meget nemt at oprette menuer, der er afhængige af hinanden. Selvfølgelig behøver du ikke at sende dem sammen - du kan, hvis du ønsker, sende undermenuen uafhængigt overalt i din skabelon.

Jeg håber, at dette har givet dig et indblik i, hvor nemt det er at skabe alsidige menusystemer i Shopify-temaer.