У першій частині цієї серії статей я розповідав про платформу для електронної комерції Shopify, познайомив вас із кількома ключовими аспектами цієї CMS, і пояснив, як влаштовані шаблони Shopify. Сьогодні ж я хочу зосередити увагу на Liquid – мовою шаблонів Shopify. Ми розглянемо переваги Liquid, дізнаємося, яким чином він дозволяє отримувати і управляти даними магазинів.

Для чого потрібен Liquid?

Якщо ви не знайомі з поняттям мови шаблонів, то я описую його як міст між даними вашого магазину і HTML-шаблонами, виведеними в браузері. Використовуючи прості конструкції, ми можемо здійснювати доступ до даних магазину (наприклад, до назви товару, опису колекції, набору зображень або до запису в блозі), і виводити ці дані безпосередньо в шаблон. Одне з головних переваг полягає в тому, що нам не потрібно знати, що це за дані, адже ми можемо просто використовувати змінні, які відповідають за певний набір даних в кожному шаблоні:

Приклад типового шаблону product.liquid в SublimeText2 з підсвічуванням синтаксису Liquid

Як працює Liquid?

Як вже розповідалося в першій статті цієї серії, Shopify визначає, який шаблон відправляти в браузер, керуючись замовленим URL.

Як тільки система обробить відповідний шаблон для висновку, відбувається аналіз шаблону (і зовнішнього файлу розмітки) на предмет пошуку заглушок Liquid. Коли відповідні елементи знайдені, Shopify замінює код Liquid необхідними даними вашого магазину.

Мови шаблонів також можна порівняти з функцією «Пошук і заміна» в текстових редакторах. Shopify здійснює пошук всіх заглушок Liquid і потім замінює їх даними з магазину. Після чого, фінальна версія документа відправляється браузеру у форматі HTML.

Заглушки (Placeholders)

Заглушка або placeholder являє собою фрагмент коду, який замінюється даними, коли шаблон надсилається в браузер.

У Liquid можна виділити два типи заглушок. Перший – це подвійні фігурні дужки {{ }}, які зображують висновок, а другий тип – фігурні дужки плюс знак відсотка {% %}, який відображає логіку.

Давайте розглянемо невеликі приклади заглушки виведення в микрошаблоне product.liquid:

{{ product.title }}

Після розфарбовування замість заглушки в фігурних дужках користувач побачить заголовок проглядається в даний момент товару:

Keir’s Coffee Cup

До тих пір, поки до висновку не застосовуються будь-які фільтри, замість заглушки виводяться дані з інтернет-магазину.

Логіка і цикли

Liquid також дозволяє нам контролювати, що саме відображати в шаблонах за допомогою логічних конструкцій і циклів. Наприклад, ми можемо показувати різні фрагменти HTML-коду в залежності від того, чи є проглядається товар в наявності.

У Liquid також можна використовувати для виведення один і той же фрагмент коду нескінченну кількість разів. Наприклад, якщо потрібно відобразити галерею зображень товару. Використання циклів дозволяє за допомогою всього декількох рядків коду виводити всі товари, пов’язані з популярним товаром.

Основи Liquid

Давайте розглянемо основні складові мови, і постараємося зрозуміти, як їх можна використовувати у процесі розробки шаблонів.

Висновок

Як було зазначено вище, подвійні дужки {{ }} у файлі .liquid позначають заглушку для виводу. Ось два приклади, з якими ви будете часто стикатися:

{{ shop.name }}
{{ product.description }}

Тег виводу дозволяє витягувати певні фрагменти даних з магазину, і відображати їх в шаблоні.

Припустимо, мій магазин називається «Keir’s Coffee Emporium». Якби я використовував liquid-тег {{ shop.name }}, то Shopify взяв би назву мого магазину і замінив їм заглушку в шаблоні.

Якби я використовував {{ product.description }} в шаблоні product.liquid, то будь-який текст, введений в редакторі конкретно для даного товару, виводився б замість цієї самої заглушки {{ product.description }}.

Примітка: WYSIWYG-редактор виводить текст у форматі HTML-код, так що вам не потрібно обертати {{ product.description }} в HTML-теги на зразок і т. д.

Таким чином, можна отримати будь-яку змінну, будь то глобальна змінна (доступна в кожному окремому шаблоні вашої теми оформлення) або змінна на рівні шаблону (призначена лише для конкретного шаблону). Наприклад:

