F.A.Q по Shopify

23 января 2020 г. 201Прочее

В данной заметке я намерен ответить на вопросы которые у меня возникали в освоении платформы для электронной коммерции 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).

https://shopify.com

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...