Skapa ett Shopify-tema med Liquid-motorn

Författare: Peter Berry

Skapelsedatum: 14 Juli 2021

Uppdatera Datum: 13 Maj 2024

Skapa ett Shopify-tema med Liquid-motorn - Kreativ

Innehåll

Temafiler och mappar
Kartläggning av webbadresser till mallar
Vätska: grunderna
Förstå produkt. Flytande
Produktion
Logik
Filter
Vad kommer härnäst?
Ytterligare resurser och inspiration

Under de senaste veckorna har jag byggt Shopify-temat för Viewport Industries, företaget Elliot Jay Stocks och jag bildade förra året. Vi valde Shopify av flera skäl:

Det gör att vi kan sälja både digitala och fysiska produkter
Det är fullt värd, vilket innebär att inga servrar att oroa sig för
Det stöder ett antal betalningsportaler som integreras fint med vår bank
Det är temabaserat, vilket innebär att vi enkelt kan återanvända vår befintliga webbplats HTML, CSS och JavaScript

Shopify använder en mallmotor som heter Liquid för att mata ut data från din butik till dina mallar. Vätska är kanske den enda ingrediensen i ett Shopify-tema som du inte har använt tidigare och det kan vara utmanande. Men den goda nyheten är att det verkligen inte är så svårt att komma igång med.

Om du någonsin har använt Smarty, ERB eller Twig kommer det som följer att vara bekant för dig. Om inte, oroa dig inte: det är bara att lära sig några enkla regler. När du väl har lagt till flytande färdigheter i din webbutvecklingsverktygssats kan du snabbt börja bygga teman för kunder.

Temafiler och mappar

Shopify-teman är inget annat än ett antal filer (HTML-filer med ett .liquid-tillägg, CSS, JS, bilder och så vidare) och mappar. Teman kan se ut och fungera hur du vill: det finns verkligen inga begränsningar. Här är ett temas grundläggande struktur:

tillgångar
konfigurera
layouter
tema. flytande
utdrag
mallar
404. flytande
artikel. flytande
blogg. flytande
vagn. flytande
collection.liquid
index.vätska
page.liquid
produkt. flytande
search.liquid

Med dessa filer kan du skapa de mest grundläggande teman. Naturligtvis skulle du förmodligen vilja lägga till i vissa CSS, JavaScript och några bilder. Du skulle lägga dem i tillgångsmappen. (Det är värt att notera att du för närvarande inte tillåter undermappar i din tillgångsmapp.)

För mer information om hur teman fungerar, och för att ta reda på konfigurations- och utdragsmapparna, rekommenderar jag att du läser Theme från Scratch och Theme Settings på Shopify Wiki.

Alternativt kan du registrera dig för det kostnadsfria partnerprogrammet, skapa en testbutik och inspektera ett av de många gratis teman som finns tillgängliga i testbutikens administratörsområde - gå bara till temaredigeraren i teman-menyn.

Kartläggning av webbadresser till mallar

Shopify-teman fungerar genom att mappa den aktuella webbadressen till en specifik mall. Till exempel om vi tittar på en produkt som har följande URL ...

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

... då vet Shopify att använda din produkt. flytande mall. Det är av den anledningen att du bara ska använda filnamnen ovan för dina mallar.

Förutom att Shopify vet vilken mall som ska visas i förhållande till den aktuella webbadressen, gör den ett antal mycket specifika variabler tillgängliga för oss. Dessa kallas mallvariabler och gör det möjligt för oss att visa data i våra mallar.

Till exempel i vår product.liquid-mall har vi tillgång till det passande namnet produkt variabel. Det betyder att vi kan skriva ut namn, beskrivning, pris och tillgänglighet av vår produkt i vår mall. Vi använder kombinationen av flytande och mallvariabler för att fylla i våra mallar med data som rör våra produkter.

För en fullständig lista över tillgängliga mallvariabler, besök Mark Dunkleys Shopify Cheat Sheet.

Vätska: grunderna

Liquid är här för att underlätta våra liv som temadesigners. Ett av de viktigaste sätten att göra detta är med hjälp av layouter. Layouter är idealiska för att inkludera vanliga sidelement som sidhuvud, huvudnavigering, sidfot och så vidare.

I min mappstruktur ovan ser du en fil som heter tema. flytande i layoutmappen. Du kan tänka på theme.liquid som vår huvudmall. Alla våra andra mallar, såsom product.liquid, återges i denna huvudmall. Du kan ha mer än en layout om du vill, men standard ska alltid kallas theme.liquid.

Jag har inte sett United Pixelworkers 'theme.liquid-fil, men du kan föreställa dig att den innehåller markeringen för de områden som anges i rött nedan.

Så här kan ett grundläggande tema. Flytande layout se ut:

! DOCTYPE html>
html>
huvud>
{{content_for_header}}
titel> Sidtitel går hit / titel>
/ huvud>
kropp>
{{content_for_layout}}
/ kropp>
/ html>

