Izveidojiet Shopify motīvu ar Liquid dzinēju

Saturs

• Motīvu faili un mapes
• URL kartēšana uz veidnēm
• Šķidrums: pamati
• Izpratne par product.liquid
• Rezultāts
• Loģika
• Filtri
• Ko tālāk?
• Papildu resursi un iedvesma

Pēdējo nedēļu laikā esmu veidojis Shopify tēmu Viewport Industries, uzņēmumam Elliot Jay Stocks un kuru izveidoju pagājušajā gadā. Mēs izvēlējāmies Shopify vairāku iemeslu dēļ:

1. Tas ļauj mums pārdot gan digitālos, gan fiziskos produktus
2. Tas ir pilnībā mitināts, un tas nozīmē, ka nav jāuztraucas par serveriem
3. Tas atbalsta virkni maksājumu vārteju, kas labi integrējas mūsu bankā
4. Tas ir balstīts uz tēmu, kas nozīmē, ka mēs varam viegli atkārtoti izmantot esošās vietnes HTML, CSS un JavaScript

Lai izvadītu datus no jūsu veikala uz jūsu veidnēm, Shopify izmanto veidņu dzinēju ar nosaukumu Liquid. Šķidrums, iespējams, ir viena Shopify motīva sastāvdaļa, kuru jūs iepriekš neesat izmantojis, un tas var būt izdevīgs. Bet labā ziņa ir tā, ka iesākt patiešām nav tik grūti.

Ja jūs kādreiz esat lietojis Smarty, ERB vai Twig, tālāk sniegtais jums būs pazīstams. Ja nē, neuztraucieties: jautājums ir tikai par dažu vienkāršu noteikumu apgūšanu. Kad būsiet pievienojis šķidruma prasmes savai tīmekļa izstrādes rīkkopai, jūs varēsiet sākt veidot tēmas klientiem īsā laikā.

Motīvu faili un mapes

Shopify tēmas ir nekas cits kā vairāki faili (HTML faili ar .liquid paplašinājumu, CSS, JS, attēli un tā tālāk) un mapes. Motīvi var izskatīties un darboties, kā vēlaties: tiešām nav ierobežojumu. Tēmas pamatstruktūra ir šāda:

• aktīviem
• konfigurēt
• izkārtojumi
• tēma.šķidrums
• fragmenti
• veidnes
• 404.šķidrums
• raksts.šķidrums
• blog.liquid
• grozs.šķidrums
• kolekcija.šķidrums
• indekss.šķidrums
• page.liquid
• produkts.šķidrums
• meklēt.šķidrums

Izmantojot šos failus, varat izveidot visvienkāršākās tēmas. Protams, jūs droši vien vēlaties pievienot dažus CSS, JavaScript un dažus attēlus. Jūs tos ievietosiet mapē Īpašumi. (Ir vērts atzīmēt, ka jūsu aktīvu mapē pašlaik nav atļautas apakšmapes.)

Lai uzzinātu vairāk par tēmu darbību un uzzinātu par konfigurācijas un fragmentu mapēm, es iesaku izlasīt tēmu no Scratch un motīvu iestatījumiem vietnē Shopify Wiki.

Varat arī reģistrēties bezmaksas partneru programmai, izveidot testa veikalu un apskatīt vienu no daudzajām bezmaksas tēmām, kas pieejamas jūsu testa veikala administratīvajā apgabalā - vienkārši dodieties uz motīvu redaktoru, kas atrodas izvēlnē Motīvi.

URL kartēšana uz veidnēm

Shopify tēmas darbojas, kartējot pašreizējo URL konkrētai veidnei. Piemēram, ja mēs skatāmies produktu, kuram ir šāds URL ...

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

... tad Shopify zinās izmantot jūsu produkts.šķidrums veidne. Šī iemesla dēļ veidnēm jebkad jāizmanto tikai iepriekš uzskaitītie failu nosaukumi.

Papildus tam, ka Shopify zina, kuru veidni rādīt attiecībā pret pašreizējo URL, tas mums dara pieejamus vairākus ļoti specifiskus mainīgos. Tie ir pazīstami kā “veidņu mainīgie” un ļauj mums parādīt datus mūsu veidnēs.

