Бо муҳаррики моеъ мавзӯи Shopify созед

Муаллиф: Peter Berry

Санаи Таъсис: 14 Июл 2021

Навсозӣ: 13 Май 2024

Бо муҳаррики моеъ мавзӯи Shopify созед - Эҷодӣ

Мундариҷа

Файлҳо ва ҷузвдонҳо
Харитаи URLҳо ба қолибҳо
Моеъ: асосҳо
Фаҳмиши маҳсулот
Натиҷа
Мантиқ
Филтрҳо
Баъд чӣ мешавад?
Захираҳои иловагӣ ва илҳом

Дар тӯли чанд ҳафтаи охир, ман мавзӯи Shopify -ро барои Viewport Industries, ширкати Elliot Jay Stocks ва соли гузашта ташкил карда будам. Мо Shopify -ро бо якчанд сабаб интихоб кардем:

Ин ба мо имконият медиҳад, ки ҳам маҳсулоти рақамӣ ва ҳам физикиро фурӯшем
Он комилан ҷойгир аст, яъне ҳеҷ сервере барои ташвиш нест
Он як қатор дарвозаҳои пардохтиро дастгирӣ мекунад, ки бо бонки мо хуб ҳамгиро мешаванд
Он ба мавзӯъ асос ёфтааст, ки маънои онро дорад, ки мо метавонем ба осонӣ HTML, CSS ва JavaScript-и мавҷудаи худро дубора истифода барем

Shopify барои баровардани маълумот аз мағозаи худ ба қолибҳои шумо муҳаррики шаблонро бо номи Liquid истифода мебарад. Моеъ шояд як ҷузъи мавзӯи Shopify бошад, ки шумо қаблан онро истифода набурдед ва он метавонад самаранок бошад. Аммо хушхабар дар он аст, ки дарвоқеъ он қадар душвор нест.

Агар шумо ягон вақт Smarty, ERB ё Twig -ро истифода карда бошед, пас пайравӣ ба шумо шинос хоҳад буд. Агар ин тавр набошад, хавотир нашавед: ин танҳо омӯхтани чанд қоидаҳои оддӣ аст. Пас аз он ки шумо малакаҳои моеъро ба абзори таҳияи вебатон илова кардед, шумо метавонед ба зудӣ ба сохтани мавзӯъҳо барои муштариён шурӯъ кунед.

Файлҳо ва ҷузвдонҳо

Мавзӯъҳои Shopify ҷуз як қатор файлҳо (файлҳои HTML бо васеъшавии .liquid, CSS, JS, тасвирҳо ва ғайра) ва ҷузвдонҳо чизи дигаре нестанд. Мавзӯъҳо метавонанд тавре нигоҳ доранд ва кор кунанд, ки шумо мехоҳед: воқеан маҳдудиятҳо вуҷуд надоранд. Ин аст сохтори асосии мавзӯъ:

дороиҳо
танзим
макетҳо
мавзӯъ. моеъ
порчаҳо
қолибҳо
404. моеъ
мақола. моеъ
blog.liquid
ароба. моеъ
коллексия
индекс
саҳифа
маҳсулоти моеъ
ҷустуҷӯ. моеъ

Бо ин файлҳо, шумо метавонед оддитарин мавзӯъҳоро эҷод кунед. Албатта, шумо шояд мехоҳед дар баъзе CSS, JavaScript ва чанд тасвир илова кунед. Шумо инро дар ҷузвдони дороиҳо мегузоштед. (Бояд қайд кард, ки дар ҳоли ҳозир ба шумо ҷузвдонҳои ҷузвдони дороиҳои шумо иҷозат дода нашудааст.)

Барои гирифтани маълумоти бештар дар бораи чӣ гуна кор кардани мавзӯъҳо ва дар бораи ҷузвдонҳои конфигуратсия ва порчаҳо, ман тавсия медиҳам, ки Мавзӯро аз Scratch ва Танзимоти мавзӯъ дар Shopify Wiki хонед.

Интихобан, шумо метавонед ба барномаи Шарики ройгон обуна шавед, дӯкони озмоишӣ созед ва яке аз мавзӯъҳои зиёди ройгонро, ки аз минтақаи маъмурии дӯкони санҷишии шумо мавҷуданд, тафтиш кунед - танҳо ба муҳаррири мавзӯъе, ки дар менюи Мавзӯъҳо ҷойгир аст, равед.

Харитаи URLҳо ба қолибҳо

Shopify мавзӯъҳо бо роҳи ба Шаблон мушаххас кардани URL-и ҷорӣ кор мекунанд. Масалан, агар мо маҳсулотеро дида истодаем, ки URL-и зерин дорад ...

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

... пас Shopify медонад, ки аз шумо истифода кунад маҳсулоти моеъ шаблон. Аз ин ҷиҳат шумо бояд танҳо ҳамеша номҳои файлҳои дар боло номбаршударо барои қолибҳои худ истифода баред.