{{ shop.description }}
{{ product.title }}
{{ collection.title }}
{{ collection.description }}

Щоб отримати повний список змінних, які ви можете виводити в шаблонах, я настійно рекомендую вам додати в закладки шпаргалку від Марка Данклі. Особисто я користуюся їй майже кожен день.

З цих прикладів видно, що для доступу до даних Liquid використовує синтаксис dot. Попередній точці елемент – це змінна, елемент після крапки – це атрибут змінної:

Знайомство з Liquid – мовою шаблонів Shopify

Логіка

Заглушки для виводу Liquid дозволяють отримувати і відображати дані в шаблонах, а логічні теги дозволяють контролювати послідовність шаблону. На відміну від тегів висновку, впровадження логічних тегів у ваші шаблони не додасть чогось нового на сторінку, але вони відповідають за те, що має бути відображено.

На простому прикладі хочу продемонструвати, як використовувати логіку Liquid для виділення відсутніх товарів. Подібні приклади можна знайти в микрошаблонах product.liquid:

{% if product.available %}
Цей товар відсутній
{% else %}
Вибачте, цей товар розпроданий
{% endif %}

Як видно, логічний синтаксис в Liquid відрізняється від синтаксису виводу. Замість {{ }} тут використовуються {% %}.

У наведеному вище прикладі ми контролюємо, що саме буде виводитися в наш шаблон за допомогою простих конструкцій if, else, endif. Якщо відповідь на наше умова if (якщо) буде true, то ми виводимо повідомлення «Цей товар є на складі». Якщо відповіддю на вираз буде false, то шаблон виводить відповідне сповіщення {% else %}, яким в даному випадку є текст «Вибачте, цей товар розпроданий».

Ви будете часто використовувати вирази if при розробці шаблонів Shopify. Ось ще один приклад, який допоможе вам краще зрозуміти, про що йде мова:

{% if cart.item_count > 0 %}

Товарів у вашій корзині: {{ cart.item_count }}

{% else %}

Ваша корзина порожня. Чому б вам не ознайомитися з асортиментом

{% endif %}

Цей приклад демонструє, яким чином можна вивести кількість товарів у кошику відвідувача або показати посилання на каталог.

Коротко про операторів

Ви напевно помітили, що в цьому прикладі ми використовували оператор >. Так як змінна cart.item_count повертає кількість товарів у кошику відвідувача, ми можемо перевірити, чи є отримане значення більше ніж 0. Якщо так, це означає, що у кошику є товари.

Якщо у кошику є товари, то ми можемо використовувати значення true і показати повідомлення з кількістю товарів. Якщо ні, то ми використовуємо значення false, і намагаємося мотивувати відвідувача почати перегляд каталогу.

У вас буде доступ до безлічі різних операторів у Liquid:
== одно;
!= не одно;
> більше ніж;
< менше ніж;
>= більше або менше;
<= менше або дорівнює;
і т. д.

{% for image in product.images %}
Знайомство з Liquid – мовою шаблонів Shopify
{% endfor %}

У цьому прикладі, який можна знайти в микрошаблоне product.liquid, ми використовуємо цикл для виводу кожного зображення, пов’язаного з популярним в даний момент товаром. Давайте розберемо приклад поетапно:

Етап 1: {% for image in product.images %}

Перший рядок демонструє суть роботи колекцій у Liquid. На відміну від колекцій товарів, які ми розглянули у першій статті цієї серії, колекції у Liquid злегка відрізняються. Для прикладу ми вирішили скористатися product.images. Колекцію Liquid просто обчислити: зазвичай вона використовується у множині. У нашому прикладі ми маємо справу з Liquid-колекція всіх зображень, пов’язаних з популярним товаром.

Ще один хороший приклад — product.variants. Він повертає об’єкт, що містить подробиці про всіх варіаціях товару, які можна використовувати в шаблоні. Якщо вам потрібен приклад варіації товарів, то ми приводили його в попередній статті.

Ви також повинні звернути увагу на те, що ми використовуємо слово image для позначення поточного елемента в циклі. Кожен раз наш цикл image дає доступ до даних, пов’язаних з певним зображенням.

Також слід зазначити, що нам не потрібно знати про те, скільки циклів повинно бути запущено. Після того, як не залишиться зображень, для яких потрібно запускати цикл, Shopify займеться висновком наступної частини шаблону.

