Bumuo ng isang tema ng Shopify gamit ang Liquid engine

May -Akda: Peter Berry

Petsa Ng Paglikha: 14 Hulyo 2021

I -Update Ang Petsa: 13 Mayo 2024

Video.: The Top 19 Best Affiliate Programs (2022)

Nilalaman

Mga file ng tema at folder
Pagma-map ng mga URL sa mga template
Liquid: ang mga pangunahing kaalaman
Pag-unawa sa produkto.liquid
Paglabas
Lohika
Mga filter
Anong susunod?
Karagdagang mga mapagkukunan at inspirasyon

Sa nakaraang ilang linggo, binubuo ko ang tema ng Shopify para sa Viewport Industries, ang kumpanya na Elliot Jay Stocks at nabuo ako noong nakaraang taon. Pinili namin ang Shopify para sa maraming mga kadahilanan:

Pinapayagan kaming ibenta ang parehong mga digital at pisikal na mga produkto
Buong host ito, nangangahulugang walang mga server na mag-alala
Sinusuportahan nito ang isang bilang ng mga gateway sa pagbabayad na mahusay na isinasama sa aming bangko
Nakabatay sa tema, na nangangahulugang madali naming magagamit muli ang aming mayroon nang site na HTML, CSS at JavaScript

Gumagamit ang Shopify ng isang template engine na tinatawag na Liquid upang maglabas ng data mula sa iyong tindahan patungo sa iyong mga template. Ang Liquid ay marahil ang isang sahog ng isang tema sa Shopify na hindi mo pa nagamit dati at maaari itong maging offputting. Ngunit ang magandang balita ay talagang hindi ganoon kahirap magsimula.

Kung nagamit mo na ang Smarty, ERB o Twig, kung ano ang sumusunod ay pamilyar sa iyo. Kung hindi, huwag mag-alala: isang bagay lamang sa pag-aaral ng ilang simpleng mga patakaran. Kapag naidagdag mo na ang mga kasanayan sa Liquid sa iyong toolkit sa pag-unlad ng web, masisimulan mo na ang pagbuo ng mga tema para sa mga kliyente nang walang oras.

Mga file ng tema at folder

Ang mga shopify na tema ay hindi hihigit sa isang bilang ng mga file (mga HTML file na may isang .liquid extension, CSS, JS, mga imahe, at iba pa) at mga folder. Ang mga tema ay maaaring tumingin at gumana subalit nais mo: talagang walang mga paghihigpit. Narito ang pangunahing istraktura ng isang tema:

mga assets
config
mga layout
tema.liquid
mga snippet
mga template
404.liquid
artikulo.liquid
blog.liquid
cart.liquid
koleksyon.liquid
index.liquid
pahina.liquid
produkto.liquid
paghahanap.liquid

Sa mga file na ito, maaari kang lumikha ng pinaka-pangunahing mga tema. Siyempre, malamang na nais mong idagdag sa ilang CSS, JavaScript at ilang mga imahe. Ilalagay mo ang mga ito sa folder ng mga assets. (Mahalagang tandaan na kasalukuyang hindi ka pinapayagan ng mga subfolder sa loob ng iyong folder ng asset.)

Para sa higit pa tungkol sa kung paano gumagana ang mga tema, at upang malaman ang tungkol sa mga folder ng config at mga snippet, inirerekumenda kong basahin ang Tema mula sa Mga Scratch at Mga Setting ng Tema sa Shopify Wiki.

Bilang kahalili maaari kang mag-sign up sa libreng programa ng Kasosyo, lumikha ng isang test shop at siyasatin ang isa sa maraming mga libreng tema na magagamit mula sa lugar ng admin ng iyong test shop - pumunta lamang sa editor ng tema na matatagpuan sa menu ng Mga Tema.

Pagma-map ng mga URL sa mga template

Gumagana ang mga tema sa shopify sa pamamagitan ng pagmamapa ng kasalukuyang URL sa isang tukoy na template. Halimbawa, kung nanonood kami ng isang produkto na mayroong sumusunod na URL ...

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

... kung gayon malalaman ng Shopify na gagamitin ang iyong produkto.liquid template. Para sa kadahilanang ito na dapat mo lang gamitin ang mga pangalan ng file na nakalista sa itaas para sa iyong mga template.