Илова бар Shopify, ки донистани кадом шаблонро нисбат ба URL-и ҳозира нишон медиҳад, он як қатор тағирёбандаҳои мушаххасро барои мо дастрас мекунад. Инҳо бо номи 'тағирёбандаҳои шаблон' маъруфанд ва ба мо имконият медиҳанд, ки маълумотро дар қолибҳои худ намоиш диҳем.

Масалан, дар қолаби product.livid мо, ба номҳои мувофиқ дастрасӣ дорем маҳсулот тағйирёбанда. Ин маънои онро дорад, ки мо метавонем ном, тавсиф, нарх ва мавҷудияти маҳсулотамонро дар қолаби худ ҷойгир кунем. Мо омезиши тағирёбандаҳои Моеъ ва қолабро барои пур кардани қолибҳои худ бо маълумоти марбут ба маҳсулоти худ истифода хоҳем кард.

Барои гирифтани рӯйхати пурраи тағирёбандаҳои қолаби дастрас, Марк Данкли’s Shopify Cheat Sheet -ро боздид кунед.

Моеъ: асосҳо

Моеъ ин ҷо аст, то зиндагии моро ҳамчун тарроҳони мавзӯъ осонтар кунад. Яке аз роҳҳои асосии ин истифодаи тарҳҳо мебошад. Тарҳҳо барои дохил кардани унсурҳои оддии саҳифа, ба монанди сарлавҳа, навигатсияи асосӣ, поя ва ғайра беҳтаринанд.

Дар сохтори ҷузвдони ман дар боло, шумо файлеро мебинед мавзӯъ. моеъ дар ҷузвдони макетҳо. Шумо метавонед theme.liquid -ро ҳамчун қолаби устоди мо фикр кунед. Ҳамаи қолибҳои дигари мо, ба монанди product.liquid, дар дохили ин қолаби асосӣ оварда шудаанд. Агар шумо хоҳед, шумо метавонед зиёда аз як тарҳ дошта бошед, аммо пешфарз бояд ҳамеша theme.liquid номида шавад.

Ман файли theme.liquid United Pixelworkers-ро надидаам, аммо шумо тасаввур карда метавонед, ки он нишонае барои минтақаҳои бо сурх дар зер овардашуда дорад.

Ин аст тарҳбандии мавзӯи асосӣ.

! DOCTYPE html>
html>
сар>
{{content_for_header}}
унвон> Сарлавҳаи саҳифа ин ҷо меравад / унвон>
/ сар>
бадан>
{{content_for_layout}}
/ бадан>
/ html>

Шумо ду ибораро пай мебаред, ки бо қавсҳои дугонаи ҷингила печонида шудаанд: {{content_for_header}} ва {{content_for_layout}}. Инҳо аввалин намунаҳои моеъ дар амал мебошанд.

Shopify аксар вақт {{content_for_header}} - ро барои илова кардани файлҳои мушаххас ба сар> бахши ҳуҷҷат истифода мекунад: масалан, илова дар рамзи пайгирӣ. {{content_for_layout}} ин аст, ки мундариҷаи қолаби URL-харитаи мо пайдо мешавад. Масалан, агар мо саҳифаи маҳсулотро дида истодаем, файли product.liquid мо {{content_for_layout}} -ро дар файли тарҳбандии мо иваз мекунад.

Фаҳмиши маҳсулот

Ҳоло, ки мо дар бораи асосҳои тарҳбандӣ гузаштем, вақти он расидааст, ки шаблонро бинем.Мағозаҳо ҳама чизро дар бораи маҳсулот доранд, бинед, ки бубинем маҳсулоти моеъ.

Ин як намунаи хеле содда, вале функсионалии як қолаби шабеҳ мебошад.

h2> {{product.title}} / h2>
{{ Тавсифи Маҳсулот }}
{% if product.available%}
form action = "/ cart / add" method = "post">
id = "product-select" name = ’id’> ро интихоб кунед
{% барои вариант дар product.variants%}
value value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ -ро интихоб кунед>
навъи вуруд = "submit" name = "add" value = "ба сабад илова кунед" id = "purchase" />
/ форма>
{% else%}
саҳ> Ин маҳсулот мавҷуд нест / саҳ>
{% endif%}

Дар ин ҷо як қатор консепсияҳои калидии моеъ мавҷуданд. Биёед онҳоро бо навбат дида бароем.

Натиҷа

Дар сатри якуми код ибора мавҷуд аст {{product.title}}. Ҳангоми пешниҳоди он, ин унвони маҳсулотро мебарорад, ки шумо ҳоло медонед, ки URL муайян мекунад. Дар мисоли United Pixelworkers дар зер, унвони маҳсулот танҳо 'Индианаполис' аст.

