Sukurkite „Shopify“ temą naudodami „Liquid“ variklį

Autorius: Peter Berry

Kūrybos Data: 14 Liepos Mėn 2021

Atnaujinimo Data: 13 Gegužė 2024

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

Turinys

Temos failai ir aplankai
URL susiejimas su šablonais
Skystis: pagrindai
Supratimas apie produktą.skystas
Rezultatas
Logika
Filtrai
Kas toliau?
Kiti ištekliai ir įkvėpimas

Per pastaruosius keletą savaičių aš kūriau „Shopify“ temą „Viewport Industries“, bendrovei „Elliot Jay Stocks“ ir susikūriau pernai. „Shopify“ pasirinkome dėl kelių priežasčių:

Tai leidžia mums parduoti tiek skaitmeninius, tiek fizinius produktus
Tai visiškai priglobta, vadinasi, nerimauti dėl serverių
Jis palaiko daugybę mokėjimo šliuzų, kurie puikiai integruojasi su mūsų banku
Tai pagrįsta tema, o tai reiškia, kad mes galime lengvai pakartotinai naudoti esamos svetainės HTML, CSS ir „JavaScript“

„Shopify“ naudoja šablonų variklį pavadinimu „Skystis“, kad iš jūsų parduotuvės į jūsų šablonus išvestų duomenis. Skystis yra galbūt vienas „Shopify“ temos ingredientų, kurio dar nenaudojote, ir jis gali būti naudingas. Bet gera žinia ta, kad pradėti nuo to tikrai nėra taip sunku.

Jei kada nors naudojote „Smarty“, „ERB“ ar „Twig“, tai, kas išdėstyta toliau, bus jums žinoma. Jei ne, nesijaudinkite: tereikia išmokti keletą paprastų taisyklių. Pridėję „Liquid“ įgūdžių prie savo žiniatinklio kūrimo įrankių rinkinio, galėsite greitai kurti temas klientams.

Temos failai ir aplankai

„Shopify“ temos yra ne kas kita, kaip failų (HTML failų su .liquid plėtiniu, CSS, JS, vaizdų ir pan.) Ir aplankų skaičius. Temos gali atrodyti ir veikti taip, kaip norite: iš tikrųjų nėra jokių apribojimų. Štai pagrindinė temos struktūra:

turto
konfigūruoti
maketai
tema.skystas
fragmentai
šablonai
404.skystas
straipsnis.skystas
blog.liquid
krepšelis.skystas
kolekcija.skystas
indeksas.skystas
puslapis.skystas
produktas.skystas
paieška.skystas

Naudodami šiuos failus galite sukurti pagrindines temas. Žinoma, tikriausiai norėtumėte pridėti keletą CSS, „JavaScript“ ir keletą vaizdų. Tai turėtumėte įdėti į išteklių aplanką. (Verta paminėti, kad šiuo metu jūsų išteklių aplanke neleidžiami poaplankiai.)

Norėdami sužinoti daugiau apie tai, kaip veikia temos, ir sužinoti apie konfigūracijos bei fragmentų aplankus, rekomenduoju „Shopify Wiki“ skaityti temą iš „Scratch“ ir „Theme Settings“.

Arba galite užsiregistruoti į nemokamą partnerių programą, sukurti bandomąją parduotuvę ir apžiūrėti vieną iš daugybės nemokamų temų, kurias galite rasti savo bandymų parduotuvės administratoriaus srityje - tiesiog eikite į temų redaktorių, esantį meniu „Temos“.

URL susiejimas su šablonais

„Shopify“ temos veikia susiejant dabartinį URL su konkrečiu šablonu. Pvz., Jei žiūrime produktą, kurio URL yra šis ...

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

... tada „Shopify“ žinos naudoti jūsų produktas.skystas šabloną. Dėl šios priežasties savo šablonams turėtumėte naudoti tik anksčiau išvardytus failų pavadinimus.

