Общая информация о работе с приложением 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/

Мы Крым Диджитал

С 2015 года мы предоставляем полный цикл услуг мобильной и веб-разработки клиентам из различных отраслей и разных стран.

Подпишись
на наши новости

Контакты пресс-службы

+ 7 (926) 118-80-32

WhatsApp, Viber, Telegram

Давайте обсудим Ваш проект

или свяжитесь с нами по почте projects@crimeadigital.ru

Нажимая кнопку «Отправить», вы даете согласие на обработку персональных данных

Прошел день карьеры в СевГУ

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая. Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы. Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов — как начать свою карьеру в ИТ? Есть ли возможность совмещать учебу с работой? Кем я смогу стать? Как понять, кем я хочу работать? И многие другие.

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая.

Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы.

Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов - как начать свою карьеру в ИТ?

Есть ли возможность совмещать учебу с работой?

Кем я смогу стать?

Как понять, кем я хочу работать?

И многие другие.

Завершен набор студентов на летнюю практику

Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться — front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.
Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться - front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.

Крым Диджитал приняла участие в стратегической сессии

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня. Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства. Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня.

Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.
Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства.

Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Выпуск курса Software Testing

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing! Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании. Следующий курс намечен на август. Не пропусти анонс записи!

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing!

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

Следующий курс намечен на август. Не пропусти анонс записи!