У перших двох частинах я познайомив вас з платформою електронної комерції Shopify, розповів про ключові аспекти, із чого складаються шаблони для цієї CMS. Також ви дізналися про мову шаблонів Liquid, який використовується при розробці шаблонів Shopify. У заключній статті з цієї серії ми постараємося поглибити навички і знання Liquid.
Альтернативна розмітка
Найголовнішою складовою мови Liquid є файл розмітки, з яким ми познайомилися ще в першій частині. Я часто називаю його «головний шаблон». Зазвичай він включає в себе HTML-код, елементи брендингу, навігацію і підвал, які відображаються на всіх сторінках.
Всі згенеровані сторінки в шаблоні Shopify засновані на цьому головному шаблоні. За замовчуванням цим файлом є theme.liquid, і розташований він в папці layouts. Наші микрошаблоны, розташовані в папці templates, будуть згенеровані тоді, коли Shopify дійде до заглушки {{ content_for_layout }} у нашому файлі розмітки.
Щоб освіжити пам’ять, давайте розглянемо приклад базового шаблону:
{{ content_for_header }}
{{ shop.name }} — {{ page_title }}
{{ «screen.css» | asset_url | stylesheet_tag }}
{{ content_for_layout }}
Як було зазначено в першій статті з серії, файл розмітки в шаблоні Shopify повинен включати в себе два тега виведення Liquid: {{ content_for_header }} і {{ content_for_layout }}. Перший тег використовується Shopify при додаванні коду аналітики, а також для того, щоб надати вам швидкий доступ до панелі адміністрування системи.
Другий тег {{ content_for_layout }}, замінюється відповідним шаблоном з нашої папки templates. Наприклад, шаблон product.liquid буде відображений на сторінці з подробицями про товар.
Іноді необхідно змінити стандартний файл розмітки. Можливо, вам буде потрібно створити сторінку-заглушку, де не потрібне використання навігації або елементів брендингу. Це можна реалізувати за допомогою CSS, але краще все ж використовувати альтернативну розмітку.
Створити альтернативну розмітку досить просто. Перше, що потрібно зробити, це створити новий файл, і задати йому відповідну назву, а також використовувати розширення .liquid. Потім потрібно зберегти цей файл у папці layouts, яка знаходиться в корені вашого шаблону. В цей файл можна помістити необхідний HTML-код (теги HTML, CSS і JS-код і т. д.), а також дві заглушки, про яких ми говорили вище. Щоб потім скористатися цим файлом розмітки, і замінити стандартний файл theme.liquid, використовуйте наступний синтаксис Liquid в будь-якому микрошаблоне:
{% layout «alternative» %}
Примітка: тут необов’язково вказувати розширення .liquid. Тепер, коли необхідний микрошаблон буде оброблений Shopify, сторінка буде сформована з використанням файлу розмітки alternative.liquid.
Шаблони для товарів
Таким же чином можна змінити стандартну розмітку різних шаблонів конкретних товарів. Liquid дозволяє домогтися декількома способами. Я віддаю перевагу використовувати handles. Якщо ви коли-небудь працювали з WordPress, то там цю функцію беруть на себе ярлики (slugs). Ось так буде виглядати типовий URL:
У цьому прикладі handles товару є responsive-web-design – завершальний фрагмент URL. Handles товарів створюються автоматично при додаванні товарів через панель адміністрування Shopify, і ґрунтуються на назві товарів, які ви використовуєте. Великі літери замінюються маленькими, а прогалини — знаком тире. Всі handles при необхідності можна змінити.
За промовчанням щоразу, коли Shopify генерує сторінку інформації про товар, використовується микрошаблон product.liquid. Припустимо, що нам потрібно отримати іншу сторінку товару, призначену виключно для певної книги. Щоб отримати потрібний результат, доведеться внести декілька змін в шаблон product.liquid:
[img=https://cms-assets.tutsplus.com/wp-content/uploads/users/30/posts/19855/image/abookapart-rwd.jpg]
Так як у шаблону product.liquid є доступ до всіх даних, пов’язаних з популярним товаром, ми можемо створити такий запит за допомогою Liquid:
{% if product.handle == «responsive-web-design» %}
{% include «responsive-web-design» %}
{% else %}
[Normal HTML code for product.liquid]
{% endif %}
При додаванні конструкції if, про який ми говорили у другій частині нашої серії, ми зможемо контролювати розмітку, яка буде згенеровано. Якщо product.handle містить «responsive-web-design», то ми включаємо файл під назвою responsive-web-design.liquid. Але якщо ця фраза відсутня в handles, ми виводимо стандартний шаблон product.liquid.
Сила сніппетів
Цей приклад знайомить нас з сниппета Liquid. Фрагменти зберігаються в папці snippets, і в їх назві, при використанні Liquid-тегу {% include %}, не застосовується розширення .liquid.
Як видно з назви, використовуючи {% include %}, ми можемо включати фрагменти коду в микрошаблоны або файли розмітки. У наведеному вище прикладі файл містить альтернативну розмітку, необхідну для демонстрації книги, а також весь Liquid-код, який виводить дані про товар в шаблон.
Цей шаблон можна використовувати і для інших книг:
{% if product.handle == «responsive-web-design» OR product.handle == «design-is-a-job» %}
{% include «responsive-web-design» %}
{% else %}
[Normal HTML code for product.liquid]
{% endif %}
У цьому випадку можна перейменувати сніппет в що-небудь більш відповідне. Наприклад, product-showcase.liquid.
Варто зазначити, що не можна використовувати вкладені директорії всередині папки snippets. Тому я віддаю перевагу використовувати спеціальні приставки в назві, що відображають призначення фрагменту:
- product-responsive-web-design.liquid;
- product-showcase.liquid;
- collections-books.liquid.
Використання такого підходу до найменування файлів дозволить набагато простіше знаходити потрібні фрагменти.
Коли варто використовувати сніппети
Я зазвичай використовую фрагменти для розділення коду на керовані фрагменти і відділення елементів сторінок, які потрібно буде використовувати кілька разів. Наприклад, блок пагинации.
Коли і куди додати потрібний код, я визначаю наступним чином:
- Якщо використовується на кожній сторінці – файл розмітки;
- Якщо використовується на одній сторінці і більше – файл фрагмента;
- Якщо використовується тільки на одній сторінці – микрошаблон.
Микрошаблоны як контролери
Також я навчився використовувати микрошаблон в якості контролера вікна перегляду.
У наведених вище прикладах ми використовуємо Liquid для перевірки handles конкретного товару микрошаблоне product.liquid. Якщо значення handles в блоці if буде дорівнює true, то ми включаємо сніппет. В іншому випадку Shopify генерує HTML-блок, який міститься між тегами {% else %} {% endif %}.
Щоб полегшити процес використання, ми можемо взяти цей фрагмент шаблону, product.liquid, і створити окремий фрагмент. Я б назвав цей фрагмент product-default.liquid.
Дотримуючись такого підходу, наш файл product.liquid можна реструктуризувати наступним чином:
{% if product.handle == «responsive-web-design» %}
{% include «product-responsive-web-design» %}
{% else %}
{% include «product-default» %}
{% endif %}
По мірі зростання ваших потреб цей файл також буде зростати, так як у нього додадуться нові перевірки та підключення відповідних файлів.
Варто запам’ятати, що ярлики (handles) є не тільки у товарів в Shopify, але і у колекцій. Тільки робота з ними відбувається в шаблоні collections.liquid:
{% if collection.handle == «css» %}
{% include «collection-css» %}
{% else %}
{% include «collection-default» %}
{% endif %}
Застосування case замість if else elsif
Описаний вище метод відмінно працює для перевірки handles одного товару або колекції. Але якщо нам потрібно перевірити кілька товарів або колекцій?
Є два можливих варіанти реалізації: перший – це за рахунок розширення умовного оператора if за допомогою elsif. Ось приклад:
{% if product.handle == «responsive-web-design» %}
{% include «product-responsive-web-design» %}
{% elsif product.handle == «design-is-a-job» %}
{% include «product-design-is-a-job» %}
{% else %}
{% include «product-default» %}
{% endif %}
У цьому прикладі ми здійснюємо перевірку handles двох товарів, якщо ні один із результатів не буде дорівнювати true, Shopify згенерує сніппет product-default.liquid.
У Liquid можна використати декілька операторів elsif, але з цим можуть виникнути складності. В якості альтернативи можна використовувати case. Ось перероблений приклад, який було наведено вище:
{% case product.handle %}
{% when «responsive-web-design» %}
{% include «product-responsive-web-design» %}
{% when «design-is-a-job» %}
{% include «product-design-is-a-job» %}
{% else %}
{% include «product-default» %}
{% endcase %}
Ми також можемо здійснити більш «розмите» порівняння за допомогою оператора Liquid contains. Припустимо, нам потрібен будь-який товар, в handles якого є слово «responsive». Давайте подивимося, яким чином це можна реалізувати з допомогою виразу if:
{% if product.handle contains «responsive» %}
{% include «product-responsive» %}
{% else %}
{% include «product-default» %}
{% endif %}
Застосування цього методу означає, що нам не доведеться редагувати шаблон, та додавати в нього нові вирази elsif або case, щоб знайти книги, в назві яких використовується слово responsive.
Ці підходи можна використовувати всередині микрошаблонов теми оформлення. Наприклад, для відображення або приховування елементів дизайну (спеціальні пропозиції або блок схожих товарів).
Створюємо корисні CSS-хуки
Handles також можуть стати в нагоді при роботі з CSS або Javascript. Багато використовують клас body для CSS або Javascript-хуків. Як і в WordPress, ми також можемо додавати класи в елемент body і в Shopify.
Пропоную вам кілька ідей:
Додаємо назву тільки що згенерованого шаблону в клас body:
Зверніть увагу, що ми використовуємо для виведення фільтр handleize. Ось кілька прикладів:
Може виникнути необхідність додати handles поточного товару в клас body. Щоб все залишалося зрозумілим, ми можемо застосувати умовний оператор if, щоб додавати handles товару лише в тому випадку, якщо відвідувач переглядає саме його:
Подивіться, як я використав пробіл до тега виведення {{ product.handle }}.
Деякі шаблони також додають заголовок поточної сторінки елемент body у вигляді id, перетворюючи наведений вище код в щось подібне:
Не буде зайвим, якщо ми додамо сюди перевірку колекцій:
Таку логіку нескладно адаптувати під власні потреби.
На даний момент ми розглянули, яким чином можна використовувати Liquid для виводу даних і управління зовнішнім виглядом наших шаблонів.
Параметри теми
Настройки дозволяють розробникам надати швидкий доступ до налаштувань зовнішнього вигляду для будь-якого користувача, без необхідності змінювати HTML або CSS-код. Це робить шаблони гнучкими, що буде величезним плюсом, якщо ви збираєтеся продавати шаблони через магазин Shopify.
Щоб відобразити власні налаштування панелі адміністрування, потрібно створити файл під назвою settings.html, і зберегти його в папці config. Зверніть увагу, що це єдиний файл, в якому використовується розширення .html.
Налаштування теми мають безліч застосувань, але найпопулярніше – зміна кольору фону для всього сайту. Давайте поглянемо на приклад коду, який дозволить реалізувати це:
Налаштування кольору
| Колір фону (для прикладу) |
|---|
Тут input є найбільш важливим елементом. Ми поставили для нього id і атрибут name зі значенням bg_color, а також застосували клас color. Цей клас дуже важливий. При зчитуванні параметрів нашого шаблону в панелі адміністрування Shopify згенерує зручну палітру кольорів, і дозволить швидше визначитися з кольором:
Параметри шаблону: достатньо один раз вивчити їх, і потім постійно використовувати
Ви напевно помітили, що я встановив value #FFF для input. Якщо ми вирішимо використовувати налаштування нашої теми в CSS-файлі, то це значення стане значенням за замовчуванням. Без цієї установки за замовчуванням буде використовуватися значення empty.
Налаштування шаблону доступні нам глобально. Тобто, ми можемо виводити їх значення у всіх наших шаблони і файли розмітки, CSS і Javascript-файли. Щоб послатися на налаштування (в нашому випадку на колір фону), потрібно використовувати наступний синтаксис:
{{ settings.bg_color }}
Врахуйте, що ми використовуємо id елемента вводу, щоб вивести його значення. Саме з цієї причини id кожного елемента вводу повинен бути унікальним.
Застосування параметрів шаблону
Щоб використовувати налаштування шаблону в нашому CSS-файлі, потрібно до цього файлу додати розширення .liquid. Якщо файл має назву screen.css, то ми просто змінюємо його на screen.css.liquid.
Після цього в CSS-файл потрібно внести наступний код:
body {
background: {{ settings.bg_color }};
}
При зчитуванні файлу CSS Liquid замінить теги виведення на значення, вказане в налаштуваннях шаблону в панелі адміністрування.
Цей приклад показує, чому так необхідно встановлювати значення за замовчуванням. А також те, яким чином, вводячи текстові та цифрові значення в налаштування шаблону, можна завантажувати файли, встановлювати значення логічних операторів за допомогою чекбоксов, і виводити випадаючі списки значень:
Головна сторінка
Герой
| Показати героя? |
Ми використовуємо цю налаштування для керування логікою на головній сторінці наступним чином:
{% if settings.show_hero == true %}
[Relevant hero banner code snippet]
{% endif %}
Додавання файлів – задача більш складна, тому давайте я розповім про неї. Варто відзначити, що розмітка цілком зрозуміла:
Головна сторінка
Герой
| Зображення (у повному розмірі) |
Тут потрібно звернути увагу на кілька речей. Атрибут name, яким у нашому прикладі має значення home-page-hero.jpg незалежно від назви файлу завантаження буде перейменований в home-page-hero.jpg.
По-друге, розширення (у нашому случае.јрд) незалежно від типу файлу, який ви завантажуєте, Shopify буде намагатися конвертувати його в певний формат. Якщо не вийде, то користувач зіткнеться з помилкою. Нарешті, на відміну від зображень товарів, завантажені файли завжди зберігаються в папку шаблону asset.
Ми генеруємо зображення героя для головної сторінки в нашому шаблоні наступним чином:
Тут ми використовуємо фільтр asset_url, який дозволяє вказати повний шлях до зображення в Shopify CDN. Якщо ви не знайомі з цим фільтром, то детальніше про неї можна дізнатися у другій частині нашої серії.
Я настійно рекомендую вам завантажити парочку безкоштовних шаблонів з магазину Shopify, і познайомитися з налаштуваннями, так як це буде хорошою практикою.
Набір інструментів Shopify
Для початку роботи вам знадобиться тільки початковий шаблон і текстовий редактор, а також партнерський акаунт Shopify. Але я все ж розповім про парочку інструментів, які можуть знадобитися.
Перше, що я завжди рекомендую зробити, це включити режим «bogus gateway» в магазинах, які знаходяться в розробці. Цю опцію можна знайти в налаштуваннях в панелі адміністрування Shopify. Її включення дозволить переглянути всю транзакцію і згенерувати всі необхідні email-оповіщення. Також важливо відзначити, що ви можете використовувати всі наведені вище техніки Liquid в email оповіщення.
Ще одна корисна функція – це настільний редактор шаблонів для Mac. Після установки це програмне забезпечення буде автоматично синхронізувати всі зміни, що вносяться до шаблони. Якщо ви використовуєте Mac, Windows або Linux, то можете встановити інструмент командного рядка Shopify theme Gem, який дозволить синхронізувати локальні файли і магазин, що знаходиться в розробці:
Якщо ви використовуєте редактор TextMate або SublimeText, то вам напевно захочеться встановити розширення Liquid, яке підтримує синтаксис і його підсвічування.
Натхнення
Магазин шаблонів Shopify повний безкоштовних тем оформлення, які можна завантажувати і використовувати в навчальних цілях. Для розробки власного шаблону вам слід використовувати мій шаблон для новачків, який я закачав на GitHub.
Ресурси
Пропоную кілька ресурсів, які допоможуть краще вивчити процес розробки шаблонів Shopify:
Шпаргалка Марка Данклі – тут представлені всі змінні і логіки Liquid, а також фільтри і теги виводу.
Документація по розробці шаблонів Shopify – вона була оновлена зовсім недавно, і тепер ви без праці зможете звертатися до неї за допомогою.
Форуми, присвячені торгівлі за допомогою Shopify – ці форуми включають в себе безліч цікавих тем, в яких можна знайти відповіді від справжніх професіоналів у цій сфері.
Що далі?
Shopify – чудова платформа, яка дає суттєві переваги при розробці шаблонів за рахунок власної мови Liquid. У трьох статтях з цієї серії я дав достатньо інформації. Сподіваюся, що вам було дійсно цікаво, і ви отримали потрібні знання та навички.
Переклад статті «Taking Shopify Theme Further Development» був підготовлений дружною командою проекту Сайтостроение від А до Я.
