Bygg et Shopify-tema med Liquid-motoren

Forfatter: Peter Berry

Opprettelsesdato: 14 Juli 2021

Oppdater Dato: 3 Kan 2024

Bygg et Shopify-tema med Liquid-motoren - Kreativ

Innhold

Temafiler og mapper
Kartlegge nettadresser til maler
Flytende: det grunnleggende
Forstå produkt. Flytende
Produksjon
Logikk
Filtre
Hva blir det neste?
Ytterligere ressurser og inspirasjon

I løpet av de siste ukene har jeg bygget Shopify-temaet for Viewport Industries, selskapet Elliot Jay Stocks og jeg dannet i fjor. Vi valgte Shopify av flere grunner:

Det lar oss selge både digitale og fysiske produkter
Det er fullt vert, noe som betyr at ingen servere å bekymre seg for
Den støtter en rekke betalingsportaler som integreres pent med banken vår
Det er temabasert, noe som betyr at vi enkelt kan bruke vårt eksisterende nettsted HTML, CSS og JavaScript

Shopify bruker en malmotor kalt Liquid for å sende data fra butikken din til malene dine. Væske er kanskje den eneste ingrediensen i et Shopify-tema du ikke har brukt før, og det kan være offset. Men den gode nyheten er at det virkelig ikke er så vanskelig å komme i gang med.

Hvis du noen gang har brukt Smarty, ERB eller Twig, vil det følgende være kjent for deg. Hvis ikke, ikke bekymre deg: det handler bare om å lære noen få enkle regler. Når du har lagt til flytende ferdigheter i verktøysettet for webutvikling, kan du begynne å lage temaer for klienter på kort tid.

Temafiler og mapper

Shopify-temaer er ikke mer enn et antall filer (HTML-filer med .liquid-utvidelse, CSS, JS, bilder og så videre) og mapper. Temaer kan se ut og fungere slik du vil: det er virkelig ingen begrensninger. Her er den grunnleggende strukturen til et tema:

eiendeler
config
oppsett
tema. flytende
utdrag
maler
404. flytende
artikkel. flytende
blog. flytende
vogn. flytende
samling. flytende
index.flytende
side. flytende
produkt. flytende
søk. flytende

Med disse filene kan du lage de mest grunnleggende temaene. Selvfølgelig vil du sannsynligvis legge til noen CSS, JavaScript og noen få bilder. Du vil sette disse i aktiva-mappen. (Det er verdt å merke seg at du for øyeblikket ikke har tillatt undermapper i aktiva-mappen din.)

For mer om hvordan temaer fungerer, og for å finne ut om config- og snippets-mappene, vil jeg anbefale å lese Theme fra Scratch og Theme Settings på Shopify Wiki.

Alternativt kan du registrere deg for det gratis Partner-programmet, opprette en testbutikk og inspisere et av de mange gratis temaene som er tilgjengelige fra testbutikkens adminområde - bare gå til temaredigereren i Tememenyen.

Kartlegge nettadresser til maler

Shopify-temaer fungerer ved å kartlegge den nåværende URL-en til en bestemt mal. For eksempel hvis vi ser på et produkt som har følgende URL ...

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

... da vet Shopify å bruke din produkt. flytende mal. Av denne grunn bør du bare bruke filnavnene som er oppført ovenfor for malene dine.

I tillegg til at Shopify vet hvilken mal som skal vises i forhold til gjeldende URL, gjør den en rekke veldig spesifikke variabler tilgjengelig for oss. Disse er kjent som 'malvariabler' og gjør det mulig for oss å vise data i malene våre.

For eksempel i vår product.liquid-mal har vi tilgang til det passende navnet produkt variabel. Dette betyr at vi kan sende navn, beskrivelse, pris og tilgjengeligheten av produktet vårt i malen. Vi bruker kombinasjonen av væske- og malvariabler for å fylle ut malene våre med data som gjelder produktene våre.

For en fullstendig liste over tilgjengelige malvariabler, besøk Mark Dunkleys Shopify Cheat Sheet.

Flytende: det grunnleggende

Liquid er her for å gjøre livene våre som temadesignere enklere. En av de viktigste måtene den gjør dette på er ved bruk av oppsett. Oppsett er ideelle for å inkludere vanlige sideelementer som topptekst, hovednavigering, bunntekst og så videre.

I mappestrukturen ovenfor vil du legge merke til en fil som heter tema. flytende i oppsettmappen. Du kan tenke på theme.liquid som vår hovedmal. Alle våre andre maler, for eksempel product.liquid, er gjengitt i denne hovedmalen. Du kan ha mer enn ett oppsett hvis du ønsker det, men standardoppstillingen skal alltid kalles theme.liquid.

Jeg har ikke sett United Pixelworkers 'tema.flytende fil, men du kan forestille deg at den inneholder markeringen for områdene skissert i rødt nedenfor.

Slik ser et grunnleggende tema. Flytende layout ut:

! DOCTYPE html>
html>
hodet>
{{content_for_header}}
tittel> Sidetittel går hit / tittel>
/ hode>
kropp>
{{content_for_layout}}
/ kropp>
/ html>