Bilang karagdagan sa pag-alam ng Shopify kung aling template ang ipapakita kaugnay ng kasalukuyang URL, gumagawa ito ng isang bilang ng mga tiyak na variable na magagamit sa amin. Kilala ang mga ito bilang 'mga variable ng template' at pinapagana kaming magpakita ng data sa aming mga template.

Halimbawa sa aming product.liquid template, mayroon kaming access sa aptly na pinangalanan produkto variable. Nangangahulugan ito na maaari naming mai-output ang pangalan, paglalarawan, presyo at ang pagkakaroon ng aming produkto sa aming template. Gagamitin namin ang kumbinasyon ng mga variable ng Liquid at template upang mapunan ang aming mga template sa data na nauugnay sa aming mga produkto.

Para sa isang buong listahan ng mga magagamit na mga variable ng template, bisitahin ang Shopify Cheat Sheet ni Mark Dunkley.

Liquid: ang mga pangunahing kaalaman

Narito ang Liquid upang gawing mas madali ang ating buhay bilang mga taga-disenyo ng tema. Ang isa sa mga pangunahing paraan ng paggawa nito ay ang paggamit ng mga layout. Perpekto ang mga layout para sa pagsasama ng mga karaniwang elemento ng pahina tulad ng isang header, pangunahing nabigasyon, footer, at iba pa.

Sa istraktura ng aking folder sa itaas, mapapansin mo ang isang file na tinawag tema.liquid sa folder ng mga layout. Maaari mong isipin ang tema.liquid bilang aming master template. Ang lahat ng aming iba pang mga template, tulad ng product.liquid, ay nai-render sa loob ng master template na ito. Maaari kang magkaroon ng higit sa isang layout kung nais mo, ngunit ang default na isa ay dapat palaging tinatawag na tema.liquid.

Hindi ko pa nakikita ang tema ng United Pixelworkers na tema.liquid, ngunit maaari mong isipin na naglalaman ito ng mark up para sa mga lugar na nakabalangkas sa pula sa ibaba.

Narito kung ano ang maaaring hitsura ng isang pangunahing tema.liquid na layout:

! DOCTYPE html>
html>
ulo>
{{content_for_header}}
pamagat> Pamagat ng Pahina Ay Pupunta / titulo>
/ ulo>
katawan>
{{content_for_layout}}
/ katawan>
/ html>

Mapapansin mo ang dalawang parirala na nakabalot sa dobleng mga kulot na tirante: {{content_for_header}} at {{content_for_layout}}. Ito ang aming unang mga halimbawa ng Liquid sa pagkilos.

Kadalasang gumagamit ang Shopify ng {{content_for_header}} upang magdagdag ng mga tukoy na file sa seksyon ng ulo> ng isang dokumento: halimbawa, pagdaragdag sa tracking code. Ang {{content_for_layout}} ay lilitaw ang nilalaman ng aming naka-map na URL. Halimbawa, kung nanonood kami ng isang pahina ng produkto, papalitan ng aming product.liquid na file ang {{content_for_layout}} sa aming layout file.

Pag-unawa sa produkto.liquid

Ngayon na natakbo namin ang mga pangunahing kaalaman sa mga layout, oras na upang tumingin sa isang template.Ang mga tindahan ay tungkol sa mga produkto, kaya't tingnan natin produkto.liquid.

Narito ang isang napakasimple ngunit gumaganang halimbawa ng isang produkto.liquid na template.

h2> {{product.title}} / h2>
{{product.description}}
{% kung product.available%}
form action = "/ cart / add" method = "post">
piliin ang id = "product-select" name = ’id’>
{% para sa variant sa product.variants%}
pagpipilian ng halaga = "{{variant.id}}"> {{variant.title}} - {variant.price} / opsyon>
{% endfor%}
/ piliin>
uri ng pag-input = "isumite" pangalan = "idagdag" halaga = "Idagdag sa cart" id = "pagbili" />
/ form>
{% iba%}
p> Ang produktong ito ay hindi magagamit / p>
{% tapusin kung %}

Mayroong isang bilang ng mga pangunahing konsepto ng Liquid na gumagana dito. Tingnan natin sila nang maayos.

Paglabas

Ang unang linya ng code ay naglalaman ng parirala {{product.title}}. Kapag na-render, ilalabas nito ang pamagat ng produkto, na alam mo ngayon na natutukoy ng URL. Sa halimbawa ng United Pixelworkers sa ibaba, ang pamagat ng produkto ay simpleng 'Indianapolis'.

