В данной заметке я намерен ответить на вопросы которые у меня возникали в освоении платформы для электронной коммерции Shopify.
Shopify это конструктор интернет-магазинов или CMS?
Нет! Shopify это SASS-платформа с возможностью доработки программистом. Sass-платформа предоставляет программисту ограниченный доступ в разработке магазина. В случае с Shopify вам доступны тема и расширения. Ядро вы шатать никогда не будете. В 99% работы с Shopify вы будете разрабатывать темы и их секции.
Какие языки программирования и технологии нужно знать разработчику в shopify?
- Scss/css/html5;
- JavaScript - [es6-7];
- jQuery.
- Liquid- шаблонизатор shopify [это единственное, что нужно выучить фронтенд-разработчику]. Без него вообще никак;
Не нужны "Древнеегипетские технологии", к примеру: Less.
Не нужно знать "Ruby on Rails" - вы будете работать с фронтендом, а это бекенд и с ним вы не будете работать.
Что программисту нужно знать о Shopify?
Shopify — интернет-компания, занимается разработкой программного обеспечения для онлайн и розничных магазинов. Штаб-квартира находится в Оттаве, Канада. Shopify была создана в 2004 году группой единомышленников, которые собирались создать интернет-магазин по торговле досками для сноуборда. Первоначально компания получила название Jaded Pixel Technologies Inc. и в 2011 году сменила название на Shopify Inc. По итогам 2016 года компания отчиталась о 377500 клиентах и сумме продаж магазинов в 29 млрд долларов (с даты создания Shopify).
Ruby on Rails (RoR)[основа бекенда Shopify] — фреймворк, написанный на языке программирования Ruby, реализует архитектурный шаблон Model-View-Controller для веб-приложений, а также обеспечивает их интеграцию с веб-сервером и сервером баз данных. Является открытым программным обеспечением и распространяется под лицензией MIT.
Liquid - шаблонизатор в Shopify
Liquid - это шаблонизатор который является основой любой темы Shopify и используется для загрузки контента в магазинвах. Liquid используется в Shopify с 2006 года и в настоящее время используется многими другими web-приложениями.
Важно! Любому разработчику нужно понимать, что есть Liquid который используется в Shopify и его функционал отличается от публичного шаблонизатора Liquid. Самая актуальная документация по Liquid для Shopify тут: Liquid шаблонизатор - shopify.com.
Основы шаблонизатора Liquid
Код шаблонизатора можно разделить на:
- Объекты - Выходная разметка (которая может преобразовываться в текст)
- Теги - Разметка тега (которая не может быть преобразована в текст)
- Фильтры - Фильтры изменяют выход объектов. Они используются в выводе и разделены символом | .
Liquid: Основные операторы
== равняется
!= не равно
> больше чем
< меньше, чем
>= больше или равно
<= меньше или равно
or логично или
and логично и
contains - contains проверяет наличие "подстроки" внутри строки.
contains можно только искать строки. Вы не можете использовать его для проверки объекта в массиве объектов
{% if product.tags contains "Hello" %} This product has been tagged with "Hello". {% endif %}
Liquid: Объекты
Объекты и имена переменных обозначаются двойными фигурными скобками: {{ и }}.
{{ page.title }} ======================================================================== Выведет: Some title
Теги
Теги создают логику и поток управления для шаблонов. Они обозначены фигурными скобками и знаками процента: {% а %}.
Разметка, используемая в тегах, не создает видимого текста. Это означает, что вы можете назначать переменные и создавать условия и циклы, не показывая никакой логики Liquid на странице.
{% if user %} Hello {{ user.name }}! {% endif %} ======================================================================== Выведет: Hello Adam!
Liquid: список поддерживаемых в настоящее время тегов:
- assign - создает новую именованную переменную;
- capture - заблокировать тег, который захватывает текст в переменную;
- increment - создает новую числовую переменную и увеличивает ее значение на единицу каждый раз, когда она вызывается. Начальное значение 0;
- decrement - создает новую числовую переменную и уменьшает ее значение на 1 каждый раз, когда decrementвызывается переменная. Начальное значение счетчика -1;
- case - блочный тег, это стандартный случай ... когда блок;
- comment - блокирует тег, комментирует текст в блоке;
- cycle - цикл обычно используется в цикле для чередования значений, таких как цвета или классы DOM;
- for - для цикла;
- break - выход из цикла;
- continue - пропускает оставшийся код в текущем цикле for и продолжает следующий цикл;
- if - стандартный блок if / else;
- include - включает другой шаблон; полезно для кусков кода которые повторяются;
- raw - временно отключить обработку тегов, чтобы избежать синтаксических конфликтов;
- unless - зеркало оператора if (разве что).
Темы в Shopify
Theme Kit
Theme Kit - инструмент командной строки для создания тем. Скачайте приложение и с небольшим количеством настроек. Простыми словами обгрызенный git-клиент только для shopify который только отслеживает изменения файлов.
https://shopify.github.io/themekit/
Slate
Slate - позволяет синхронизировать локальные файлы с вашим текущим магазином, одновременно развертывать в нескольких средах и гибко организовывать таблицы стилей и сценарии.
https://shopify.github.io/slate/docs/about
Структура темы shopify[ThemeKit].
Тема Shopify включает в себя следующие каталоги:
assets - содержит все ресурсы, используемые в теме, в том числе изображения, таблицы стилей и файлы JavaScript.
config - включает файл settings_schema.json и settings_data.json файлы.
layout - шаблоны макетов темы, которые по умолчанию являются файлом theme.liquid .
locales - Языки и переводы.
sections - разделы темы , которые являются повторно используемыми модулями контента, которые могут быть настроены и переупорядочены пользователями темы.
snippets - все фрагменты темы, представляющие собой фрагменты кода, на которые можно ссылаться в других шаблонах темы.
templates - содержит все другие шаблоны Liquid, в том числе для учетных записей клиентов.
P.s: тема на Slate конвертируется в ThemeKit, просто в Slate более дробится scss & js...