Стварыце тэму Shopify з рухавіком Liquid

Аўтар: Peter Berry

Дата Стварэння: 14 Ліпень 2021

Дата Абнаўлення: 13 Травень 2024

Відэа: 2022 For beginners Shopify How to open the site / Tutorial / How to use [2 hours]

Задаволены

Файлы і тэчкі тэм
Адлюстраванне URL-адрасоў у шаблонах
Вадкасць: асновы
Разуменне product.liquid
Выхад
Лагічнасць
Фільтры
Што далей?
Далейшыя рэсурсы і натхненне

На працягу апошніх некалькіх тыдняў я ствараў тэму Shopify для Viewport Industries, кампаніі Elliot Jay Stocks, якую я стварыў у мінулым годзе. Мы абралі Shopify па некалькіх прычынах:

Гэта дазваляе нам прадаваць як лічбавыя, так і фізічныя тавары
Ён цалкам размешчаны, што азначае адсутнасць сервераў для турботы
Ён падтрымлівае шэраг плацежных шлюзаў, якія добра інтэгруюцца ў наш банк
Ён заснаваны на тэмах, што азначае, што мы можам лёгка выкарыстоўваць HTML, CSS і JavaScript нашага існуючага сайта

Shopify выкарыстоўвае рухавік шаблонаў пад назвай Liquid для вываду дадзеных з вашай крамы ў вашыя шаблоны. Вадкасць, магчыма, з'яўляецца адным з інгрэдыентаў тэмы Shopify, якой вы раней не карысталіся, і гэта можа быць кампенсацыяй. Але добрая навіна заключаецца ў тым, што пачаць працу сапраўды не так складана.

Калі вы калі-небудзь карысталіся Smarty, ERB або Twig, далейшае будзе вам знаёма. Калі няма, не хвалюйцеся: гэта проста пытанне вывучэння некалькіх простых правілаў. Пасля таго, як вы дадасце навыкі Liquid у свой набор інструментаў для вэб-распрацоўкі, вы зможаце ў самыя кароткія тэрміны пачаць будаваць тэмы для кліентаў.

Файлы і тэчкі тэм

Тэмы Shopify - гэта не што іншае, як шэраг файлаў (файлы HTML з пашырэннем .liquid, CSS, JS, выявы і г.д.) і тэчкі. Тэмы могуць выглядаць і працаваць як заўгодна: абмежаванняў сапраўды няма. Вось асноўная структура тэмы:

актывы
канфігурацыі
макеты
тэма.ліквідная
фрагменты
шаблоны
404. вадкасць
article.liquid
blog.liquid
каляска. вадкасць
збор.ліквід
індэкс.ліква
старонка.ліквідная
product.liquid
search.liquid

З дапамогай гэтых файлаў вы можаце ствараць самыя асноўныя тэмы. Зразумела, вы, верагодна, захочаце дадаць некалькі CSS, JavaScript і некалькі малюнкаў. Вы б змясцілі іх у тэчцы актываў. (Варта адзначыць, што ў дадзены момант у вашай папцы актываў няма падкаталогаў.)

Каб даведацца больш пра тое, як працуюць тэмы, і даведацца пра папкі канфігурацыі і фрагментаў, я б параіў прачытаць тэму з нуля і налад тэмы на вікі Shopify.

Акрамя таго, вы можаце падпісацца на бясплатную партнёрскую праграму, стварыць тэставую краму і агледзець адну з мноства бясплатных тэм, даступных у адміністрацыйнай вобласці вашага тэставага крамы - проста перайдзіце ў рэдактар тэм, размешчаны ў меню "Тэмы".

Адлюстраванне URL-адрасоў у шаблонах

Тэмы Shopify працуюць, адлюстроўваючы бягучы URL у пэўны шаблон. Напрыклад, калі мы праглядаем прадукт, які мае наступны URL-адрас ...

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

... тады Shopify будзе ведаць выкарыстоўваць ваш product.liquid шаблон. Па гэтай прычыне вам варта выкарыстоўваць шаблоны толькі назваў файлаў, пералічаных вышэй.

