Byg et Shopify-tema med Liquid-motoren

Forfatter: Peter Berry

Oprettelsesdato: 14 Juli 2021

Opdateringsdato: 13 Kan 2024

Byg et Shopify-tema med Liquid-motoren - Kreativ

Indhold

Temafiler og mapper
Kortlægning af webadresser til skabeloner
Flydende: det grundlæggende
Forståelse af produkt. Flydende
Produktion
Logik
Filtre
Hvad er det næste?
Yderligere ressourcer og inspiration

I løbet af de sidste par uger har jeg bygget Shopify-temaet til Viewport Industries, firmaet Elliot Jay Stocks og jeg dannede sidste år. Vi valgte Shopify af flere grunde:

Det giver os mulighed for at sælge både digitale og fysiske produkter
Det er fuldt hostet, hvilket betyder ingen servere at bekymre sig om
Det understøtter en række betalingsportaler, der integreres pænt med vores bank
Det er temabaseret, hvilket betyder, at vi let kan genbruge vores eksisterende websteds HTML, CSS og JavaScript

Shopify bruger en skabelonmotor kaldet Liquid til at udlæse data fra din butik til dine skabeloner. Væske er måske den ene ingrediens i et Shopify-tema, du ikke har brugt før, og det kan være modstridende. Men den gode nyhed er, at det virkelig ikke er så svært at komme i gang med.

Hvis du nogensinde har brugt Smarty, ERB eller Twig, vil det følgende være kendt for dig. Hvis ikke, skal du ikke bekymre dig: det er bare et spørgsmål om at lære et par enkle regler. Når du har tilføjet flydende færdigheder til dit webudviklingsværktøjssæt, kan du begynde at opbygge temaer til klienter på ingen tid.

Temafiler og mapper

Shopify-temaer er intet andet end et antal filer (HTML-filer med .liquid-udvidelse, CSS, JS, billeder osv.) Og mapper. Temaer kan se ud og fungere, som du vil: der er virkelig ingen begrænsninger. Her er den grundlæggende struktur for et tema:

aktiver
config
layout
tema. flydende
uddrag
skabeloner
404. flydende
artikel. flydende
blog.flydende
vogn. flydende
samling. flydende
index.flydende
side.flydende
produkt. flydende
search.flydende

Med disse filer kan du oprette de mest basale temaer. Selvfølgelig vil du sandsynligvis tilføje nogle CSS, JavaScript og et par billeder. Du ville lægge disse i aktiver-mappen. (Det er værd at bemærke, at du i øjeblikket ikke har tilladelse til undermapper i din aktivmappe.)

For mere om hvordan temaer fungerer, og for at finde ud af om mapperne config og uddrag, vil jeg anbefale at læse Theme fra Scratch og Theme Settings på Shopify Wiki.

Alternativt kan du tilmelde dig det gratis partnerprogram, oprette en testbutik og inspicere et af de mange gratis temaer, der er tilgængelige i din testbutiks adminområde - bare gå til temaditoren i menuen Temaer.

Kortlægning af webadresser til skabeloner

Shopify-temaer fungerer ved at kortlægge den aktuelle URL til en bestemt skabelon. For eksempel, hvis vi ser et produkt, der har følgende URL ...

http://www.unitedpixelworkers.com/products/indianapolis

... så ved Shopify at bruge din produkt. flydende skabelon. Det er af denne grund, at du kun nogensinde skal bruge de ovennævnte filnavne til dine skabeloner.

Ud over at Shopify ved, hvilken skabelon der skal vises i forhold til den aktuelle URL, gør den en række meget specifikke variabler tilgængelige for os. Disse er kendt som 'skabelonvariabler' og gør det muligt for os at vise data i vores skabeloner.

For eksempel i vores product.liquid-skabelon har vi adgang til den passende navngivne produkt variabel. Dette betyder, at vi kan sende navn, beskrivelse, pris og tilgængelighed af vores produkt i vores skabelon. Vi bruger kombinationen af flydende og skabelonvariabler til at udfylde vores skabeloner med data, der vedrører vores produkter.

For en komplet liste over de tilgængelige skabelonvariabler, besøg Mark Dunkleys Shopify Cheat Sheet.

Flydende: det grundlæggende

Liquid er her for at gøre vores liv som temadesignere lettere. En af de vigtigste måder det gør på dette er ved brug af layout. Layouter er ideelle til at inkludere almindelige sideelementer såsom et overskrift, hovednavigation, sidefod osv.

I min mappestruktur ovenfor bemærker du en fil, der hedder tema. flydende i layoutmappen. Du kan tænke på theme.liquid som vores hovedskabelon. Alle vores andre skabeloner, såsom product.liquid, gengives i denne master-skabelon. Du kan have mere end et layout, hvis du ønsker det, men standardlayoutet skal altid kaldes theme.liquid.

Jeg har ikke set United Pixelworkers 'theme.liquid-fil, men du kunne forestille dig, at den indeholdt markeringen for de områder, der er skitseret i rødt nedenfor.

Sådan ser et grundlæggende tema. Flydende layout ud:

! DOCTYPE html>
html>
hoved>
{{content_for_header}}
titel> Sidetitel går her / titel>
/ hoved>
krop>
{{content_for_layout}}
/ krop>
/ html>

