Створіть тему Shopify за допомогою движка Liquid

Автор: Peter Berry

Дата Створення: 14 Липня 2021

Дата Оновлення: 13 Травень 2024

Відеоролик: Что такое Shopify? Разработка тем на Shopify. Shopify разработчик. Что нужно знать?

Зміст

Файли та папки теми
Зіставлення 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.рідина
стаття.рідина
blog.liquid
візок.рідина
збір.рідина
індекс.рідина
стор.рідина
продукт.рідина
search.liquid

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

Щоб отримати докладнішу інформацію про те, як працюють теми, а також дізнатись про папки конфігурації та фрагментів, я рекомендую прочитати Theme from Scratch and Theme Settings на Shopify Wiki.

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

Зіставлення URL-адрес із шаблонами

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

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

... тоді Shopify буде знати, як використовувати ваш продукт.рідина шаблон. Саме з цієї причини для шаблонів слід використовувати лише перелічені вище назви файлів.

Окрім того, що 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}}
заголовок> Заголовок сторінки йде сюди / заголовок>
/ head>
тіло>
{{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.

h2> {{product.title}} / h2>
{{ Опис продукту }}
{% якщо продукт.доступний%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% для варіанта в product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ виберіть>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ form>
{% else%}
p> Цей товар недоступний / p>
{% endif%}

Тут працює низка ключових концепцій Liquid. Давайте розглянемо їх по порядку.

Вихідні дані

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

Liquid використовує формат синтаксису крапок. У цьому випадку {{product.title}} прирівнюється до змінної шаблону товару та його атрибуту title. Ми можемо вивести опис товару таким же чином, використовуючи {{ Опис продукту }}.

Це в рідких термінах відомо як вихід. Весь вихід позначається подвійними фігурними дужками, як показано нижче: {{your_output}}.

Логіка

У наступному рядку коду ви помітите вислів у фігурних дужках, за яким слід%: у цьому випадку {% якщо product.available%}. Це ще одне важливе поняття в Liquid, відоме як логіка. Далі ви помітите {% else%} і, нарешті, твердження {% endif%}.

Це якщо твердження дозволяє нам диктувати, що відображатиме наш шаблон, виходячи з однієї або декількох умов: у цьому випадку, доступний чи ні наш продукт. Фактично це говорить: «якщо наш продукт доступний, покажіть інформацію, що стосується його; інакше покажіть повідомлення, повідомляючи користувачеві, що його немає в наявності ”.

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

{% якщо product.available%}
Показати Кнопка Додати в кошик тут
{% else%}
Відобразити повідомлення про те, коли продукт стане наступним
{% endif%}

Фільтри

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

Переглянувши приклад product.liquid вище, ви помітите {гроші}. Варіант - це термін, що використовується для опису варіації товару: наприклад, різних кольорів та розмірів. Цікавим тут є те, що ми використовуємо фільтр для зміни вихідної ціни - в даному випадку, використовуючи грошовий фільтр. Це призведе до додавання символу валюти магазину до передньої частини ціни.

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

Ви також можете об’єднати фільтри разом. Наприклад:

{article.content}

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

Фільтри також дозволяють швидко виконувати роботу зі створення сценарію та елементів зображень у шаблонах. Ось дуже швидкий спосіб використання фільтра для виведення зображення з відповідним тегом alt:

{URL_активу}

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

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

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

Що далі?

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