Share
I de to første delene av denne serien introduserte jeg deg til Shopify e-handelsplattform, forklarte nøkkelbegrepene, diskutert hvordan temaer er konstruert og deretter flyttet til en grundig titt på Væske - Shopify templerende språk.
I denne siste delen vil vi se på hvordan litt dypere kunnskap om væske vil gjøre deg i stand til å gjøre temaene dine enda mer fleksible, slik at du kan levere rike og fantasifulle butikkdesigner.
La oss begynne med å se på hvordan vi kan bruke "alternative layouts" til stor effekt.
En av de mest kraftige funksjonene i flytende er layoutfilen som vi så på i del ett. Jeg beskriver ofte en layoutfil som en "mallsmal". Vanligvis vil denne filen inkludere våre HTML-deklarasjoner, merkevarebygging, navigering og bunntekst - i hovedsak alle de vanlige elementene på nettstedet vårt som vi vil se ut på hver side.
Alle gjengitte sider i et Shopify-tema, med mindre det er oppgitt, vil være basert på denne hovedmalen. Som standard er dette theme.liquid fil som ligger i oppsett mappe. Våre mikromaler, plassert i maler mappe, vil bli gjengitt på det punktet Shopify møter content_for_layout Flytende plassholder i vår layoutfil.
For å jogge minnet ditt her er et veldig grunnleggende layoutfileksempel:
content_for_headershop.name - page_title "screen.css" | asset_url | stylesheet_tag content_for_layout
Som nevnt i del ett, må en layoutfil i et Shopify-tema inneholde to flytende utdata-koder, content_for_header og content_for_layout. Den første brukes av Shopify til å legge til kode for analyse og for å gi rask tilgang til butikkets administrasjonsområde. Den andre, content_for_layout, vil bli erstattet av relevant mal fra mappemappen, f.eks. de product.liquid mal blir injisert når vi ser på en produktdetaljerside.
Layouts er en flott funksjon, og hjelper oss med å holde temaene fine og tørre. Det vil imidlertid være ganger at elementene i standard layoutfilen din må endres. Kanskje du vil lage en splash-side som ikke krever "normal" merkevarebygging og navigering. Det er mulig at du kanskje kan oppnå de ønskede resultatene med CSS, men mer sannsynlig vil du ønske å produsere forskjellige oppslag. Her kommer alternative layouter til spill.
Å lage et alternativt layout er veldig grei. Det første du må gjøre er å opprette en ny fil og gi den et relevant navn og .væske forlengelse. Filnavnet er opp til deg. Det som er viktig er at du lagrer det i oppsett mappe i temakatalogen din. I denne filen kan du plassere hvilken som helst HTML du trenger (det vil si HTML-deklarasjoner, CSS, JS-linker osv.) Sammen med de to stedene som er diskutert ovenfor.
For å kunne bruke denne layoutfilen, og effektivt overstyre standardinnstillingen theme.liquid layoutfil, bruker vi følgende flytende syntaks i noen av mikromalerne:
% layout "alternativ"%
Merk: du trenger ikke å inkludere .væske forlengelse. Nå når den aktuelle mikromalen behandles av Shopify, blir den gjengitt med alternative.liquid som sin layoutfil.
På samme måte som vi kan diktere spesifikke layouter som skal brukes på mikrosjablongene, kan vi bruke flytende logikk for å gjøre forskjellige produktmaler. Det finnes en rekke måter å oppnå dette i flytende - min foretrukne metode er å benytte seg av produkthåndtak. Hvis du noen gang har brukt WordPress, kan du tenke på en produkthåndtak på samme måte som a slug. Her er en typisk produktadresse fra A Book Apart-websiden for å demonstrere:
http://www.abookapart.com/products/responsive-web-design
I dette eksemplet er produkthåndtaket Responsivt webdesign - det siste elementet i nettadressen. Produkthåndterer opprettes automatisk for deg når du legger til et produkt i Shopify-administrasjonen, og er basert på navnet du skriver inn; store bokstaver erstattes med små bokstaver og mellomrom med bindestreker. Du kan selvfølgelig tilsidesette dem hvis du trenger det.
Som standard gir hver gang Shopify en produktdetaljer side den vil bruke product.liquid mikro mal. La oss si at vi ønsker å tjene en annen produktside bare for Ethans bok for å markere den. For å gjøre dette må vi gjøre et par endringer i product.liquid mal.
Etan Marcots bok Responsive Web Design på Shopify powered A Book Apart-sidenSom product.liquid mal har tilgang til alle dataene som er relatert til det aktuelle produktet, kan vi stille følgende spørsmål ved hjelp av en væske hvis uttalelse:
% if product.handle == "responsive-webdesign"% % inkluderer "responsive webdesign"% % else% [Normal HTML-kode for product.liquid] % endif%
Ved å legge til i hvis uttalelse, som vi så på i del to av denne serien, er vi i stand til å kontrollere hvilken markering som gjengis. Enkelt sagt, hvis product.handle er lik "responsivt webdesign" inkluderer vi filen som heter responsive-web-design.liquid. Men hvis ikke, gjør vi bare koden vi allerede har i vår product.liquid mal.
Dette eksempelet introduserer oss til flytende utdrag. Utdrag lever i den passende navnet utdrag mappe og refereres uten .væske forlengelse ved bruk av Liquid-merket % include%.
Som navnet antyder, bruker du % include% vil bokstavelig talt inkludere et stykke kode i mikromalen eller layoutfilen. I eksemplet ovenfor vil filen inneholde den alternative oppgraderingen som kreves for å vise frem Ethans bok, inkludert all nødvendig flytende kode for å trekke dataene om produktet inn i mal.
Selvfølgelig kan du spesifisere at denne malen skal brukes til en annen bok i tillegg til Ethans. Her er en måte å oppnå det på:
% if product.handle == "responsive-web-design" ELLER product.handle == "design-is-a-job"% % inkluderer "responsivt webdesign"% % else% [ Normal HTML-kode for product.liquid] % endif%
I dette tilfellet vil du kanskje gi nytt navn til koden din til noe mer passende, dvs.. produkt-showcase.liquid.
Det er verdt å merke seg at du ikke er i stand til å neste mapper i katalogen din. Følgelig har jeg en tendens til å prefikse filene mine med sin funksjon:
Accentsconagua
produkt-responsive web-design.liquidprodukt-showcase.liquidsamlinger-books.liquidVed å bruke denne navngivningskonvensjonen blir det enklere å finne utklipp, særlig ettersom bruken av dem øker.
Et eksempel på hvordan jeg brukte utdrag på 8-ansiktsområdet for å skille logiske bekymringer Jeg pleier å bruke utdrag på to forskjellige måter. For det første å skille kode i håndterbare biter, og for det andre for elementer på en side som jeg må gjenbruke, for eksempel en pagineringsblokk.
Som en generell tommelfingerregel her er hvordan jeg bestemmer hvor jeg skal legge til kode:
Et annet triks jeg har ansatt med stor effekt er å behandle en mikromal som visningsregulator - en idé jeg har tatt fra mange av MVC-rammene jeg har brukt. Dette kan være et nytt konsept for deg, så la oss se nærmere på det.
I eksemplene ovenfor bruker vi flytende logikk for å se etter et bestemt produkthåndtak i product.liquid mikro mal. Hvis svaret på vår hvis erklæring er sant at vi inkluderer en utdrag, ellers gir Shopify HTML-blokkene som finnes mellom % else% og % slutt om % tags.
For noen kan dette virke litt rotete og kan over tid bli vanskelig å lese, spesielt hvis du er standard product.liquid markup vokser. For å gjøre det enklere å administrere, kan vi bare ta vår standardmarkering ut av product.liquid-malmen og lage en utdrag for den - jeg pleier å ringe dette produkt-default.liquid.
Etter denne tilnærmingen kan vår product.liquid-fil bli refactored til følgende:
% if product.handle == "responsive-web-design"% % inkluderer "produktresponsivt webdesign"% % else% % inkluderer "produktstandard"% % endif%
Selvfølgelig, etter hvert som dine behov vokser, kan denne filen vokse til å inkorporere andre sjekker og relevante filer inkludert, avhengig av resultatene. Alternativene er ubegrensede.
Det er verdt å huske at det ikke bare er produkter som har håndtak i Shopify, samlinger og sider også. Ved å bruke samme tilnærming til samlinger kan vi gjøre følgende i vår collections.liquid mal:
% hvis collection.handle == "css"% % inkluderer "collection-css"% % else% % include "collection-default"% % endif%
sak I stedet for hvis elsif annet Denne metoden fungerer veldig bra hvis vi bare ønsker å se etter et bestemt håndtak, enten det er et produkt eller en samling, men hva om vi ønsker å utvide det til flere produkter eller samlinger?
Vi har to mulige tilnærminger, den første er ved å utvide vår hvis setning ved å bruke elsif. Her er et eksempel:
% if product.handle == "responsive-web-design"% % inkluderer "produkt-responsive webdesign"%% % elsif product.handle == "design-is-a-job"% % inkluderer "produktdesign-er-en-jobb"% % else% % inkluderer "produkt-standard"% % endif%
Dette eksempelet sjekker for to produkthåndterer igjen, og bare hvis det ikke er sant, vil det gjøre det produkt-default.liquid tekstutdrag.
Det er mulig å bruke flere elsif uttalelser i flytende, men det kan bli litt verbose. Et alternativ, og jeg tror neater tilnærming er å bruke sak. Her er eksemplet ovenfor refactored:
% case product.handle% % når "responsive webdesign"%% % include "produkt-responsive webdesign"%% % når "design-er-en-jobben"% % inkludere "produktdesign-er-en-jobb"% % else% % inkluderer "product-default"% % endcase%
Vi kan også gjøre en mer fuzzy sammenligning ved å bruke Liquid operatøren inneholder. La oss si at vi vil ha et produkt som har ordet lydhør i håndtaket for å bruke en annen utdrag. Slik kan vi nærme oss det med en enkel væske hvis uttalelse:
% hvis product.handle inneholder "responsive"% % include "produktresponsive"% % else% % include "product-default"% % endif%
Bruk av denne metoden ville bety at vi ikke måtte redigere vår mal for å legge til i en ny elsif eller sak for videre bøker som inneholder "responsive" i sin tittel.
Disse tilnærmingene kan også brukes i mikromalerne i temaet ditt. For eksempel kan du bruke den til å vise og skjule elementer programmert. Eksempler på dette kan være salgskort, spesialtilbud og relaterte produkter.
Håndtak kan også komme veldig bra når du arbeider med CSS og JavaScript. Mange av oss bruker kroppsklassen til CSS og JavaScript kroker, og akkurat som i WordPress er det ganske enkelt å legge til en rekke nyttige klasser til vårt kroppselement i Shopify.
Her er noen ideer:
Legg til det nåværende gjengitte malnavnet til kroppsklassen:
Vær oppmerksom på at vi bruker håndteringsfilteret for å rense utgangen vår. Noen eksempler på dette i aksjon er:
På grunn av dette kan vi ønske å legge til dagens produkthåndtak til vår kroppsklasse også. For å holde ting rent og ryddig kan vi bruke en hvis erklæring om betinget tilføyning av produkthåndtaket bare når vi ser på et produkt:
Temainnstillinger, en gang mestret, er en utrolig kraftig funksjon av Shopify-temaer 
Shopify Desktop Theme Editor for Mac muliggjør tilsynelatende filsynkronisering mellom ditt lokale filsystem og butikken din 