Be to, kad „Shopify“ žino, kurį šabloną reikia rodyti atsižvelgiant į dabartinį URL, jis mums suteikia daugybę labai specifinių kintamųjų. Tai vadinama „šablonų kintamaisiais“ ir leidžia mums rodyti duomenis šablonuose.

Pavyzdžiui, šablone „product.liquid“ turime prieigą prie tinkamai pavadinto produktas kintamasis. Tai reiškia, kad savo šablone galime pateikti savo produkto pavadinimą, aprašymą, kainą ir prieinamumą. Norėdami užpildyti šablonus duomenimis, susijusiais su mūsų produktais, naudosime skysčių ir šablonų kintamųjų derinį.

Norėdami rasti visą galimų šablonų kintamųjų sąrašą, apsilankykite Marko Dunkley's „Shopify Cheat Sheet“.

Skystis: pagrindai

Skystis yra tam, kad palengvintume mūsų, kaip temų kūrėjų, gyvenimą. Vienas iš pagrindinių būdų tai padaryti yra maketų naudojimas. Išdėstymai idealiai tinka įtraukti įprastus puslapio elementus, tokius kaip antraštė, pagrindinė navigacija, poraštė ir pan.

Aukščiau esančioje mano aplankų struktūroje pastebėsite failą, vadinamą tema.skystas išdėstymų aplanke. Galite galvoti apie theme.liquid kaip pagrindinį šabloną. Visi kiti mūsų šablonai, pvz., Product.liquid, pateikiami šiame pagrindiniame šablone. Jei norite, galite turėti daugiau nei vieną maketą, tačiau numatytasis visada turėtų būti vadinamas theme.liquid.

Aš nemačiau „United Pixelworkers“ tema.liquid failo, bet galėtumėte įsivaizduoti, kad jame yra žymėjimas žemiau raudonai nubrėžtoms sritims.

Štai kaip gali atrodyti pagrindinė tema. Skystas išdėstymas:

! DOCTYPE html>
html>
galva>
{{content_for_header}}
title> Puslapio pavadinimas eina čia / title>
/ galva>
kūnas>
{{content_for_layout}}
/ body>
/ html>

Jūs pastebėsite dvi frazes, apvyniotas dvigubais garbanotais petnešomis: {{content_for_header}} ir {{content_for_layout}}. Tai yra mūsų pirmieji skysčio veikimo pavyzdžiai.

„Shopify“ dažnai naudoja {{content_for_header}}, kad pridėtų konkrečius failus prie dokumento skyriaus>, pavyzdžiui, pridėtų stebėjimo kodą. {{content_for_layout}} yra vieta, kurioje bus rodomas URL susieto šablono turinys. Pvz., Jei žiūrime produkto puslapį, failas product.liquid pakeis {{content_for_layout}} maketo faile.

Supratimas apie produktą.skystas

Dabar, kai mes susipažinome su maketavimo pagrindais, atėjo laikas pažvelgti į šabloną.Parduotuvėse viskas apie produktus, todėl pažiūrėkime produktas.skystas.

Štai labai paprastas, bet funkcionalus „product.liquid“ šablono pavyzdys.

h2> {{product.title}} / h2>
{{ Prekės aprašymas }}
{% jei product.available%}
forma action = "/ cart / add" method = "post">
pasirinkite id = "product-select" name = ’id’>
{% variantui product.variants%}
option value = "{{variant.id}}"> {{variantas.pavadinimas}} - {varianto kaina} / parinktis>
{% endfor%}
/ pasirinkite>
įvesties tipas = "pateikti" vardas = "pridėti" vertė = "Įdėti į krepšelį" id = "pirkti" />
/ forma>
{% Kitas %}
p> Šio produkto nėra / p>
{% endif%}

Čia veikia daugybė pagrindinių skysčių sąvokų. Pažvelkime į juos tvarka.

Rezultatas

Pirmoje kodo eilutėje yra frazė {{product.title}}. Kai jis bus pateiktas, bus išvestas produkto pavadinimas, kurį, kaip jūs dabar žinote, lemia URL. Žemiau pateiktame „United Pixelworkers“ pavyzdyje produkto pavadinimas yra tiesiog „Indianapolis“.