У дадатак да таго, што Shopify ведае, які шаблон адлюстроўваць у сувязі з бягучым URL-адрасам, ён робіць нам даступным шэраг вельмі канкрэтных зменных. Яны вядомыя як «зменныя шаблонаў» і дазваляюць нам адлюстроўваць дадзеныя ў нашых шаблонах.

Напрыклад, у нашым шаблоне product.liquid мы маем доступ да дакладна названым прадукт зменнай. Гэта азначае, што мы можам вывесці назву, апісанне, кошт і даступнасць нашага прадукту ў нашым шаблоне. Мы будзем выкарыстоўваць камбінацыю зменных Liquid і шаблонаў, каб запоўніць нашы шаблоны дадзенымі, якія адносяцца да нашай прадукцыі.

Поўны спіс даступных зменных шаблонаў наведайце падказку Shopify Марка Данклі.

Вадкасць: асновы

Liquid тут, каб палегчыць нам жыццё дызайнераў тэм. Адзін з асноўных спосабаў зрабіць гэта з выкарыстаннем макетаў. Макеты ідэальна падыходзяць для ўключэння агульных элементаў старонкі, такіх як загаловак, асноўная навігацыя, калонтытул і гэтак далей.

У маёй структуры тэчак вышэй вы заўважыце файл з назвай тэма.ліква у тэчцы макетаў. Вы можаце думаць пра theme.liquid як пра наш галоўны шаблон. Усе іншыя нашы шаблоны, такія як product.liquid, адлюстроўваюцца ў гэтым галоўным шаблоне. Пры жаданні вы можаце мець некалькі макетаў, але стандартны заўсёды павінен называцца theme.liquid.

Я не бачыў файл theme.liquid ад United Pixelworkers, але вы можаце сабе ўявіць, што ён змяшчае разметку для абласцей, выдзеленых чырвоным ніжэй.

Вось як можа выглядаць асноўны макет theme.liquid:

! DOCTYPE html>
html>
кіраўнік>
{{content_for_header}}
title> Загаловак старонкі ідзе сюды / загаловак>
/ кіраўнік>
цела>
{{content_for_layout}}
/ цела>
/ html>

Вы заўважыце дзве фразы, загорнутыя ў двайныя фігурныя дужкі: {{content_for_header}} і {{content_for_layout}}. Гэта нашы першыя прыклады вадкасці ў дзеянні.

Shopify часта выкарыстоўвае {{content_for_header}} для дадання канкрэтных файлаў у раздзел head> дакумента: напрыклад, даданне ў код адсочвання. {{content_for_layout}} - там, дзе будзе з'яўляцца змест нашага адлюстраванага URL-адраса. Напрыклад, калі мы праглядаем старонку прадукту, наш файл product.liquid заменіць {{content_for_layout}} у нашым файле макета.

Разуменне product.liquid

Цяпер, калі мы правялі асновы макетаў, прыйшоў час паглядзець шаблон.Крамы - гэта ўсё пра прадукты, таму давайце паглядзім product.liquid.

Вось вельмі просты, але функцыянальны прыклад шаблону product.liquid.

h2> {{product.title}} / h2>
{{ Апісанне Прадукта }}
{% калі product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% для варыянта ў product.variants%}
значэнне опцыі = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ абярыце>
input type = "submit" name = "add" value = "Дадаць у кошык" id = "purchase" />
/ форма>
{% else%}
p> Гэты прадукт недаступны / p>
{% endif%}

Тут працуе шэраг ключавых паняццяў Liquid. Давайце разгледзім іх па парадку.

Выхад

Першы радок кода змяшчае фразу {{product.title}}. Пры аказанні гэта выдасць загаловак прадукту, які, як вы цяпер ведаеце, вызначаецца URL-адрасам. У прыведзеным ніжэй прыкладзе United Pixelworkers назва прадукту проста "Індыянапаліс".

Liquid выкарыстоўвае кропкавы сінтаксічны фармат. У гэтым выпадку {{product.title}} прыраўноўваецца да зменнай шаблону прадукту і яе атрыбуту загалоўка. Мы можам вывесці апісанне прадукту такім жа чынам, выкарыстоўваючы {{ Апісанне Прадукта }}.

