Работа с Шопифай: Введение

Shopify – одна из самых популярных в мире eCommerce-платформ. Большое количество предпринимателей уже используют этот сервис для ведения бизнеса.

Преимущества платформы

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

Навыки для начала работы

• HTML
• CSS
• Liquid

А что ж такое LIQUID?

Liquid – это язык шаблонов, его применение можно представить в
качестве некоторого моста между данными вашего магазина и
HTML кодом, используемым браузером.
Применяя простые конструкции, мы можем организовывать
логику, осуществлять доступ к данным магазина (например,
к заголовку товара, описанию коллекции, набору изображений
или к записи в блоге), и выводить эти данные напрямую
в шаблон.
Одно из главных преимуществ заключается в том, что нам не
нужно знать, что это за данные, ведь мы можем просто
использовать переменные, которые отвечают за определенный
набор данных в каждом шаблоне, то есть данные могут
динамически меняться. Далее мы детально ознакомимся
с Liquid, а сейчас поговорим о структуре данных в Shopify.

Папка CONFIG

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

Папка LOCALES

В данной папке хранятся JSON-файлы, которые необходимы
для мультиязычности сайта.

Папка SNIPPETS

Сниппеты – это файлы, которые содержат фрагменты кода
с возможностью повторного использования.
Они также имеют расширение .liquid.

Применение SNIPPETS

• Для вывода кода на каждой странице сайта – такой код можно поместить в файл разметки
• Для вывода кода на определенной странице – код следует поместить в соответствующий микрошаблон
• Для вывода кода на определенных страницах – код следует помещать в файл сниппета
• Хорошим примером использования сниппетов можно считать ссылки на социальные сети, а также блоки пагинации

Сниппеты можно применять в шаблонах с помощью специального тега liquid {% include ‘названиесниппета’ %}.

*Учтите, что при внедрении сниппета в шаблон не обязательно указывать тип расширения .liquid.

Папка ASSETS

Папка assets – это хранилище изображений, javascript и css файлов.
Многие часто разделяют файлы на подпапки в зависимости от
типа (например, папка CSS, папка для картинок и так далее).
Учтите, что в случае с шаблонами Shopify такая сортировка
невозможна.
Все Ваши файлы должны находиться в корне папки assets.
Все файлы, которые Вы загружаете с помощью панели
администрирования Shopify, также добавляются в эту папку.

Ограничения для работы с секциями

Папка TEMPLATES

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

Папка LAYOUT

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

Файлы разметки

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

Cтруктура данных в Shopify

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