Моеъ формати синтаксиси нуқтаҳоро истифода мебарад. Дар ин ҳолат, {{product.title}} ба тағирёбандаи қолаби маҳсулот ва атрибути он баробар мешавад. Мо метавонем тавсифи маҳсулотро бо истифодаи ҳамон усул бароварда тавонем {{ Тавсифи Маҳсулот }}.

Ин дар истилоҳҳои моеъ ҳамчун маълум аст баромади. Ҳама натиҷаҳо бо қавсҳои дукарата ҷингила ишора карда мешаванд, ба таври зерин: {{your_output}}.

Мантиқ

Дар сатри дигари кодекс, шумо изҳоротро дар қавсҳои ҷингила мебинед ва пас аз он%: дар ин ҳолат, {% if product.available%}. Ин як консепсияи дигари муҳим дар Liquid маъруф аст мантиқ. Дар поён, шумо изҳороти {% else%} ва дар ниҳоят {% endif%} -ро мебинед.

Ин агар изҳорот ба мо имкон медиҳад, ки як ё якчанд шартҳоро дар асоси он нишон диҳем, ки кадом қолаби мо нишон дода мешавад: дар ин ҳолат, оё маҳсулоти мо дастрас аст ё не. Ба таври муассир ин чунин аст, ки "агар маҳсулоти мо дастрас бошад, маълумоти марбут ба онро нишон диҳед; дар акси ҳол паёмеро нишон диҳед, ки корбар онро бидуни захира донад ».

Ҳама изҳороти мантиқӣ дар Liquid нишонаи фоизи ҷингила, яъне {% if…%} -ро истифода мебаранд. Танҳо фаромӯш накунед, ки изҳороти худро ба таври мувофиқ пӯшед, вагарна шумо дучори мушкил мешавед. Барои намуна:

{% if product.available%}
Тугмаи илова ба сабадро дар ин ҷо нишон диҳед
{% else%}
Паёмро нишон диҳед, ки маҳсулот кай дастрас хоҳад шуд
{% endif%}

Филтрҳо

Моеъ ба мо имкон медиҳад, ки баромади худро бо якчанд роҳ идора кунем. Яке аз ин истифодаи филтрҳо мебошад. Мундариҷае, ки ба филтр дохил мешавад, нӯги дигарашро ба тарзи мушаххас тағир дода мебарояд.

Ба мисоли product.liid дар боло нигариста, шумо аҳамият хоҳед дод {пул}. Вариант истилоҳест, ки барои тавсифи варианти маҳсулот истифода мешавад: масалан, рангҳо ва андозаи гуногун. Дар ин ҷо ҷолиб он аст, ки мо филтрро барои тағир додани истеҳсоли нарх истифода мебарем - дар ин ҳолат, бо истифодаи филтри пул. Ин боиси он мегардад, ки рамзи асъори дӯкон ба пеши нарх илова карда мешавад.

Дигар филтрҳо дохил мешаванд strip_html, ки ҳама барчаспҳои HTML-ро аз пораи додашуда ва ucase, ки онро ба ҳарфи калон табдил медиҳад.

Шумо инчунин метавонед филтрҳоро якҷоя кунед. Барои намуна:

{article.content}

Дар ин мисол, мо атрибути мундариҷаи тағирёбандаи қолаби мақоларо гирифта, онро ба филтр strip_html ва дар ниҳоят ба филтри бурида мегузаронем. Шумо мебинед, ки филтри бурида ба мо имкон медиҳад, ки нишон диҳем, ки ҳосили ниҳоиро чӣ қадар мехоҳем: дар ин ҳолат, 20 аломат.

Филтрҳо инчунин ба мо имкон медиҳанд, ки дар эҷоди унсурҳои скрипт ва тасвир дар қолибҳо зуд кор барем. Ин аст усули хеле зуд истифода бурдани филтр барои баровардани тасвир бо барчаспи алоқаманд:

{asset_url}

Истифодаи ин дар мавзӯи Shopify мо боиси он мегардад, ки унсури зерини img дар қолаби мо оварда мешавад:

img src = "/ files / shops / your_shop_number / дороиҳо / logo.png" alt = "Нишони сайт" />

Дар дороӣ_урл филтр хеле муфид аст, зеро он роҳи пурраро ба мавзӯи ҷорӣ бармегардонад дороиҳо ҷузвдон. Истифодаи ин филтр ба шумо имкон медиҳад, ки мавзӯи худро дар якчанд дӯконҳо татбиқ кунед ва дар бораи роҳҳо хавотир нашавед.

Баъд чӣ мешавад?

Умедворем, ки ин чанд мисол ба шумо нишон доданд, ки Моеъ он қадар мураккаб нест. Албатта, шумо метавонед бо он чизҳои бештаре анҷом диҳед, аммо бо азхуд кардани натиҷаҳо, мантиқ ва филтрҳо, шумо дар роҳи фаҳмидани аксари чизҳое, ки ба шумо лозим аст, ки мавзӯи Shopify созед, хуб ҳастед.