Piemēram, mūsu product.liquid veidnē mums ir piekļuve pareizi nosauktajam produktu mainīgais. Tas nozīmē, ka mēs savā veidnē varam norādīt produkta nosaukumu, aprakstu, cenu un pieejamību. Mēs izmantosim šķidro un veidņu mainīgo kombināciju, lai veidnēs aizpildītu datus, kas attiecas uz mūsu produktiem.

Lai iegūtu pilnu pieejamo veidņu mainīgo sarakstu, apmeklējiet Mark Dunkley's Shopify Cheat Sheet.

Šķidrums: pamati

Šķidrums ir šeit, lai atvieglotu mūsu kā tēmu dizaineru dzīvi. Viens no galvenajiem veidiem, kā tas tiek darīts, ir izkārtojumu izmantošana. Izkārtojumi ir ideāli piemēroti, lai iekļautu kopīgus lapas elementus, piemēram, galveni, galveno navigāciju, kājeni un tā tālāk.

Iepriekš redzamajā mapju struktūrā pamanīsit failu ar nosaukumu tēma.šķidrums izkārtojumu mapē. Jūs varat iedomāties theme.liquid kā mūsu galveno veidni. Visas citas mūsu veidnes, piemēram, product.liquid, tiek renderētas šajā galvenajā veidnē. Ja vēlaties, jums var būt vairāki izkārtojumi, taču noklusējuma izkārtojums vienmēr jāsauc par theme.liquid.

Es neesmu redzējis United Pixelworkers failu theme.liquid, bet jūs varētu iedomāties, ka tas satur marķējumu apgabaliem, kas zemāk norādīti sarkanā krāsā.

Lūk, kā varētu izskatīties pamata tēma.šķidrs izkārtojums:

1. ! DOCTYPE html>
2. html>
3. galva>
4. {{content_for_header}}
5. nosaukums> Lapas nosaukums iet šeit / nosaukums>
6. / galva>
7. ķermenis>
8. {{content_for_layout}}
9. / body>
10. / html>

Jūs pamanīsit divas frāzes, kas ietītas dubultās cirtainās lencēs: {{content_for_header}} un {{content_for_layout}}. Šie ir mūsu pirmie piemēri par šķidrumu darbībā.

Shopify bieži izmanto {{content_for_header}}, lai konkrētus failus pievienotu dokumenta sadaļai head>, piemēram, pievienotu izsekošanas kodu. Vietne {{content_for_layout}} parādīsies mūsu URL kartētās veidnes saturā. Piemēram, ja mēs skatām produkta lapu, mūsu izkārtojuma failā {{content_for_layout}} aizstās mūsu fails product.liquid.

Izpratne par product.liquid

Tagad, kad esam iepazinušies ar izkārtojuma pamatiem, ir pienācis laiks apskatīt veidni.Veikali ir saistīti ar produktiem, tāpēc apskatīsim produkts.šķidrums.

Šeit ir ļoti vienkāršs, bet funkcionāls veidnes product.liquid piemērs.

1. h2> {{product.title}} / h2>
2. {{ Produkta apraksts }}
3. {%, ja product.available%}
4. veidlapas action = "/ grozs / pievienošana" method = "post">
5. select id = "product-select" name = ’id’>
6. {% variantam product.variants%}
7. opcijas vērtība = "{{variant.id}}"> {{variants.title}} - {variants.cena} / opcija>
8. {% endfor%}
9. / izvēlieties>
10. ievades tips = "Iesniegt" name = "Pievienot" value = "Pievienot grozam" id = "pirkt" />
11. / forma>
12. {% cits%}
13. p> Šis produkts nav pieejams / p>
14. {% endif%}

Šeit darbojas vairākas galvenās šķidruma koncepcijas. Apskatīsim tos secībā.

Rezultāts

Pirmajā koda rindiņā ir frāze {{product.title}}. Kad tas tiek atveidots, tas parādīs produkta nosaukumu, kuru, kā jūs tagad zināt, nosaka URL. Zemāk redzamajā United Pixelworkers piemērā produkta nosaukums ir vienkārši ‘Indianapolis’.

Šķidrums izmanto punktu sintakses formātu. Šajā gadījumā {{product.title}} ir vienāds ar produkta veidnes mainīgo un tā nosaukuma atribūtu. Produkta aprakstu mēs varam izdot tādā pašā veidā, izmantojot {{ Produkta apraksts }}.

