Bouw een Shopify-thema met de Liquid-engine

Schrijver: Peter Berry

Datum Van Creatie: 14 Juli- 2021

Updatedatum: 13 Kunnen 2024

Video: An Overview of Liquid: Shopify’s Templating Language

Inhoud

Themabestanden en mappen
URL's aan sjablonen toewijzen
Vloeistof: de basis
Inzicht in product.liquid
Uitvoer
Logica
Filters
Wat is het volgende?
Verdere bronnen en inspiratie

In de afgelopen weken heb ik het Shopify-thema gebouwd voor Viewport Industries, het bedrijf Elliot Jay Stocks en ik heb vorig jaar opgericht. We hebben om verschillende redenen voor Shopify gekozen:

Het stelt ons in staat om zowel digitale als fysieke producten te verkopen
Het wordt volledig gehost, wat betekent dat u zich geen zorgen hoeft te maken over servers
Het ondersteunt een aantal betalingsgateways die goed integreren met onze bank
Het is op thema's gebaseerd, wat betekent dat we de HTML, CSS en JavaScript van onze bestaande site gemakkelijk kunnen hergebruiken

Shopify gebruikt een sjabloonengine genaamd Liquid om gegevens van uw winkel naar uw sjablonen uit te voeren. Vloeistof is misschien het enige ingrediënt van een Shopify-thema dat u nog niet eerder hebt gebruikt, en het kan een slechte invloed hebben. Maar het goede nieuws is dat het echt niet zo moeilijk is om mee te beginnen.

Als u ooit Smarty, ERB of Twig heeft gebruikt, zal het volgende u bekend voorkomen. Als dit niet het geval is, hoeft u zich geen zorgen te maken: het is gewoon een kwestie van een paar eenvoudige regels leren. Zodra u Liquid-vaardigheden aan uw toolkit voor webontwikkeling heeft toegevoegd, kunt u in een mum van tijd beginnen met het bouwen van thema's voor klanten.

Themabestanden en mappen

Shopify-thema's zijn niets meer dan een aantal bestanden (HTML-bestanden met een .liquid-extensie, CSS, JS, afbeeldingen, enzovoort) en mappen. Thema's kunnen eruitzien en werken zoals u wilt: er zijn echt geen beperkingen. Hier is de basisstructuur van een thema:

middelen
config
indelingen
thema.vloeistof
fragmenten
Sjablonen
404. vloeistof
artikel.vloeistof
blog.liquid
winkelwagen. vloeistof
collection.liquid
index.vloeistof
pagina.vloeistof
product.vloeistof
search.liquid

Met deze bestanden kunt u de meest elementaire thema's maken. Natuurlijk zou je waarschijnlijk wat CSS, JavaScript en een paar afbeeldingen willen toevoegen. Je plaatst deze in de map met items. (Het is vermeldenswaard dat u momenteel geen submappen in uw itemmap heeft.)

Voor meer informatie over hoe thema's werken en om meer te weten te komen over de mappen met configuratie en fragmenten, zou ik aanraden om Theme from Scratch en Theme Settings op de Shopify Wiki te lezen.

Als alternatief kunt u zich aanmelden voor het gratis partnerprogramma, een testwinkel maken en een van de vele gratis thema's bekijken die beschikbaar zijn in het beheerdersgedeelte van uw testwinkel - ga gewoon naar de thema-editor in het menu Thema's.

URL's aan sjablonen toewijzen

Shopify-thema's werken door de huidige URL toe te wijzen aan een specifieke sjabloon. Als we bijvoorbeeld een product bekijken met de volgende URL ...

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

... dan weet Shopify uw product.vloeistof sjabloon. Daarom mag u voor uw sjablonen alleen de bovenstaande bestandsnamen gebruiken.

Naast dat Shopify weet welke sjabloon moet worden weergegeven in relatie tot de huidige URL, stelt het ons een aantal zeer specifieke variabelen ter beschikking. Deze staan bekend als ‘sjabloonvariabelen’ en stellen ons in staat om gegevens in onze sjablonen weer te geven.

In ons product.liquid-sjabloon hebben we bijvoorbeeld toegang tot het toepasselijk genaamde Product variabele. Dit betekent dat we de naam, beschrijving, prijs en de beschikbaarheid van ons product in onze sjabloon kunnen uitvoeren. We gebruiken de combinatie van Liquid en sjabloonvariabelen om onze sjablonen te vullen met gegevens met betrekking tot onze producten.

Ga naar Mark Dunkley's Shopify Cheat Sheet voor een volledige lijst van de beschikbare sjabloonvariabelen.

Vloeistof: de basis

Liquid is hier om ons leven als themaontwerpers gemakkelijker te maken. Een van de belangrijkste manieren waarop dit gebeurt, is door gebruik te maken van lay-outs. Lay-outs zijn ideaal om veelgebruikte pagina-elementen op te nemen, zoals een koptekst, hoofdnavigatie, voettekst, enzovoort.

In mijn bovenstaande mappenstructuur zie je een bestand met de naam theme.liquid in de lay-outmap. U kunt theme.liquid zien als onze hoofdsjabloon. Al onze andere sjablonen, zoals product.liquid, worden weergegeven in deze hoofdsjabloon. U kunt desgewenst meer dan één lay-out hebben, maar de standaardlay-out moet altijd theme.liquid worden genoemd.

Ik heb het theme.liquid-bestand van United Pixelworkers niet gezien, maar je kunt je voorstellen dat het de markering bevat voor de gebieden die hieronder in rood zijn weergegeven.

Hier is wat een basisthema. Vloeibare lay-out eruit kan zien:

