Развиваем навыки разработки шаблонов Shopify

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

Альтернативная разметка

Самой главной составляющей языка Liquid является файл разметки, с которым мы познакомились еще в первой части. Я часто называю его «главный шаблон». Обычно он включает в себя HTML-код, элементы брендинга, навигацию и подвал, которые отображаются на всех страницах.

Все сгенерированные страницы в шаблоне Shopify основаны на этом главном шаблоне. По умолчанию этим файлом является theme.liquid, и расположен он в папке layouts. Наши микрошаблоны, расположенные в папке templates, будут сгенерированы тогда, когда Shopify дойдет до заглушки {{ content_for_layout }} в нашем файле разметки.

Чтобы освежить память, давайте рассмотрим пример базового шаблона:

<html>
<head>
{{ content_for_header }}
<title>{{ shop.name }} - {{ page_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
{{ "screen.css" | asset_url | stylesheet_tag }}
</head>
<body>
{{ content_for_layout }}
</body>
</html>

Как было отмечено в первой статье из серии, файл разметки в шаблоне 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:

http://www.abookapart.com/products/responsive-web-design

В этом примере 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.

Использование такого подхода к наименованию файлов позволит гораздо проще находить нужные сниппеты.

8faces-snippets

Когда стоит использовать сниппеты

Я обычно использую сниппеты для разделения кода на управляемые фрагменты и отделения элементов страниц, которые нужно будет использовать несколько раз. К примеру, блок пагинации.

Когда и куда добавить нужный код, я определяю следующим образом:

  • Если используется на каждой странице – файл разметки;
  • Если используется на одной странице и более – файл сниппета;
  • Если используется только на одной странице – микрошаблон.

Микрошаблоны как контроллеры

Также я научился использовать микрошаблон в качестве контроллера окна просмотра.

В приведенных выше примерах мы используем 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 elsif else

Описанный выше метод отлично работает для проверки 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:

<body class="{{ template | handleize }}">

Обратите внимание, что мы используем для вывода фильтр handleize. Вот несколько примеров:

<body class="index">
<body class="product">
<body class="collection">

Может возникнуть необходимость добавить handles текущего товара в класс body. Чтобы все оставалось понятным, мы можем применить условный оператор if, чтобы добавлять handles товара только в том случае, если посетитель просматривает именно его:

<body class="{{ template | handleize }}{% if template == "product" %} {{ product.handle }}{% endif %}">

Посмотрите, как я использовал пробел до тега вывода {{ product.handle }}.

Некоторые шаблоны также добавляют заголовок текущей страницы в элемент body в виде id, превращая приведенный выше код в нечто подобное:

<body id="{{ page_title | handleize }}" class={{ template | handleize }}{% if template == "product" %} {{ product.handle }}{% endif %}">

Не будет лишним, если мы добавим сюда проверку коллекций:

<body id="{{ page_title | handleize }}" class={{ template | handleize }}{% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">

Такую логику несложно адаптировать под собственные нужды.

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

Настройки темы

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

Чтобы отобразить собственные настройки в панели администрирования, нужно создать файл под названием settings.html, и сохранить его в папке config. Обратите внимание, что это единственный файл, в котором используется расширение .html.

Настройки темы имеют множество применений, но самое популярное – изменение цвета фона для всего сайта. Давайте взглянем на пример кода, который позволит реализовать это:

<fieldset>
<p><legend>Настройки цвета</legend></p>
<table>
<tbody>
<tr>
<th><label for="bg_color">Цвет фона (для примера)</label></th>
<td><input id="bg_color" name="bg_color" class="color" value=""#FFF"" /></td>
</tr>
</tbody>
</table>
</fieldset>

Здесь input является наиболее важным элементом. Мы задали для него id и атрибут name со значением bg_color, а также применили класс color. Этот класс очень важен. При считывании настроек нашего шаблона в панели администрирования Shopify сгенерирует удобную палитру цветов, и позволит быстрее определиться с цветом:

8faces-theme-settings

Настройки шаблона: достаточно один раз изучить их, и затем постоянно использовать

Вы наверняка заметили, что я установил 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 заменит теги вывода на значение, указанное в настройках шаблона в панели администрирования.

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

<fieldset>
<p><legend>Главная страница</legend></p>
<h3>Герой</h3>
<table>
<tbody>
<tr>
<td><label for="show_hero">Показать героя?</label></td>
<td><input type="checkbox" id="show_hero" name="show_hero" /></td>
</tr>
</tbody>
</table>
</fieldset>

Мы используем эту настройку для управления логикой на главной странице следующим образом:

{% if settings.show_hero == true %}
[Relevant hero banner code snippet]
{% endif %}

Добавление файлов – задача более сложная, поэтому давайте я расскажу о ней. Стоит отметить, что разметка вполне понятна:

<fieldset>
<legend>Главная страница</legend>
<h3>Герой</h3>
<table>
<tr>
<td><label for="home_hero_image">Изображение (в полном размере)</label></td>
<td><input type="file" name="home-page-hero.jpg" id="home_hero_image" /></td>
</tr>
</table>
</fieldset>

Здесь нужно обратить внимание на несколько вещей. Атрибут name, которым в нашем примере имеет значение home-page-hero.jpg независимо от названия загружаемого файла будет переименован в home-page-hero.jpg.

Во-вторых, расширение (в нашем случае.jpg) независимо от типа файла, который вы загружаете, Shopify будет пытаться конвертировать его в определенный формат. Если не получится, то пользователь столкнется с ошибкой. Наконец, в отличие от изображений товаров, загруженные файлы всегда сохраняются в папку шаблона asset.

Мы генерируем изображение героя для главной страницы в нашем шаблоне следующим образом:

<img src="{{ 'home-page-hero.jpg' | asset_url }}">

Здесь мы используем фильтр asset_url, который позволяет указать полный путь до изображения в Shopify CDN. Если вы не знакомы с этим фильтром, то подробнее о нем можно узнать во второй части нашей серии.

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

Набор инструментов Shopify

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

Первое, что я всегда рекомендую сделать, это включить режим «bogus gateway» в магазинах, которые находятся в разработке. Эту опцию можно найти в настройках в панели администрирования Shopify. Ее включение позволит просмотреть всю трансакцию и сгенерировать все необходимые email-оповещения. Также важно отметить, что вы можете использовать все приведенные выше техники Liquid в email-оповещениях.

Еще одна полезная функция – это настольный редактор шаблонов для Mac. После установки это программное обеспечение будет автоматически синхронизировать все изменения, вносимые в шаблоны. Если вы используете Mac, Windows или Linux, то можете установить инструмент для командной строки Shopify theme Gem, который позволит синхронизировать локальные файлы и магазин, находящийся в разработке:

desktop-theme-editor

Если вы используете редактор TextMate или SublimeText, то вам наверняка захочется установить расширение Liquid, которое поддерживает синтаксис и его подсветку.

Вдохновение

Магазин шаблонов Shopify полон бесплатных тем оформления, которые можно скачивать и использовать в учебных целях. Для разработки собственного шаблона вам следует использовать мой шаблон для новичков, который я закачал на GitHub.

Ресурсы

Предлагаю несколько ресурсов, которые помогут лучше изучить процесс разработки шаблонов Shopify:

Шпаргалка Марка Данкли – здесь представлены все переменные и логики Liquid, а также фильтры и теги вывода.

Документация по разработке шаблонов Shopify – она была обновлена совсем недавно, и теперь вы без труда сможете обращаться к ней за помощью.

Форумы, посвященные торговле при помощи Shopify
– эти форумы включают в себя множество интересных тем, в которых можно найти ответы от настоящих профессионалов в этой сфере.

Что дальше?

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

Перевод статьи “Taking Shopify Theme Development Further” был подготовлен дружной командой проекта Сайтостроение от А до Я.