Етап 2: Знайомство з Liquid – мовою шаблонів Shopify

Друга рядок коду наполовину складається з HTML, а наполовину з Liquid. Атрибут src заповнений тегом виведення Liquid. Ми розглянемо фільтри, виражені тут символом | трохи пізніше, але варто відзначити, що така мініатюрна конструкція дозволить заповнити атрибут src повноцінним URL, що вказує на зменшену версію зображення.

Етап 3: {% endfor %}

Останній рядок у нашому прикладі – це завершальна вираз. Воно закриває весь код, який повинен бути згенерований в рамках поточного циклу.

Якщо б у нас в об’єкті product.images було три зображення, то фінальна версія коду виведення виглядала б наступним чином:

Знайомство з Liquid – мовою шаблонів Shopify
Знайомство з Liquid – мовою шаблонів Shopify
Знайомство з Liquid – мовою шаблонів Shopify
Знайомство з Liquid – мовою шаблонів Shopify

На сайті Pure Fix Cycles цикли використовуються для виведення декількох варіацій товару

Висновок зображень або варіацій товару – це найбільш часті випадки використання циклів.

Фільтри

Фільтри використовуються разом з тегом виводу. Їх завдання полягає в управлінні даними. Приклад використання фільтра за датою:

{{ article.published_at | Дата: ‘%d %B %Y’ }}

Без застосування фільтра Shopify просто вивів би дату, в яку була опублікована запис, в тому форматі, в якому вона зберігається в базі даних. Іноді цей формат абсолютно не читабельний для людей. Але додавши символ | і включивши фільтрацію дати, ми зможемо самостійно змінювати формат.

Починаємо з фрагмента даних ліворуч (в даному випадку, це дата), і потім, використовуючи фільтр, виводимо дані в читабельному форматі. Це і є головна і єдина задача фільтрів: брати дані і певним чином змінювати їх:

Знайомство з Liquid – мовою шаблонів Shopify

В шпаргалці Марка наведені всі доступні фільтри в Liquid

Ось ще один приклад:

{{ ‘style.css’ | asset_url | stylesheet_tag }}

Тут ми використовуємо два фільтра із загальною метою: створити повноцінний елемент style у нашому файлі розмітки.

Починаємо з назви CSS-файлу зліва, і спочатку застосовуємо до нього фільтр asset_url. Так як ми поняття не маємо, де в Shopify розташований потрібний нам файл style.css, нам потрібно, щоб платформа самостійно розібралася з потрібною адресою.

Для цього і потрібен фільтр asset_url. Він бере назву нашого файлу, style.css і становить повноцінний шлях до цього файлу в папці assets. Важливо відзначити, що він не здійснює перевірку наявності цього файлу. Приблизно так буде виглядати в результаті:

//cdn.shopify.com/s/files/1/0222/9076/assets/style.css

Другий фільтр, stylesheet_tag, бере цей URL, і обертає його в тег style, який пізніше виводиться у файл розмітки. Таким буде фінальний результат:

Кожен фільтр бере результат з попереднього фільтра, а потім змінює його по-своєму. Якщо після нього більше немає фільтрів, то результат відправляється в шаблон в HTML-форматі. Існує безліч корисних фільтрів, і ось деякі з тих, які ви будете використовувати постійно:

  • asset_url;
  • stylesheet_tag;
  • script_tag;
  • date;
  • pluralize;
  • replace;
  • handle;
  • money і money_with_currency;
  • product_img_url;
  • link_to.

Підіб’ємо підсумки

У сьогоднішній статті нам довелося досить попрацювати. Ми познайомилися з Liquid і з’ясували, яким чином ця мова пов’язаний з HTML-шаблонами і файлами розмітки, а також вивчили чотири ключових аспекти: висновок, логіку, цикли і фільтри. На наступному етапі ми навчимося створювати безкоштовний акаунт у партнерській програмі Shopify, і спробуємо самостійно створити шаблон. Багато приклади, наведені в моїх статтях, були взяті з мого власного шаблону для новачків, який можна завантажити на GitHub.

У процесі підготовки до третьої статті з цієї серії я рекомендую вам завантажити мій шаблон. Процес завантаження шаблонів досконало описується в документації Shopify.

У фінальній статті з нашої серії я продемонструю гнучкість мови Liquid і самої платформи Shopify.

Переклад статті «Getting Started With Liquid; Shopify’s Language Template» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here