Гэта вядома ў тэрмінах Liquid як выхад. Увесь выхад абазначаецца падвойнымі фігурнымі дужкамі наступным чынам: {{your_output}}.

Лагічнасць

У наступным радку кода вы заўважыце заяву ў фігурнай дужцы, за якім ідзе%: у гэтым выпадку {% if product.available%}. Гэта яшчэ адна важная канцэпцыя вадкасці, вядомая як логіка. Далей вы заўважыце {% else%} і, нарэшце, заявы {% endif%}.

Гэта калі заява дазваляе нам дыктаваць, што адлюстроўвае наш шаблон, зыходзячы з адной або некалькіх умоў: у гэтым выпадку наяўнасць нашага прадукту ці не. Фактычна гэта кажа: «калі наш прадукт даступны, пакажыце інфармацыю, якая датычыцца яго; у адваротным выпадку пакажыце паведамленне, паведамляючы карыстальніку, што яго няма ў наяўнасці ».

Усе лагічныя выказванні ў Liquid выкарыстоўваюць запіс у працэнтах фігурных дужак, гэта значыць {% if ...%}. Проста не забудзьцеся зачыніць свае заявы належным чынам, інакш вы нарвецеся на праблемы. Напрыклад:

{% if product.available%}
Паказаць тут Дадаць у кошык
{% else%}
Адлюстраваць паведамленне пра тое, калі прадукт стане наступным
{% endif%}

Фільтры

Вадкасць дазваляе маніпуляваць нашымі выхадамі некалькімі спосабамі. Адзін з іх - выкарыстанне фільтраў. Змесціва, якое трапляе ў фільтр, выйдзе з іншага боку змененым пэўным чынам.

Гледзячы на прыклад product.liquid вышэй, вы заўважыце {грошы}. Варыянт - тэрмін, які выкарыстоўваецца для апісання разнавіднасці вырабу: напрыклад, розных колераў і памераў. Тут цікава, што мы выкарыстоўваем фільтр для змены кошту - у дадзеным выпадку, выкарыстоўваючы грашовы фільтр. Гэта прывядзе да таго, што сімвал валюты крамы будзе дададзены ў пярэднюю частку кошту.

Іншыя фільтры ўключаюць strip_html, які будзе выдаляць любыя тэгі HTML з дадзенага фрагмента тэксту і ucase, які ператворыць яго ў верхні рэгістр.

Вы таксама можаце аб'яднаць фільтры. Напрыклад:

{article.content}

У гэтым выпадку мы бярэм атрыбут змесціва зменнай шаблона артыкула і перадаем яго ў фільтр strip_html і, нарэшце, у фільтр усечаных. Вы заўважыце, што фільтр абрэзання дазваляе нам вызначыць, як доўга мы хочам, каб быў выніковы вынік: у гэтым выпадку 20 сімвалаў.

Фільтры таксама дазваляюць хутка працаваць над стварэннем элементаў сцэнарыяў і малюнкаў у шаблонах. Вось вельмі хуткі спосаб выкарыстання фільтра для вываду выявы з звязаным альт-тэгам:

{URL_актыву}

Выкарыстанне гэтага ў нашай тэме Shopify прывядзе да таго, што ў нашым шаблоне будзе адлюстраваны наступны элемент img:

img src = "/ files / stores / your_shop_number / assets / logo.png" alt = "Лагатып сайта" />

url_актыву фільтр вельмі карысны, бо вяртае поўны шлях да бягучай тэмы актывы тэчку. Выкарыстанне гэтага фільтра дазваляе ўжываць тэму ў некалькіх крамах і не турбавацца аб шляхах.

Што далей?

Будзем спадзявацца, што гэтыя некалькі прыкладаў паказалі вам, што Liquid не так ужо і складаны. Вядома, можна зрабіць з гэтым нашмат больш, але, засвоіўшы выснову, логіку і фільтры, вы на шляху да разумення большасці таго, што вам спатрэбіцца для стварэння тэмы Shopify.