Du vil legge merke til to setninger pakket inn i doble krøllete bukseseler: {{content_for_header}} og {{content_for_layout}}. Dette er våre første eksempler på væske i aksjon.

Shopify bruker ofte {{content_for_header}} for å legge til spesifikke filer i hodet> delen av et dokument: for eksempel å legge til i sporingskode. {{content_for_layout}} er innholdet til den malede URL-en vår. Hvis vi for eksempel ser på en produktside, vil product.liquid-filen erstatte {{content_for_layout}} i layoutfilen vår.

Forstå produkt. Flytende

Nå som vi har gått gjennom det grunnleggende om oppsett, er det på tide å se på en mal.Butikker handler om produktene, så la oss se på det produkt. flytende.

Her er et veldig enkelt, men funksjonelt eksempel på en produkt. Flytende mal.

h2> {{product.title}} / h2>
{{ produktbeskrivelse }}
{% if product.available%}
form action = "/ cart / add" method = "post">
velg id = "produkt-velg" navn = ’id’>
{% for variant i product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / alternativ>
{% endfor%}
/ velg>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ skjema>
{% else%}
p> Dette produktet er ikke tilgjengelig / p>
{% slutt om %}

Det er en rekke viktige flytende konsepter på jobb her. La oss se på dem i rekkefølge.

Produksjon

Den første linjen med kode inneholder uttrykket {{product.title}}. Når det gjengis, vil dette sende tittelen på produktet, som som du nå vet bestemmes av URL-en. I United Pixelworkers-eksemplet nedenfor er produkttittelen ganske enkelt 'Indianapolis'.

Liquid bruker prikkesyntaksformatet. I dette tilfellet tilsvarer {{product.title}} produktmalvariabelen og tittelattributtet. Vi kan sende produktbeskrivelsen på samme måte ved hjelp av {{ produktbeskrivelse }}.

Dette er kjent i flytende form som produksjon. All utgang er betegnet med dobbel krøllete bukseseler, som følger: {{your_output}}.

Logikk

På neste linje i koden vil du legge merke til en uttalelse i en krøllete avstivning etterfulgt av en%: i dette tilfellet {% if product.available%}. Dette er et annet viktig konsept i Liquid kjent som logikk. Lenger ned vil du merke {% else%} og til slutt {% endif%} uttalelsene.

Dette hvis uttalelse gjør det mulig for oss å diktere hva malen vår viser, basert på en eller flere forhold: i dette tilfellet om produktet vårt er tilgjengelig eller ikke. Effektivt sier dette, “hvis produktet vårt er tilgjengelig, vis informasjonen om det; ellers viser en melding som lar brukeren vite at den er utsolgt ”.

Alle logiske setninger i væske bruker den krøllete avstivningsprosenten, dvs. {% hvis…%}. Bare husk å lukke uttalelsene dine riktig, ellers vil du komme i trøbbel. For eksempel:

{% if product.available%}
Vis Legg til kurv-knappen her
{% else%}
Vis melding om når produktet neste gang blir tilgjengelig
{% slutt om %}

Filtre

Væske gjør det mulig for oss å manipulere produksjonen vår på flere måter. En av disse er å bruke filtre. Innholdet som går inn i filteret vil komme ut i den andre enden på en bestemt måte.

Ser du på produktet. Flytende eksempel ovenfor, vil du legge merke til {penger}. En variant er et begrep som brukes for å beskrive en variant av et produkt: for eksempel forskjellige farger og størrelser. Det som er interessant her er at vi bruker et filter for å endre prisutgangen - i dette tilfellet ved å bruke pengefilteret. Dette vil føre til at butikkens valutasymbol blir lagt til foran på prisen.

Andre filtre inkluderer strip_html, som vil fjerne alle HTML-koder fra et gitt stykke tekst og ucase, som vil konvertere den til store bokstaver.

Du kan også koble sammen filtre. For eksempel:

{article.content}

I dette tilfellet tar vi innholdsattributtet til artikkelmalvariabelen og overfører den til strip_html-filteret og til slutt til det avkortede filteret. Du vil legge merke til at avkortingsfilteret lar oss spesifisere hvor lenge vi vil at den endelige utgangen skal være: i dette tilfellet 20 tegn.

Filtre lar oss også jobbe raskt med å lage skript- og bildeelementer i maler. Her er en veldig rask måte å bruke et filter til å sende ut et bilde med en tilknyttet alt-tag:

{asset_url}

Ved å bruke dette i vårt Shopify-tema vil følgende img-element bli gjengitt i malen vår:

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

De asset_url filteret er veldig nyttig ettersom det returnerer hele banen til det aktuelle temaet eiendeler mappe. Å bruke dette filteret gjør det mulig for deg å bruke temaet ditt i flere butikker og ikke trenger å bekymre deg for stier.

Hva blir det neste?

Forhåpentligvis har disse få eksemplene vist deg at Liquid ikke er så komplisert. Selvfølgelig er det mye mer du kan gjøre med det, men ved å mestre utdata, logikk og filtre er du godt på vei til å forstå det meste av det du trenger for å bygge et Shopify-tema.