Du kommer att märka två fraser inslagna i dubbla lockiga hängslen: {{content_for_header}} och {{content_for_layout}}. Dessa är våra första exempel på vätska i aktion.

Shopify använder ofta {{content_for_header}} för att lägga till specifika filer i rubriken> avsnitt i ett dokument: till exempel lägga till spårningskod. {{content_for_layout}} är där vår webbadressmappade mall visas. Om vi till exempel tittar på en produktsida kommer vår product.liquid-fil att ersätta {{content_for_layout}} i vår layoutfil.

Förstå produkt. Flytande

Nu när vi har gått igenom grunderna för layouter är det dags att titta på en mall.Butiker handlar om produkterna, så låt oss titta på det produkt. flytande.

Här är ett mycket enkelt men funktionellt exempel på en produkt. Flytande mall.

h2> {{product.title}} / h2>
{{ Produktbeskrivning }}
{% if product.available%}
form action = "/ cart / add" method = "post">
välj id = "produkt-välj" namn = ’id’>
{% för variant i product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ välj>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ form>
{% else%}
p> Denna produkt är inte tillgänglig / p>
{% endif%}

Det finns ett antal viktiga flytande koncept här. Låt oss titta på dem i ordning.

Produktion

Den första kodraden innehåller frasen {{product.title}}. När den renderas kommer detta att skriva ut produktens titel, som som du nu vet bestäms av URL: n. I exemplet United Pixelworkers nedan är produkttiteln helt enkelt ”Indianapolis”.

Liquid använder syntaxformatet. I detta fall motsvarar {{product.title}} produktmallvariabeln och dess attribut. Vi kan skriva ut produktbeskrivningen på samma sätt med {{ Produktbeskrivning }}.

Detta är känt i flytande termer som produktion. All utmatning betecknas med dubbla lockiga hängslen, enligt följande: {{your_output}}.

Logik

På nästa rad i koden kommer du att märka ett uttalande i ett lockigt stöd följt av%: i det här fallet {% if product.available%}. Detta är ett annat viktigt begrepp i vätska som kallas logik. Längre ner kommer du att märka {% else%} och slutligen {% endif%} uttalanden.

Detta if uttalande gör att vi kan diktera vad vår mall visar, baserat på ett eller flera villkor: i det här fallet, om vår produkt är tillgänglig eller inte. Effektivt säger detta, ”om vår produkt är tillgänglig, visa informationen som rör den; annars visa ett meddelande som låter användaren veta att det är slut i lager ”.

Alla logiska uttalanden i Liquid använder den lockiga stagprocentuella noteringen, dvs. {% om ...%}. Kom bara ihåg att stänga dina uttalanden på rätt sätt, annars stöter du på problem. Till exempel:

{% if product.available%}
Visa knappen Lägg i kundvagn här
{% else%}
Visa meddelande om när produkten blir nästa tillgänglig
{% endif%}

Filter

Vätska gör det möjligt för oss att manipulera vår produktion på flera sätt. En av dessa är att använda filter. Innehållet som går in i filtret kommer att komma ut i andra änden på ett specifikt sätt.

När du tittar på produkten. Flytande exempel ovan, kommer du att märka det {pengar}. En variant är en term som används för att beskriva en variation av en produkt: till exempel olika färger och storlekar. Det som är intressant här är att vi använder ett filter för att ändra prisutgången - i det här fallet genom att använda pengarfiltret. Detta leder till att butikens valutasymbol läggs till på framsidan av priset.

Andra filter inkluderar strip_html, som tar bort alla HTML-taggar från en viss text och ucase, som konverterar den till versaler.

Du kan också gå med i filter tillsammans. Till exempel:

{article.content}

I det här fallet tar vi innehållsattributet för artikelmallvariabeln och skickar den till strip_html-filtret och slutligen till det avkortade filtret. Du kommer att märka att avkortningsfiltret tillåter oss att ange hur länge vi vill att den slutliga utgången ska vara: i det här fallet 20 tecken.

Med filter kan vi snabbt arbeta med att skapa skript- och bildelement i mallar. Här är ett mycket snabbt sätt att använda ett filter för att mata ut en bild med en tillhörande alt-tagg:

{asset_url}

Om du använder detta i vårt Shopify-tema kommer följande img-element att återges i vår mall:

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

De asset_url filter är mycket användbart eftersom det returnerar hela sökvägen till det aktuella temat tillgångar mapp. Med det här filtret kan du använda ditt tema i flera butiker och inte behöva oroa dig för banor.

Vad kommer härnäst?

Förhoppningsvis har dessa få exempel visat att Liquid inte är så komplicerat. Naturligtvis finns det mycket mer du kan göra med det, men genom att bemästra utdata, logik och filter är du väl på väg att förstå det mesta av vad du behöver för att bygga ett Shopify-tema.