Looge Liquid mootoriga Shopify teema

Autor: Peter Berry

Loomise Kuupäev: 14 Juuli 2021

Värskenduse Kuupäev: 13 Mai 2024

Looge Liquid mootoriga Shopify teema - Loominguline

Sisu

Teemafailid ja kaustad
URL-ide kaardistamine mallidesse
Vedelik: põhitõed
Product.liquid mõistmine
Väljund
Loogika
Filtrid
Mis järgmiseks?
Edasised ressursid ja inspiratsioon

Viimaste nädalate jooksul olen ehitanud Viewify Industriesi, ettevõtte Elliot Jay Stocks ja minu moodustatud teema Shopify. Valisime Shopify mitmel põhjusel:

See võimaldab meil müüa nii digitaalseid kui ka füüsilisi tooteid
See on täielikult hostitud, mis tähendab, et muretsemiseks pole servereid
See toetab paljusid maksepunkte, mis meie pangaga kenasti integreeruvad
See on teemapõhine, mis tähendab, et saame oma olemasoleva saidi HTML-i, CSS-i ja JavaScripti lihtsalt uuesti kasutada

Shopify kasutab mallist mootorit Liquid, et teie poest andmeid mallidesse edastada. Vedelik on võib-olla üks Shopify teema üks koostisosa, mida te pole varem kasutanud, ja see võib olla kasulik. Kuid hea uudis on see, et alustamine pole tegelikult nii raske.

Kui olete kunagi kasutanud Smartyt, ERB-d või Twigi, on järgnev teile tuttav. Kui ei, siis ärge muretsege: küsimus on vaid mõne lihtsa reegli õppimises. Kui olete oma veebiarenduse tööriistakomplekti lisanud vedelike oskused, saate hakata klientide jaoks teemasid üles ehitama.

Teemafailid ja kaustad

Shopify teemad pole midagi muud kui arv faile (laiendiga .liquid HTML-failid, CSS, JS, pildid ja nii edasi) ja kaustu. Teemad võivad välja näha ja töötada nii, nagu soovite: piiranguid pole tegelikult. Siin on teema põhistruktuur:

varad
konfig
paigutused
teema.vedelik
jupid
mallid
404.vedelik
artikkel.vedelik
blog.liquid
käru.vedelik
kollektsioon.vedelik
index.vedelik
leht.vedelik
toode.vedelik
otsing.vedelik

Nende failide abil saate luua kõige põhilisemad teemad. Muidugi soovite ilmselt lisada mõne CSS-i, JavaScripti ja mõne pildi. Panete need varade kausta. (Väärib märkimist, et teie vara kaustas pole praegu lubatud alamkaustu.)

Teemade tööpõhimõtete kohta lisateabe saamiseks ning konfiguratsiooni ja sisulõigete kaustade kohta lisateabe saamiseks soovitaksin lugeda teemat Shopify Wiki lehelt Scratch ja Theme Settings.

Teise võimalusena saate registreeruda tasuta partnerprogrammi, luua testpoe ja kontrollida ühte oma testpoe administraatoripiirkonnas saadaval olevatest paljudest tasuta teemadest - minge lihtsalt menüüs Kujundused asuvasse teemiredaktorisse.

URL-ide kaardistamine mallidesse

Shopify-teemad toimivad, kaardistades praeguse URL-i kindla mallini. Näiteks kui vaatame toodet, millel on järgmine URL ...

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

... siis teab Shopify kasutada teie toode.vedelik mall. Sel põhjusel peaksite mallide jaoks kunagi kasutama ainult ülalnimetatud failinimesid.

Lisaks sellele, et Shopify teab, millist malli praeguse URL-i suhtes kuvada, teeb see meile kättesaadavaks ka hulga väga konkreetseid muutujaid. Neid nimetatakse mallimuutujateks ja need võimaldavad meil andmeid mallides kuvada.

Näiteks mallis product.liquid on meil juurdepääs tabavalt nimetatud toote muutuv. See tähendab, et saame oma mallis väljastada toote nime, kirjelduse, hinna ja saadavuse. Kasutame vedelike ja mallide muutujate kombinatsiooni, et oma mallid meie toodetega seotud andmetega täita.

Saadaolevate mallimuutujate täieliku loendi leiate Mark Dunkley Shopify Cheat Sheetilt.

Vedelik: põhitõed

Vedelik on siin selleks, et meie kui kujundajate elu oleks lihtsam teha. Üks peamisi viise, kuidas seda teha, on paigutuste kasutamine. Paigutused sobivad ideaalselt tavaliste leheelementide, näiteks päise, peamise navigeerimise, jaluse jne lisamiseks.

Ülalolevas minu kaustade struktuuris märkate faili nimega teema.vedelik paigutuste kaustas. Võite mõelda teema.liquid kui meie põhimalli. Kõik meie muud mallid, näiteks product.liquid, renderdatakse selle põhimalli sees. Soovi korral võib teil olla mitu paigutust, kuid vaikimisi tuleks seda alati nimetada theme.liquid.

Ma pole näinud United Pixelworkersi faili theme.liquid, kuid võite ette kujutada, et see sisaldab allpool punasega välja toodud alade märgistust.

Põhiteema.vedelik paigutus võib välja näha järgmiselt:

! DOCTYPE html>
html>
pea>
{{content_for_header}}
pealkiri> Lehe pealkiri läheb siia / pealkiri>
/ pea>
keha>
{{content_for_layout}}
/ keha>
/ html>

