Share
I en del av denne serien (En webdesigners Introduksjon til Shopify) introduserte jeg deg til Shopify-handelsplattformen, forklarte en rekke hovedkonsepter og illustrert hvordan et Shopify-tema er strukturert.
Fremover vil denne opplæringen fokusere på flytende, Shopify-malingsspråket. Vi ser på fordelene med væske, diskuter hvordan det gjør oss i stand til å trekke inn og manipulere data fra butikkene våre og endelig vise frem en rekke hovedtrekk som du vil finne deg selv daglig i din Shopify-temautvikling.
Hvis du trenger hjelp med å fikse og utgjøre med Shopify-butikken din eller til og med sette den opp fra grunnen, kan du finne en Shopify-ekspert på Envato Studio klar til å hjelpe deg. Her er noen eksempler:
Dette er en god grunnleggende tjeneste som hjelper deg med å få satt opp på Shopify raskt og enkelt. Her er hva det inkluderer:
Hvis du trenger hjelp med å installere et tema på riktig måte, kan denne Shopify-eksperten hjelpe. De vil:
Den grunnleggende tjenesten koster bare $ 50, og flere statister er tilgjengelige hvis du velger.
Hva om du trenger et tema tilpasset? Denne leverandøren tilbyr tilpasning av ditt eksisterende Shopify-tema for å dekke alle dine behov.
Tilpasninger inkluderer:
Leter du etter en omfattende pakke? Denne leverandøren vil installere og sette opp temaet ditt; legg til din logo og merkevarebygging; tilpasse farger og skrifter; tilpasse væske maler; legg til skript og installer apper for funksjonalitet; sette opp produktetiketter, varianter og kategorier; legge til eller importere dine produkter, tid tillatelse og gjør noen nødvendig testing.
Dette inkluderer opptil 20 timer oppsett og utviklingstid.
Det er mange flere Shopify-eksperter tilgjengelig for å hjelpe deg på Envato Studio. Så bla gjennom tilgjengelige tjenester - eller les videre for å finne ut mer om bruk av flytende.
Hvis du ikke er kjent med begrepet malingsspråk, beskriver jeg det ofte som en bro mellom dataene i butikken din og HTML-malene som sendes til nettleseren.
Ved å bruke noen enkle å lese (og lett å huske) konstruksjoner kan vi få tilgang til data fra butikken vår (for eksempel produkttittel, samlingsbeskrivelse, et sett med produktbilder eller et blogginnlegg) og utdata disse dataene direkte i våre maler . En av de viktigste fordelene er at vi ikke trenger å ha noen kunnskap om hva disse dataene er - heller vi trenger bare å vite hvilke variabler vi har tilgang til i hver mal.
Et eksempel på en typisk product.liquid-mal i SublimeText2 med utheving av flytende syntaksSom diskutert i del 1 av denne serien, bestemmer Shopify hvilken mal som skal sendes til nettleseren basert på den forespurte nettadressen. For eksempel hvis nettadressen er http://shopify-for-designers.myshopify.com/collections/cups Shopify vil gjengi collections.liquid mal.
Når Shopify har utarbeidet den aktuelle malen for å gjengi, analyserer den malen (og dens ytre layoutfil) på jakt etter Flytende plassholdere. Når disse oppstår, erstatter Shopify Væskekoden med relevante data fra butikken din.
En annen måte å tenke på malespråk er som "finne og erstatte" i et tekstredigeringsprogram. Plattformen, i dette tilfellet Shopify, søker etter alle flytende plassholdere og erstatter dem deretter med data fra butikken din. Det endelige konstruerte dokumentet sendes deretter til nettleseren som HTML.
Det kan føle seg litt fremmede først hvis dette er din første forgang til templering, men du vil snart få tak i det.
EN plassholder er et stykke kode som til slutt blir erstattet når mal er sendt til nettleseren.
Det finnes to typer plassholdere i væske. Den første er de to parentesene å betegne produksjon og den andre er parentesprosent %% å betegne logikk.
Her er et raskt eksempel på en produksjon plassholder som du vanligvis finner i product.liquid mikro mal:
product.title
Når det blir gjengitt, vil dette gi ut navnet på det aktuelle produktet i stedet for , for eksempel:
Keir's Coffee Cup
Utgang, med mindre det er manipulert med et filter (som vi vil se på senere), er det bare et tilfelle at du erstatter plassholderen med tekst fra butikken din.
I tillegg til at vi kan få data fra butikken vår og vise den i våre maler, kan Liquid, som vist ovenfor, også kontrollere nøyaktig hva vises i våre maler ved hjelp av logiske konstruksjoner og sløyfer.
For eksempel kan vi velge å vise en annen HTML-kode, avhengig av om det aktuelle produktet er på lager eller ikke.
Vi kan også bruke Liquid til å skrive ut det samme koden mange ganger - for eksempel en serie produktbilder. Ved hjelp av løkker tillater oss å skrive ut alle produktene som er knyttet til et produkt i noen få linjer med flytende kode.
Væske er virkelig kraftig, og mens du kanskje tror vi kommer inn i programmeringsområdet, er jeg sikker på at du plukker opp det ganske raskt.
Nå som du har en grunnleggende forståelse av hvordan Liquid fungerer, kan vi ta en titt på fire viktige funksjoner og hvordan de fungerer i forhold til temautvikling.
Som nevnt tidligere er de to parenteser i en .væske fil betegne an produksjon plassholder. Her er to eksempler som du ofte kommer over:
shop.name product.description
Output gjør det mulig for oss å trekke et spesifikt stykke data fra butikken vår inn i vår mal og, som navnet antyder, utdata det i stedet for flytende plassholder.
La oss si at butikken min ble kalt "Keir's Coffee Emporium". Hvis jeg skulle bruke shop.name flytende tag Shopify vil ta navnet på butikken min og erstatte den flytende plassholderen med butikkens navn direkte inn i min mal som HTML.
Like, hvis vi brukte produktbeskrivelse i vår product.liquid mal hvilken som helst tekst som er skrevet inn i WYSIWYG-editoren for det aktuelle produktet, vil bli sendt ut i stedet for produktbeskrivelse plassholder.
Merk: WYSIWYG-editoren vil levere formatert HTML, slik at du ikke trenger å pakke inn produktbeskrivelse med noen HTML-elementer, f.eks. en .
Enhver variabel, enten det er en global variabel (tilgjengelig i hver enkelt mal i temaet ditt) eller en malnivåvariabel (bare tilgjengelig for en bestemt mal), kan skrives ut på denne måten. Andre eksempler inkluderer:
shop.description product.title collection.title collection.description
For en fullstendig liste over variabler som du kan skrive ut i temaene dine, anbefaler jeg sterkt bokmerke Mark Dunkleys fuselag. Jeg finner meg selv å bruke dette daglig.
For å oppsummere, er flytende utgang veldig mye som "finne og erstatte". Når gjengivelsen av malen Shopify skal gå, finner du alle forekomster av Liquid output-koder og erstatter dem med relevante data fra butikken din.
Du vil også merke av disse eksemplene at Liquid bruker punktsyntaxen for tilgang til data. Objektet som går foran punktet er variabelen, mens elementet etter det er et attributt for den variabelen. For eksempel har vår butikkvariabel ovenfor både navn og beskrivelse attributt.
Shopify-dokumentasjonssiden inneholder kodeeksempler og screencasts La oss bevege oss på flytende logikk. Mens det er litt mer komplisert for første gang, er det ikke så vanskelig å forstå logikketiketter når du har prøvd dem selv.
Mens væske produksjon plassholdere tillater oss å ta tak i data og vise det i våre maler Væske logikk tagger tillater oss å kontrollere strømmen av en mal. I motsetning til utdatamerker fører ikke inkludering av logikketiketter i maler til at noe blir direkte gjengitt, men de tillater oss å kontrollere hva er gjengitt.
Et typisk eksempel jeg bruker til å illustrere hvordan flytende logikk er brukt, er å markere når et produkt er utsolgt. Følgende eksempel vil typisk bli funnet i product.liquid mikro mal:
% hvis product.available% Dette produktet er tilgjengelig % else% Beklager, dette produktet er utsolgt % endif%
Som du vil se syntaxen for flytende logikk er litt annerledes enn utdata. I stedet for avgrensere vi bruker %%.
I eksempelet ovenfor kontrollerer vi hva som er utdata til vår mal ved hjelp av en enkel hvis, ellers, slutt om uttalelse. På mange måter hvis uttalelser er som spørsmål.
I eksemplet ovenfor hvis svaret på vår hvis uttalelsesspørsmålet er ekte Vi gir ordene "Dette produktet er tilgjengelig", hvis det er falsk vår maler fortsetter og skriver ut teksten etter vår % else% klausul - i dette tilfellet "Beklager, dette produktet er utsolgt".
Du vil finne deg selv å bruke hvis uttalelser mye i Shopify tema utvikling. Her er et annet eksempel for å hjelpe din forståelse:
% hvis cart.item_count> 0%Du har cart.item_count element (er) i handlekurven din
% else%Det er ingenting i handlekurven din :( Hvorfor ikke se vår produktserie
% slutt om %
Dette eksemplet viser en måte at du enten kan vise antall elementer i en besøkende handlevogn eller skrive ut en kobling til produktene dine.
Du vil legge merke til i dette eksemplet bruker vi større enn > operatør. Som cart.item_count variabel returnerer antall elementer i den nåværende brukeren vognen vi kan sjekke for å se om den er større enn null, det vil si at den har elementer i den.
Hvis dette returnerer Det er ingenting i handlekurven din :( Hvorfor ikke se vår produktserieekte Vi kan sende meldingen med gjeldende elementtall, om ikke vi kan sende ut
Du har tilgang til et bredt spekter av operatører i flytende, hvorav mange du finner deg selv regelmessig:
Accentsconagua
== lik!= ikke lik> større enn< mindre enn> = større eller lik<= mindre eller likeller dette eller detog må være dette og detinneholder Inkluderer substringen hvis den brukes på en streng eller et element hvis det brukes på en matriseNeste, la oss fokusere på konseptet Liquid Loops.
Hvis du har gjort noen form for grunnleggende programmering, vil begrepet looping over data være veldig kjent for deg. Bruk en løkke, ofte kjent som a for sløyfe, tillater oss å skrive ut det samme koden et kjent antall ganger i vår mal.
La oss ta en titt på et eksempel fra et Shopify-tema for å styrke konseptet:
% for bilde i product.images%% endfor%
I dette eksemplet, som vanligvis finnes i product.liquid mikromal, bruker vi en sløyfe for å sende ut hvert bilde som er tilknyttet det aktuelle produktet. La oss bryte det ned i trinn for å forstå det fullt ut.
Vår åpningslinje introduserer oss til ideen om samlinger i flytende. I motsetning til produktsamlinger som vi så på i del ett samlinger i væske er forskjellige. Det er en uheldig navnekonvensjon i denne forbindelse, så jeg liker å referere til samlinger i Liquid as Flytende samlinger for å unngå forvirring.
En flytende samling i Shopify-temaer kan ta mange former, men et godt eksempel er product.images som brukt ovenfor. En flytende samling er lett å se på som det vanligvis tar flertallsformen - som i Bilder ovenfor. I vårt eksempel omhandler vi en flytende samling av alle bildene som er knyttet til et produkt.
Et annet eksempel er product.variants. Dette ville returnere et objekt som inneholder detaljer om alle produktvarianter som er klare til å sløyfe i vår mal. Hvis du trenger en primer på produktvarianter, diskuterte vi det i del ett.
Du vil også legge merke til at vi bruker ordet bilde å angi gjeldende element i løkken. Hver gang vi går rundt vår løkke bilde vil gi oss tilgang til dataene knyttet til hvert bilde i sin tur. Naturligvis vil dette være annerledes på hver løkke.
Det er også verdt å merke seg at vi ikke trenger å vite hvor mange sløyfer som vil oppstå. Etter at det ikke er flere bilder å sløyfe over, vil Shopify fortsette og gjengi neste del av malen.
Den andre linjen i koden vår er del HTML og del Liquid. Du vil legge merke til at src Attributtet er befolket med en Liquid output-tag. Vi ser på filtre, betegnet av | tegn, neste men denne korte konstruksjonen vil fylle ut src attributtet med den fullt kvalifiserte URL til den "små" versjonen av det nåværende bildet i vår loop.
Den endelige linjen i vårt eksempel er vår avslutning EndFor uttalelse. Dette lukker effektivt noen kode som blir gjengitt i sløyfen.
Hvis vi hadde tre bilder i vår product.images objekt den endelige produksjonen ville se slik ut:
Pure Fix Cycles bruker løkker til å utføre de mange produktvarianter for deres Aerospoke-hjulLooper er veldig nyttige og noe du møter daglig i temautviklingen. Utlevering av bilder og produktvarianter er to vanlige eksempler.
Jeg nevnte filtre i forhold til vår loop-eksempel tidligere, så la oss gå inn i litt mer detaljert og se på hvordan de fungerer.
Filtre brukes sammen med en utdatamerker. Deres formål er å manipulere dataene på en måte slik at formatet endres. Et godt eksempel er datofilteret:
article.published_at | dato: '% d% B% Y'
Uten filteret ville Shopify bare sende ut datoen bloggartikkelen ble publisert på i formatet den er lagret i databasen - som kanskje ikke er menneskelig lesbar. Men ved å legge til i | og med datofilteret kan vi manipulere formatet selv.
Vi starter til venstre med et datatykke, i dette tilfellet en dato, og ved å bruke filteret kommer det ut den andre siden endret. Dette er i hovedsak det eneste formålet med et filter. Det tar et stykke data og manipulerer på en eller annen måte slik at dens form endres.
Mark Dunkley's cheat sheet beskriver alle tilgjengelige flytende filtreHer er et annet eksempel:
'style.css' | asset_url | stylesheet_tag
Her bruker vi to filtre med det ultimate målet å skape et fullstendig stilelement i vår layoutfil.
Vi starter til venstre med navnet på vår CSS-fil og bruker først ASSET_URL filter. Dette er et utrolig nyttig filter. Siden vi ikke aner hvor vår style.css-fil er lokalisert på Shopify-nettverket (annet enn i vår aktivitetsmappe innenfor vårt tema), trenger vi en måte for Shopify å fylle banen til filen.
Dette er formålet med ASSET_URL filter. Det vil ta navnet på filen vår, style.css i dette eksemplet, og forhåndsfør hele banen til butikkens mappe. Det er verdt å merke seg at det ikke kontrollerer for å se at filen eksisterer.
Slik ser det ut når det går ut:
//cdn.shopify.com/s/files/1/0222/9076/assets/style.css
Det endelige filteret i kjeden, stylesheet_tag, tar denne nettadressen og bryter den inn i et stilelement som deretter blir levert i vår layoutfil. Her er sluttresultatet:
Hvert filter tar utgangen fra det forrige filteret og endrer det på sin side. Når det ikke er noen andre filtre for å sende data inn, blir resultatet utført som HTML i malen.
Det er mange veldig nyttige filtre, her er bare noen få du finner deg selv ved å bruke:
I denne opplæringen har vi gått litt over bakken. Vi har sett på Liquid og dets forhold til våre HTML mikromaler og layoutfiler, og sett på fire nøkkelbegreper - utgang, logikk, sløyfer og filtre.
Et flott neste skritt ville være å åpne en gratis Shopify-partnerkonto og begynne å dissekere et tema for deg selv. Mange av eksemplene som brukes i denne opplæringen, er hentet fra min ekstremt blanke benstartertema som er tilgjengelig på GitHub.
I forberedelse til del tre anbefaler jeg at du laster ned en kopi og bruker den til en utviklingsbutikk. Fullstendig informasjon om opplasting av et tema er tilgjengelig i Shopify-dokumentene. Det er bokstavelig talt så enkelt som å laste opp en ZIP-fil. Ha en lek med malereditoren i utviklingsbutikkene dine admin, endre noen få koder, bruk et filter eller to og legg til elementer i layoutfilen for å se hvordan ting endres.
I den siste delen av denne korte serien vil jeg introdusere deg til noen mer avanserte ideer som viser hvor fleksibel Liquid og Shopify kan være. Vi vil se på hvordan de gjør at du kan få dine temaer til å synge med eksempler fra mine egne prosjekter og andre kjente Shopify butikker.
% endfor% 