Du bemærker to sætninger pakket i dobbelt krøllede seler: {{content_for_header}} og {{content_for_layout}}. Dette er vores første eksempler på væske i aktion.

Shopify bruger ofte {{content_for_header}} til at føje specifikke filer til hovedet> sektionen af et dokument: for eksempel tilføjelse i sporingskode. {{content_for_layout}} er, hvor vores URL-tilknyttede skabelons indhold vises. Hvis vi f.eks. Ser en produktside, erstatter vores product.liquid-fil {{content_for_layout}} i vores layoutfil.

Forståelse af produkt. Flydende

Nu hvor vi har gennemgået det grundlæggende i layouts, er det tid til at se på en skabelon.Butikker handler om produkterne, så lad os se på produkt. flydende.

Her er et meget simpelt, men funktionelt eksempel på en produkt. Flydende skabelon.

h2> {{product.title}} / h2>
{{ Produkt beskrivelse }}
{% hvis produkt.tilgængeligt%}
form action = "/ cart / add" method = "post">
vælg id = "produkt-vælg" navn = ’id’>
{% for variant i product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ vælg>
input type = "send" name = "add" value = "Add to cart" id = "purchase" />
/ form>
{% ellers%}
p> Dette produkt er ikke tilgængeligt / p>
{% Afslut Hvis %}

Der er et antal vigtige flydende koncepter, der fungerer her. Lad os se på dem i rækkefølge.

Produktion

Den første linje kode indeholder sætningen {{product.title}}. Når det gengives, vil dette sende titlen på produktet, som som du nu ved bestemmes af URL'en. I eksemplet med United Pixelworkers nedenfor er produkttitlen simpelthen 'Indianapolis'.

Liquid bruger prikkesyntaksformatet. I dette tilfælde svarer {{product.title}} til produktskabelonvariablen og dens titelattribut. Vi kan levere produktbeskrivelsen på samme måde ved hjælp af {{ Produkt beskrivelse }}.

Dette kaldes i flydende termer som produktion. Al output er angivet med dobbelt krøllede seler, som følger: {{your_output}}.

Logik

På den næste linje i koden bemærker du en erklæring i en krøllet bøjle efterfulgt af et%: i dette tilfælde {% hvis produkt.tilgængeligt%}. Dette er et andet vigtigt koncept i Liquid kendt som logik. Længere nede vil du bemærke {% else%} og endelig {% endif%} udsagnene.

Det her hvis erklæring giver os mulighed for at diktere, hvad vores skabelon viser, baseret på en eller flere betingelser: i dette tilfælde om vores produkt er tilgængeligt eller ej. Effektivt siger dette, “hvis vores produkt er tilgængeligt, skal du vise oplysningerne om det; ellers viser en besked, der fortæller brugeren, at den er udsolgt ”.

Alle logiske udsagn i væske bruger den krøllede afstivningsprocentnotation, dvs. {% hvis…%}. Husk bare at lukke dine erklæringer korrekt, ellers løber du i problemer. For eksempel:

{% hvis produkt.tilgængeligt%}
Vis knappen Tilføj til kurv her
{% ellers%}
Vis besked om, hvornår produktet næste gang er tilgængeligt
{% Afslut Hvis %}

Filtre

Væske giver os mulighed for at manipulere vores output på flere måder. En af disse er at bruge filtre. Indholdet, der går ind i filteret, kommer ud i den anden ende ændret på en bestemt måde.

Ser man på produktet. Flydende eksempel ovenfor, vil du bemærke det { penge }. En variant er et udtryk, der bruges til at beskrive en variation af et produkt: for eksempel forskellige farver og størrelser. Hvad der er interessant her er, at vi bruger et filter til at ændre prisudgangen - i dette tilfælde ved at bruge penge-filteret. Dette vil resultere i, at butikens valutasymbol tilføjes foran på prisen.

Andre filtre inkluderer strip_html, som fjerner alle HTML-tags fra et givet stykke tekst og ucase, som konverterer det til store bogstaver.

Du kan også slutte filtre sammen. For eksempel:

{article.content}

I dette tilfælde tager vi indholdsattributten for artikelskabelonvariablen og sender den til strip_html-filteret og endelig til det afkortede filter. Du bemærker, at det afkortede filter giver os mulighed for at specificere, hvor længe vi vil have den endelige output: i dette tilfælde 20 tegn.

Filtre giver os også mulighed for hurtigt at arbejde på at skabe script- og billedelementer i skabeloner. Her er en meget hurtig måde at bruge et filter til at udsende et billede med et tilknyttet alt-tag:

{asset_url}

Brug af dette i vores Shopify-tema vil resultere i, at følgende img-element gengives i vores skabelon:

img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Site Logo" />

Det asset_url filter er meget nyttigt, da det returnerer den fulde sti til det aktuelle tema aktiver folder. Brug af dette filter gør det muligt for dig at anvende dit tema på tværs af flere butikker og ikke behøver at bekymre dig om stier.

Hvad er det næste?

Forhåbentlig har disse få eksempler vist dig, at Liquid ikke er så kompliceret. Selvfølgelig er der meget mere, du kan gøre med det, men ved at mestre output, logik og filtre er du godt på vej til at forstå det meste af, hvad du har brug for for at opbygge et Shopify-tema.