Šķidrumā tas ir pazīstams kā izeja. Visa izeja tiek apzīmēta ar dubultām cirtainām lencēm šādi: {{your_output}}.

Loģika

Nākamajā koda rindā jūs pamanīsit paziņojumu cirtaini iekavās, kam seko%: šajā gadījumā {%, ja product.available%}. Tas ir vēl viens svarīgs jēdziens šķidrumā, kas pazīstams kā loģika. Tālāk jūs pamanīsit {% else%} un visbeidzot {% endif%} priekšrakstus.

Šis ja paziņojums ļauj mums diktēt to, kas tiek parādīts mūsu veidnē, pamatojoties uz vienu vai vairākiem nosacījumiem: šajā gadījumā neatkarīgi no tā, vai mūsu produkts ir pieejams. Efektīvi tas saka: “ja mūsu produkts ir pieejams, parādiet ar to saistīto informāciju; pretējā gadījumā parādiet ziņojumu, paziņojot lietotājam, ka tā ir noliktavā ”.

Visos loģikas paziņojumos lietotnē Liquid tiek izmantots cirtaini iekavu procentuālais apzīmējums, t.i., {% if…%}. Vienkārši atcerieties pienācīgi slēgt savus paziņojumus, pretējā gadījumā jums radīsies nepatikšanas. Piemēram:

1. {%, ja product.available%}
2. Rādīt pogu Pievienot grozam šeit
3. {% cits%}
4. Parādīt ziņojumu par to, kad produkts būs pieejams nākamreiz
5. {% endif%}

Filtri

Šķidrums ļauj mums vairākos veidos manipulēt ar mūsu produkciju. Viens no tiem ir filtru izmantošana. Saturs, kas nonāk filtrā, iznāks otrā galā, kas mainīts noteiktā veidā.

Apskatot produktu product.liquid piemēru iepriekš, jūs to pamanīsit {nauda}. Variants ir termins, ko lieto, lai aprakstītu produkta variāciju: piemēram, dažādas krāsas un izmēri. Interesanti šeit ir tas, ka mēs izmantojam filtru, lai mainītu cenu izlaidi - šajā gadījumā izmantojot naudas filtru. Tā rezultātā cenas priekšpusē tiks pievienots veikala valūtas simbols.

Citi filtri ietver strip_html, kas no noteiktā teksta fragmenta noņems visus HTML tagus un ucase, kas to pārveidos par lielo burtu.

Jūs varat arī apvienot filtrus. Piemēram:

1. {article.content}

Šajā gadījumā mēs ņemam raksta veidnes mainīgā satura atribūtu un nododam to strip_html filtram un, visbeidzot, saīsināt filtram. Jūs ievērosiet, ka saīsināt filtrs ļauj mums norādīt, cik ilgi mēs vēlamies, lai gala izlaide būtu: šajā gadījumā 20 rakstzīmes.

Filtri ļauj mums arī ātri paveikt skriptu un attēlu elementu veidošanu veidnēs. Šeit ir ļoti ātrs veids, kā izmantot filtru attēla izveidei ar saistīto alt tagu:

1. {asset_url}

Izmantojot to mūsu Shopify tēmā, mūsu veidnē tiks renderēts šāds img elements:

1. img src = "/ faili / veikali / jūsu_veikala_numurs / aktīvi / logo.png" alt = "Vietnes logotips" />

The asset_url filtrs ir ļoti noderīgs, jo tas atgriež visu ceļu uz pašreizējo motīvu aktīviem mapi. Izmantojot šo filtru, varat izmantot savu motīvu vairākos veikalos un jums nav jāuztraucas par ceļiem.

Ko tālāk?

Cerams, ka šie daži piemēri parādīja, ka šķidrums nav tik sarežģīts. Protams, ar to var darīt daudz vairāk, taču, apgūstot izvadi, loģiku un filtrus, jūs esat labi orientējies, lai saprastu lielāko daļu no tā, kas jums būs nepieciešams, lai izveidotu Shopify tēmu.

Papildu resursi un iedvesma

• Noderīgas iesācēju Shopify konsultācijas
• Marka Denklija “Shopify Cheat Sheet”
• Blankify: Shopify startera tēma
• Apmācība: izveidojiet tēmu no jauna
• Shopify partneru programma
• 40 iedvesmojoši Shopify veikali