Oops... your message was not sent

Your message has been successfully sent

тематические истории, основанные на опыте компании JetRuby
Электронная коммерция

Общая информация о работе с приложением Shopify

Основной проблемой при разработке Shopify приложения в команде является отсутствие возможности реализовать полноценную работу команды из коробки. Так как программирование происходит исключительно на стороне Shopify, то и изменения в код вносятся в их личном текстовом редакторе прямо на сервере (скриншот 1). По специфике поведения он напоминает Sublime Text.
shopify

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

Зато в Shopify существуют темы магазина (рис 2.). Это своего рода версии вашего кода. Каждая тема может быть подвергнута совершенно независимым изменениям и попасть в публичный доступ. Речь идет о стандартном варианте, открытом для пользователей приложения. Однако публичная тема существует только в единственном экземпляре. Все остальные варианты доступны в админке. Оттуда же можно запустить превью непубличной темы. Ее Shopify запишет в сессию, которую вы запустили и в дальнейшем будет отображать, как стандартную. Подобная практика частично решает проблему совместной разработки, но создает новую сложность — объединение изменений из разных тем.

shopify-2-1024x538

Как ее преодолеть? Существуют приложения, позволяющие изменять код Shopify магазина на локальной машине. Это обеспечивает возможность использования любой удобной CVS для объединения изменений. Такими приложениями являются:

  1. Desktop Theme Editor — https://apps.shopify.com/desktop-theme-editor
  2. Theme Kit (ранее Phoenix) — https://github.com/csaunders/themekit

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

Принципы работы на примере Theme kit

В качестве примера мы использовали приложение Theme Kit. Выбор обусловлен тем, что оно написано на Go и является кроссплатформенным. В свою очередь, Desktop Theme Editor доступен только для Mac OS X 10.7+. С процессом установки Theme Kit можно ознакомиться на сайте — http://themekit.cat/install/

Итак, приложение готово к использованию — каковы дальнейшие действия? Нам необходимо создать папку с конфигурационным файлом config.yml

table

Чтобы узнать theme_id необходимо зайти в админку, далее:

Online Store -> Themes -> Customize Theme

2

Чтобы получить Access Token:

Apps -> Private Apps -> Create Private App

После этого открываем созданное приложение и копируем параметр Password.

Следующим шагом необходимо скачать тему. Для этого из папки с конфигурационным файлом в терминале запускается команда theme download. По окончании загрузки в этой же папке появляются файлы выбранной нами темы.

Для того чтобы скачать отдельный файл, в качестве аргумента можно указать путь к нему на сервере: theme download templates/404.liquid

Далее мы приступаем к редактированию. Чтобы все изменения автоматически отправлялись на сервер при сохранении необходимо запустить процесс командой theme watch. По дефолту запускается два воркера, которые следят за изменениями. При необходимости это значение можно изменить в конфигурационном файле. Для этого используется свойство concurrency.

Если у вас есть желание контролировать изменения и отправлять их на сервер вручную, на помощь приходит команда theme upload. Ее отличие от theme download в том, что вызов команды без аргументов не загрузит все необходимые файлы на сервер. Вы хотите узнать, что же он сделает? Мы ответим: ничего. Для того чтобы полностью загрузить измененную тему на сервер необходимо использовать именно theme upload */*

Однако даже в этом случае проблема перезаписывания изменений не будет решена. Ее можно избежать лишь двумя способами:

  1. Использование различных тем.
  2. Координация работы команды, не позволяющая разработчикам одномоментно изменять одинаковые файлы.

Как устроены темы Shopify?

Темы Shopify состоят из файлов-темплейтов с расширением .liquid. Каждый из них служит своей цели. Например, collection.liquid используется для отображения коллекций продуктов, а product.liquid — для вывода информации по конкретной товарной позиции. Кроме того, каждая тема Shopify содержит файл settings_schema.json, представляющий собой форму для простой кастомизации внешнего вида темы.

Liquid — это специальный язык для темплейтов с открытым исходным кодом, основанный на Ruby и созданный специально для Shopify. Liquid используется для динамической загрузки контента во frontend. Можно сказать без преувеличений, что он является основой тем для Shopify. Именно поэтому все templates имеют расширение «.liquid».

Как это работает

Для загрузки динамического контента используются теги (tags), объекты (objects) и фильтры (filters). Все это выглядит следующим образом:

1) Tags — логика. Например, условные операторы:

{% if user.name == ‘elvis’ %} Hey Elvis {% endif %}

 

2) Objects содержат атрибуты для загрузки динамического контента:

{{ product.title }} <!— Output: Awesome T-Shirt—>

 

3) Filters используются для модификации вывода строк, чисел, переменных и объектов:

{{ ‘sales’ | append: ‘.jpg’ }} <!— Output: sales.jpg —>

Структура тем Shopify

Темы Shopify включают в себя следующие директории:

  • assets
  • config
  • layout
  • locales
  • snippets
  • templates

Assets

Содержит все ассеты, используемые в теме, включая картинки, css и js файлы. Для обращения к ассетам темы из темплейтов применяют фильтр asset_url.

Configs

Содержит файлы settings_schema.json и settings_data.json. Settings_schema.json используется при рендере Theme Settings и при изменении внешнего вида магазина. Settings_data.json содержит свойства темы для мерчанта.

Layout

Содержит темплейты лейаута темы. По умолчанию — это theme.liquid файл. Все Liquid темплейты внутри папки templates рендерятся в theme.liquid.

Locales

Содержит файлы локализации темы. Среди прочих имеется дефолтный файл английской локализации en.default.json.

Snippets

Содержит все Liquid сниппеты, т.е, куски кода, к которым можно обращаться из других темплейтов с помощью тега include.

Templates

Содержит все остальные темплейты Liquid, включая темплейты Customer Accounts:

  • index.liquid
  • product.liquid
  • collection.liquid
  • cart.liquid
  • blog.liquid
  • article.liquid
  • 404.liquid
  • list-collections.liquid
  • page.liquid
  • search.liquid
  • gift_card.liquid
  • password.liquid
  • customers/account.liquid
  • customers/activate_account.liquid
  • customers/addresses.liquid
  • customers/login.liquid
  • customers/order.liquid
  • customers/register.liquid
  • customers/reset_password.liquid

Alternate Templates

Бывают случаи, когда вам необходим альтернативный markup для одного и того же темплейта. Например, на странице одного продукта должен выводиться сайдбар, а на странице другого — не должен. Решение — создание alternate templates.

Более полную информацию по темплейтам liquid можно узнать здесь: https://docs.shopify.com/themes/theme-development/templates/

department
Статью подготовил
Отдел Электронной коммерции
Команда имеет богатый опыт в разработке онлайн-решений для бизнеса. Мы используем только самые передовые технологии из области электронной коммерции.
New Articles