Создайте тему Shopify с движком Liquid

Автор: Peter Berry

Дата создания: 14 Июль 2021

Дата обновления: 13 Май 2024

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

Содержание

Файлы и папки тем
Сопоставление URL-адресов с шаблонами
Жидкость: основы
Понимание product.liquid
Выход
Логика
Фильтры
Что дальше?
Дополнительные ресурсы и вдохновение

В течение последних нескольких недель я создавал тему Shopify для Viewport Industries, компании, которую мы с Эллиотом Джеем Стоксом основали в прошлом году. Мы выбрали Shopify по нескольким причинам:

Это позволяет нам продавать как цифровые, так и физические продукты.
Он полностью размещен, поэтому вам не о каких серверах нужно беспокоиться.
Он поддерживает ряд платежных шлюзов, которые прекрасно интегрируются с нашим банком.
Он основан на теме, что означает, что мы можем легко повторно использовать HTML, CSS и JavaScript нашего существующего сайта.

Shopify использует шаблонизатор под названием Liquid для вывода данных из вашего магазина в ваши шаблоны. Liquid - это, пожалуй, один из ингредиентов темы Shopify, который вы раньше не использовали, и это может отпугнуть. Но хорошая новость в том, что начать с этого не так уж и сложно.

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

Файлы и папки тем

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

ресурсы
config
макеты
theme.liquid
фрагменты
шаблоны
404. жидкость
article.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
product.liquid
search.liquid

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

Чтобы узнать больше о том, как работают темы, а также о папках config и snippets, я бы рекомендовал прочитать Theme from Scratch и Theme Settings на Shopify Wiki.

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

Сопоставление URL-адресов с шаблонами

Темы Shopify работают путем сопоставления текущего URL-адреса с определенным шаблоном. Например, если мы просматриваем продукт со следующим URL-адресом ...

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

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

В дополнение к тому, что Shopify знает, какой шаблон отображать по отношению к текущему URL-адресу, он делает доступным нам ряд очень конкретных переменных. Они известны как «переменные шаблона» и позволяют нам отображать данные в наших шаблонах.

Например, в нашем шаблоне product.liquid у нас есть доступ к метко названному продукт Переменная. Это означает, что мы можем вывести название, описание, цену и доступность нашего продукта в нашем шаблоне. Мы будем использовать комбинацию переменных Liquid и шаблонов, чтобы заполнить наши шаблоны данными, относящимися к нашим продуктам.

Чтобы увидеть полный список доступных переменных шаблона, посетите Шпаргалку Марка Данкли по Shopify.

Жидкость: основы

Liquid здесь, чтобы облегчить нам жизнь как дизайнеров тем. Один из основных способов сделать это - использовать макеты. Макеты идеально подходят для включения общих элементов страницы, таких как верхний колонтитул, основная навигация, нижний колонтитул и т. Д.

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

Я не видел файла theme.liquid от United Pixelworkers, но вы можете представить, что он содержит разметку для областей, выделенных ниже красным.

Вот как может выглядеть базовый макет theme.liquid:

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

Вы заметите две фразы, заключенные в двойные фигурные скобки: {{content_for_header}} а также {{content_for_layout}}. Это наши первые примеры использования Liquid.

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

Понимание product.liquid

Теперь, когда мы познакомились с основами макетов, пришло время взглянуть на шаблон.Магазины - это товары, поэтому давайте посмотрим product.liquid.

Вот очень простой, но функциональный пример шаблона product.liquid.

h2> {{product.title}} / h2>
{{ описание продукта }}
{% if product.available%}
form action = "/ cart / add" method = "post">
выберите id = "product-select" name = ’id’>
{% для варианта в product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ выбрать>
input type = "submit" name = "add" value = "Добавить в корзину" id = "покупка" />
/ форма>
{% еще %}
p> Этот продукт недоступен / p>
{% endif%}

Здесь работает ряд ключевых концепций Liquid. Давайте рассмотрим их по порядку.

Выход

Первая строка кода содержит фразу {{product.title}}. При рендеринге будет выведено название продукта, которое, как вы теперь знаете, определяется URL-адресом. В приведенном ниже примере United Pixelworkers название продукта просто "Индианаполис".

Liquid использует формат точечного синтаксиса. В этом случае {{product.title}} соответствует переменной шаблона продукта и ее атрибуту title. Мы можем вывести описание продукта таким же образом, используя {{ описание продукта }}.

В терминах Liquid это известно как выход. Весь вывод обозначен двойными фигурными скобками, как показано ниже: {{your_output}}.

Логика

В следующей строке кода вы заметите выражение в фигурной скобке, за которым следует%: в этом случае {% if product.available%}. Это еще одна важная концепция в Liquid, известная как логика. Ниже вы увидите {% else%} и, наконец, {% endif%}.

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

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

{% if product.available%}
Показать кнопку "Добавить в корзину" здесь
{% еще %}
Отображение сообщения о том, когда продукт будет в следующий раз доступен
{% endif%}

Фильтры

Liquid позволяет нам управлять нашим выводом несколькими способами. Один из них - использовать фильтры. Контент, который попадает в фильтр, выйдет на другой конец измененным определенным образом.

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

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

Вы также можете объединить фильтры. Например:

{article.content}

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

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

{asset_url}

Использование этого в нашей теме Shopify приведет к отображению следующего элемента img в нашем шаблоне:

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

В asset_url фильтр очень полезен, поскольку он возвращает полный путь к текущей теме ресурсы папка. Использование этого фильтра позволяет применять вашу тему в нескольких магазинах и не беспокоиться о путях.

Что дальше?

Надеюсь, эти несколько примеров показали вам, что Liquid не так уж и сложна. Конечно, вы можете сделать с этим гораздо больше, но, освоив вывод, логику и фильтры, вы хорошо на пути к пониманию большей части того, что вам понадобится для создания темы Shopify.