Gumagamit ang Liquid ng dot syntax format. Sa pagkakataong ito, ang {{product.title}} ay katumbas ng variable ng template ng produkto at katangian ng pamagat nito. Maaari naming i-output ang paglalarawan ng produkto sa parehong paraan ng paggamit {{product.description}}.

Ito ay kilala sa mga terminong Liquid bilang output. Ang lahat ng output ay tinukoy ng dobleng mga kulot na tirante, tulad ng sumusunod: {{your_output}}.

Lohika

Sa susunod na linya ng code, mapapansin mo ang isang pahayag sa isang kulot na brace na sinusundan ng isang%: sa kasong ito, {% kung product.available%}. Ito ay isa pang mahalagang konsepto sa Liquid na kilala bilang lohika. Sa karagdagang pagbaba, mapapansin mo ang {% iba%} at sa wakas ang mga pahayag na {% endif%}.

Ito kung pahayag nagbibigay-daan sa amin upang idikta kung ano ang ipinapakita ng aming template, batay sa isa o higit pang mga kundisyon: sa kasong ito, magagamit o hindi ang aming produkto. Mabisang sinasabi nito, "kung ang aming produkto ay magagamit, ipakita ang impormasyong nauugnay dito; kung hindi man magpakita ng isang mensahe na ipaalam sa gumagamit na wala na itong stock ”.

Ang lahat ng mga pahayag sa lohika sa Liquid ay gumagamit ng notasyong porsyento ng kulot na brace, ibig sabihin, {% kung…%}. Tandaan lamang na isara nang maayos ang iyong mga pahayag, o magkakaroon ka ng problema. Halimbawa:

{% kung product.available%}
Ipakita ang Idagdag sa cart button dito
{% iba%}
Ipakita ang mensahe tungkol sa kung kailan magiging susunod na magagamit ang produkto
{% tapusin kung %}

Mga filter

Pinapayagan tayo ng Liquid na manipulahin ang aming output sa maraming paraan. Isa sa mga ito ay ang paggamit ng mga filter. Ang nilalaman na papunta sa filter ay lalabas sa kabilang dulo na binago sa isang tukoy na paraan.

Sa pagtingin sa product.liquid halimbawa sa itaas, mapapansin mo {pera}. Ang isang variant ay isang term na ginamit upang ilarawan ang isang pagkakaiba-iba ng isang produkto: halimbawa, iba't ibang mga kulay at sukat. Ang nakakainteres dito ay gumagamit kami ng isang filter upang baguhin ang output ng presyo - sa kasong ito, sa pamamagitan ng paggamit ng pansala ng pera. Magreresulta ito sa pagdaragdag ng simbolo ng pera ng shop sa harap ng presyo.

Kasama ang iba pang mga filter strip_html, na magtatanggal ng anumang mga HTML tag mula sa isang naibigay na piraso ng teksto at ucase, na kung saan ay i-convert ito sa itaas na kaso.

Maaari ka ring sumali sa mga filter nang magkasama. Halimbawa:

{article.content}

Sa pagkakataong ito, kinukuha namin ang katangian ng nilalaman ng variable ng template ng artikulo at ipinapasa ito sa filter na strip_html at sa wakas sa truncate filter. Mapapansin mo na pinapayagan kami ng filter ng truncate na tukuyin kung gaano katagal ang nais naming maging pangwakas na output: sa kasong ito, 20 mga character.

Pinapayagan din kami ng mga filter na gumawa ng mabilis na gawain ng paglikha ng mga elemento ng script at imahe sa mga template. Narito ang isang napakabilis na paraan ng paggamit ng isang filter upang mag-output ng isang imahe na may isang kaugnay na alt tag:

{asset_url}

Ang paggamit nito sa aming tema ng Shopify ay magreresulta sa sumusunod na elemento ng img na nai-render sa aming template:

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

Ang asset_url Napaka kapaki-pakinabang ng filter habang binabalik nito ang buong landas sa kasalukuyang tema mga assets folder. Ginagamit ang paggamit ng filter na ito para sa iyo na mailapat ang iyong tema sa maraming mga tindahan at hindi mag-alala tungkol sa mga landas.

Anong susunod?

Inaasahan ko, ang ilang mga halimbawang ito ay nagpakita sa iyo na ang Liquid ay hindi ganoong kumplikado. Siyempre, marami pang magagawa mo dito, ngunit sa pamamagitan ng mastering output, lohika at mga filter, malapit ka nang maunawaan ang karamihan sa kakailanganin mong bumuo ng isang tema sa Shopify.