Skystis naudoja taško sintaksės formatą. Šiuo atveju {{product.title}} prilygsta produkto šablono kintamajam ir jo pavadinimo atributui. Produkto aprašymą galime pateikti tuo pačiu būdu naudodami {{ Prekės aprašymas }}.

Skystu terminu tai vadinama produkcija. Visa išvestis žymima dvigubais garbanotais petnešomis taip: {{your_output}}.

Logika

Kitoje kodo eilutėje pastebėsite teiginį garbanotaisiais skliaustais, po kurių bus nurodytas%: šiuo atveju {% jei product.available%}. Tai dar viena svarbi skysčio sąvoka, žinoma kaip logika. Toliau pastebėsite {% else%} ir galiausiai {% endif%} teiginius.

Tai jei teiginys leidžia mums padiktuoti, ką rodo mūsų šablonas, remdamiesi viena ar keliomis sąlygomis: šiuo atveju, ar mūsų produktas yra prieinamas. Tai reiškia, kad „jei mūsų produktas yra prieinamas, parodykite su juo susijusią informaciją; kitaip parodykite pranešimą, pranešantį vartotojui, kad jo nėra “.

Visuose logikos teiginiuose skystyje naudojamas garbanotųjų skliaustų procentų žymėjimas, t. Y. {% If…%}. Tiesiog nepamirškite tinkamai uždaryti savo pareiškimų, kitaip jums kils problemų. Pavyzdžiui:

{% jei product.available%}
Rodyti mygtuką Pridėti į krepšelį čia
{% Kitas %}
Rodyti pranešimą apie tai, kada kitą produktą bus galima įsigyti
{% endif%}

Filtrai

Skystis leidžia mums manipuliuoti savo produkcija keliais būdais. Vienas iš jų yra filtrų naudojimas. Turinys, patenkantis į filtrą, išeis iš kito galo, pakeistas tam tikru būdu.

Pažvelgę į aukščiau pateiktą „product.liquid“ pavyzdį, pastebėsite {pinigai}. Variantas yra terminas, vartojamas apibūdinti produkto variantą: pavyzdžiui, skirtingos spalvos ir dydžiai. Čia įdomu tai, kad mes naudojame filtrą, kad pakeistume kainų išvestį - šiuo atveju naudodami pinigų filtrą. Dėl to parduotuvės valiutos simbolis bus pridėtas prie kainos priekio.

Kiti filtrai apima strip_html, kuris pašalins visas HTML žymas iš nurodyto teksto ir ucase, kuris pavers ją didžiąja raide.

Taip pat galite sujungti filtrus. Pavyzdžiui:

{article.content}

Šiuo atveju mes paimame straipsnio šablono kintamojo turinio atributą ir perduodame jį filtrui strip_html ir galiausiai sutrumpinimo filtrui. Pastebėsite, kad sutrumpintas filtras leidžia mums nurodyti, kiek laiko norime pateikti galutinį išvestį: šiuo atveju 20 simbolių.

Filtrai taip pat leidžia mums greitai sukurti scenarijų ir vaizdo elementus šablonuose. Štai labai greitas būdas naudoti filtrą vaizdui su susieta alt žyma išleisti:

{asset_url}

Naudojant tai „Shopify“ temoje, šablone bus pateiktas šis img elementas:

img src = "/ failai / parduotuvės / jūsų_parduotuvės_numeris / turtas / logotipas.png" alt = "Svetainės logotipas" />

The turto_url filtras yra labai naudingas, nes jis grąžina visą kelią į dabartinę temą turto aplanką. Naudodami šį filtrą galėsite pritaikyti savo temą keliose parduotuvėse ir nesijaudinti dėl kelių.

Kas toliau?

Tikimės, kad šie keli pavyzdžiai parodė, kad skystis nėra toks sudėtingas. Žinoma, su tuo galite padaryti daug daugiau, tačiau įvaldę išvestį, logiką ir filtrus, jūs jau daug ką supratote, ko jums reikės norint sukurti „Shopify“ temą.