Märkate kahte fraasi, mis on mähitud kahekordsete lokkidega. {{content_for_header}} ja {{content_for_layout}}. Need on meie esimesed näited vedeliku toimimisest.

Shopify kasutab dokumendi jaotisse head> konkreetsete failide lisamiseks sageli {{content_for_header}}: näiteks lisab jälgimiskoodi. {{content_for_layout}} on koht, kus kuvatakse meie URL-iga vastendatud malli sisu. Näiteks kui vaatame tootelehte, asendab meie failifail product.liquid meie paigutusfailis {{content_for_layout}}.

Product.liquid mõistmine

Nüüd, kui oleme paigutuste põhitõed läbi uurinud, on aeg vaadata malli.Poed on seotud toodetega, nii et vaatame toode.vedelik.

Siin on toote.liquid malli väga lihtne, kuid toimiv näide.

h2> {{product.title}} / h2>
{{ Tootekirjeldus }}
{% kui product.available%}
vorm action = "/ cart / add" method = "post">
valige id = "product-select" name = ’id’>
{% variandi kohta tootes.variandid%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.hind} / valik>
{% endfor%}
/ vali>
sisendi tüüp = "esita" nimi = "lisa" väärtus = "Lisa ostukorvi" id = "osta" />
/ vorm>
{% veel%}
p> Seda toodet pole saadaval / p>
{% endif%}

Siin töötab mitmeid vedelaid võtmekontseptsioone. Vaatame neid järjekorras.

Väljund

Koodi esimene rida sisaldab fraasi {{product.title}}. Renderdamisel väljastab see toote pealkirja, mille, nagu te nüüd teate, määrab URL. Allpool toodud United Pixelworkersi näites on toote pealkiri lihtsalt ’Indianapolis’.

Vedelik kasutab punkti süntaksivormingut. Sel juhul võrdub {{product.title}} tootemalli muutujaga ja selle pealkirja atribuudiga. Toote kirjelduse saame väljastada samamoodi kasutades {{ Tootekirjeldus }}.

Seda nimetatakse vedeliku mõistes kui väljund. Kogu väljundit tähistatakse kahekordsete lokkisulgudega järgmiselt: {{your_output}}.

Loogika

Koodi järgmisel real märkate lokkis sulgudes olevat lauset, millele järgneb%: sel juhul {% kui product.available%}. See on vedelikus veel üks oluline mõiste, mida nimetatakse loogika. Allpool märkate märke {% else%} ja lõpuks {% endif%}.

See kui avaldus võimaldab meil dikteerida, mida meie mall kuvab, tuginedes ühele või mitmele tingimusele: sel juhul olenemata sellest, kas meie toode on saadaval või mitte. Tegelikult öeldakse nii: „kui meie toode on saadaval, näidake sellega seotud teavet; muidu näita teadet, mis annab kasutajale teada, et see on otsas ”.

Kõik vedeliku loogikalaused kasutavad lokkisulgude protsendimärgistust, st {% if…%}. Ärge unustage lihtsalt oma avaldused asjakohaselt sulgeda, vastasel juhul satute hätta. Näiteks:

{% kui product.available%}
Siin kuvatakse nupp Lisa ostukorvi
{% veel%}
Kuva sõnum selle kohta, millal toode järgmine kord saadaval on
{% endif%}

Filtrid

Vedelik võimaldab meil väljundit mitmel viisil manipuleerida. Üks neist on filtrite kasutamine. Filtrisse minev sisu tuleb teisest otsast konkreetsel viisil muudetud.

Vaadates ülaltoodud toodet product.liquid, märkate {raha}. Variant on termin, mida kasutatakse toote variatsiooni kirjeldamiseks: näiteks erinevad värvid ja suurused. Huvitav on see, et me kasutame hinna väljundi muutmiseks filtrit - antud juhul rahafiltrit. Selle tulemusel lisatakse hinna esiküljele poe valuutasümbol.

Muude filtrite hulka kuuluvad strip_html, mis eemaldab antud tekstitükist kõik HTML-i märgendid ja ucase, mis teisendab selle suurtäheks.

Võite ka filtrid omavahel ühendada. Näiteks:

{article.content}

Sel juhul võtame artiklimalli muutuja sisu atribuudi ja edastame selle strip_html filtrile ja lõpuks kärpimisfiltrile. Märkate, et kärbifilter võimaldab meil määrata, kui kaua soovime lõplikku väljundit: sel juhul 20 tähemärki.

Filtrid võimaldavad meil ka mallide skripti- ja pildielementide loomisel kiiresti tööd teha. Siin on väga kiire viis filtri kasutamiseks seotud Alt-märgendiga pildi väljastamiseks.

{asset_url}

Selle kasutamine meie Shopify teemas põhjustab meie mallis järgmise img-elemendi renderdamist:

img src = "/ failid / kauplused / teie_poe_number / varad / logo.png" alt = "Saidi logo" />

The vara_url filter on väga kasulik, kuna see tagastab täieliku tee praeguse teema juurde varad kausta. Selle filtri kasutamine võimaldab teil oma teemat rakendada mitmes poes ja te ei pea teede pärast muretsema.

Mis järgmiseks?

Loodetavasti on need mõned näited teile näidanud, et Vedelik pole nii keeruline. Muidugi on sellega palju muud võimalik, kuid väljundi, loogika ja filtrite valdamise abil on teil hea meel mõista enamikku sellest, mida peate Shopify-teema üles ehitama.