! DOCTYPE html>
html>
hoofd>
{{content_for_header}}
titel> Paginatitel komt hier / titel>
/ hoofd>
lichaam>
{{content_for_layout}}
/ body>
/ html>

U ziet twee zinnen die tussen dubbele accolades zijn gewikkeld: {{content_for_header}} en {{content_for_layout}}. Dit zijn onze eerste voorbeelden van Liquid in actie.

Shopify gebruikt vaak {{content_for_header}} om specifieke bestanden toe te voegen aan het head> -gedeelte van een document: bijvoorbeeld door trackingcode toe te voegen. {{content_for_layout}} is waar de inhoud van onze URL-toegewezen sjabloon wordt weergegeven. Als we bijvoorbeeld een productpagina bekijken, vervangt ons product.liquid-bestand {{content_for_layout}} in ons lay-outbestand.

Inzicht in product.liquid

Nu we de basisprincipes van lay-outs hebben doorgenomen, is het tijd om naar een sjabloon te kijken.Bij winkels draait alles om de producten, dus laten we eens kijken product.vloeistof.

Hier is een heel eenvoudig maar functioneel voorbeeld van een product.liquid-sjabloon.

h2> {{product.title}} / h2>
{{ product beschrijving }}
{% if product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% voor variant in product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / optie>
{% endfor%}
/ selecteer>
input type = "submit" name = "add" value = "Toevoegen aan winkelwagen" id = "purchase" />
/ formulier>
{% else%}
p> Dit product is niet beschikbaar / p>
{% stop als %}

Hier zijn een aantal belangrijke Liquid-concepten aan het werk. Laten we ze in volgorde bekijken.

Uitvoer

De eerste regel code bevat de zin {{product.title}}. Wanneer het wordt weergegeven, wordt de titel van het product weergegeven, die, zoals u nu weet, wordt bepaald door de URL. In het onderstaande voorbeeld van United Pixelworkers is de producttitel gewoon ‘Indianapolis’.

Liquid gebruikt het puntsyntaxisformaat. In dit geval is {{product.title}} gelijk aan de productsjabloonvariabele en het bijbehorende title-attribuut. We kunnen de productbeschrijving op dezelfde manier uitvoeren met {{ product beschrijving }}.

Dit staat in vloeibare termen bekend als output. Alle uitvoer wordt als volgt aangegeven met dubbele accolades: {{your_output}}.

Logica

Op de volgende regel van de code ziet u een instructie in een accolade gevolgd door een%: in dit geval {% if product.available%}. Dit is een ander belangrijk concept in Liquid, bekend als logica. Verderop ziet u {% else%} en ten slotte de {% endif%} -instructies.

Dit als verklaring stelt ons in staat om te dicteren wat onze sjabloon weergeeft, op basis van een of meer voorwaarden: in dit geval of ons product al dan niet beschikbaar is. In feite zegt dit: “als ons product beschikbaar is, toon dan de informatie die erop betrekking heeft; laat anders een bericht zien om de gebruiker te laten weten dat het niet op voorraad is ”.

Alle logische instructies in Liquid gebruiken de notatie van het accoladepercentage, d.w.z. {% if…%}. Vergeet niet om uw verklaringen op de juiste manier af te sluiten, anders komt u in de problemen. Bijvoorbeeld:

{% if product.available%}
Toon hier de knop Toevoegen aan winkelwagentje
{% else%}
Geef een bericht weer over wanneer het product weer beschikbaar zal zijn
{% stop als %}

Filters

Liquid stelt ons in staat om onze output op verschillende manieren te manipuleren. Een daarvan is het gebruik van filters. De inhoud die in het filter gaat, komt aan de andere kant op een specifieke manier naar buiten.

Als u naar het bovenstaande product.liquid-voorbeeld kijkt, merkt u dat {geld}. Een variant is een term die wordt gebruikt om een variant van een product te omschrijven: bijvoorbeeld verschillende kleuren en maten. Wat hier interessant is, is dat we een filter gebruiken om de prijsoutput te wijzigen - in dit geval door het geldfilter te gebruiken. Hierdoor wordt het valutasymbool van de winkel aan de voorkant van de prijs toegevoegd.

Andere filters zijn onder meer strip_html, waarmee alle HTML-tags uit een bepaald stuk tekst worden verwijderd en ucase, die het naar hoofdletters zal converteren.

U kunt filters ook samenvoegen. Bijvoorbeeld:

{article.content}

In dit geval nemen we het contentattribuut van de artikelsjabloonvariabele en geven het door aan het strip_html-filter en uiteindelijk aan het truncate-filter. U zult zien dat we met het filter voor afkappen kunnen specificeren hoe lang we de uiteindelijke uitvoer willen hebben: in dit geval 20 tekens.

Filters stellen ons ook in staat om snel script- en afbeeldingselementen in sjablonen te maken. Hier is een zeer snelle manier om een filter te gebruiken om een afbeelding met een bijbehorende alt-tag uit te voeren:

{asset_url}

Als u dit gebruikt in ons Shopify-thema, wordt het volgende img-element weergegeven in onze sjabloon:

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

De asset_url filter is erg handig omdat het het volledige pad naar de huidige thema's retourneert middelen map. Door dit filter te gebruiken, kunt u uw thema op meerdere winkels toepassen en hoeft u zich geen zorgen te maken over paden.

Wat is het volgende?

Hopelijk hebben deze paar voorbeelden je laten zien dat Liquid niet zo ingewikkeld is. Natuurlijk kun je er nog veel meer mee doen, maar door output, logica en filters onder de knie te krijgen, ben je goed op weg om het meeste te begrijpen van wat je nodig hebt om een Shopify-thema te bouwen.