Мой Опыт Работы С Shopify Как Разработчика

С Shopify я работаю один год, за это время я столкнулся с множеством интересных задач и сейчас постараюсь поделиться своим опытом с вами. Если вы хотите изучить Shopify разработку, то вам будет полезно прочитать эту статью, она должна помочь вам познакомиться с Шопифай и возможно ответить на какие-то ваши вопросы. А если вы хотите открыть магазин на Шопифай, то это статья также будет полезна для вас, ведь вы также сможете найти полезную информацию.

Как я начинал?

С Шопифай я познакомился очень неожиданно. Когда я искал вакансии фронтенд разработчика я обращал внимание на разные технологии, которые используют компании. Ещё со времён учёбы в колледже, мне очень нравились интернет-магазины и я смотрел какие существуют платформы электронной коммерции. Из самых крупных я обнаружил wooCommerce и Shopify. С вукомерсом все понятно, но про Шопифай я услышал впервые. Тогда я зарегистрировался, посмотрел как он выглядит изнутри, почитал про него подробнее. Респект Шопифаю за документацию. И указал Шопифай в резюме, особо на него не надеясь, ведь Шопифай в России используется крайне редко. Даже сейчас я пытался найти русскоязычных Шопифай разработчиков — чтобы обменяться опытом и просто поговорить, но не нашёл. Возможно где-то они есть, ребята отзовитесь. 

После публикации резюме мне начали приходить отклики. И в один из дней мне написала HR Менеджер и сказала, что в компанию требуется Шопифай разработчик. Я был крайне удивлён, что сказать. Я прошёл собеседование, выполнил техническое задание и стал Шопифай разработчиком. 

Самое смешное, что когда я указывал Шопифай в резюме, я не думал, что буду с ним работать, но когда начал, через какое-то время он меня поразил. Изначально я думал, что это какой-то конструктор интернет-магазинов. Но позже оказалось, что в Шопифай можно делать много всего прикольного и что это не просто конструктор сайтов, а целая система со своими технологиями и фишками. В Shopify вы можете разрабатывать темы, писать приложения, которые упрощают жизнь владельцев магазинов, кастомизировать темы и многое другое. Это лишь малая часть функционала Шопифай. Но с точки зрения разработчика, это всё. Возможно звучит мало, но этого мало довольно много.

Винтажные темы

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

Обращаю особое внимание, что до сих пор продаются старые темы. Если вы решили купить тему на какой-то площадке, тот же themeforest, обратите внимание на версию темы, это очень-очень-очень важно.

Какую тему выбрать?

Прежде чем загружать тему в магазин, нужно её выбрать. В Шопифай существует две группы тем:

1. Официальные темы;

2. Темы от других разработчиков, в Шопифай их называют third party themes, типа сторонние темы.

Стоит понимать, что тема это всё — дизайн и функционал вашего магазина. Многие ошибочно думают, что тема это всего лишь дизайн, но это не так. Тема это еще и функционал вашего магазина. И проблема в том, что перед покупкой вы не сможете посмотреть тему изнутри, вы будете видеть только её оболочку, её дизайн. Конечно, вы увидите какой-то функционал, который представлен в демке, но это все-равно не полная картина. 

В моей практике часто бывало так, что заказчик покупал тему, которая ему понравилась внешне, но по функционалу она не удовлетворяла его потребностям. Потому-что как минимум человек не понимает, что можно сделать в Шопифай, а что нельзя, об этом я тоже расскажу чуть позже. Чтобы такого не было, стоит обратить внимание не только на дизайн темы, а также на версию темы и на разработчика темы. Возможно получится поговорить с самим разработчиком, т.е. спросить у него про версию темы, если вдруг она не указана в описании, также стоит узнать про поддержку некоторого функционала (если он вам нужен). 

Первый функционал, который я использую в работе — фильтры по метафилдам. Казалось бы, простая штука, нужно просто выводить на страницу коллекций и поиска фильтры по дополнительным полям, которые указаны в настройках темы во вкладке metafields. Возможно вы удивитесь, но это редкий случай, когда они есть в темах от сторонних разработчиков.

Как вы поняли, выбор темы — сложный вопрос. Всё зависит от ваших целей. Если ваша цель разрабатывать темы, т.е. учить Шопифай разработку, то я вам рекомендую использовать Dawn — официальная первая Shopify референс тема. Dawn отлично подойдет для понимания, что такое Шопифай разработка и как разрабатывать функциональные, и продуманные темы. Конечно, дизайн у неё минималистичный и не блещет какими-то красками, но зато вы найдете много примеров по добавлению дополнительно контента, потому-что все примеры в Шопифай документации для разработчиков представлены именно на Dawn. Также, люди задают свои вопросы по добавлению или изменению функционала Dawn темы в Шопифай сообществе и на Stack Overflow. 

Хочу сразу отметить Шопифай поддержку, которая отвечает очень быстро. А про поддержку тем от других разработчиков сказать сложно, какие-то саппорты отвечают быстро, а какие-то могут отвечать от одного дня — месяца, ну или не ответить вовсе, я с таким тоже сталкивался. Поэтому к выбору темы нужно подойти очень тщательно.

Интеграция темы с GitHub репозиторием

Это очень удобная фича в Шопифай, я пользуюсь ей каждый день. Если я что-то сделал не так или просто хочу посмотреть, что я изменял вчера или в любой другой день, я могу открыть репозиторий и посмотреть коммиты, которые сразу пушатся в репозиторий, даже если вы делаете изменения в кастомайзере. Поэтому, если вы хотите отслеживать изменения в вашей теме, то вам нужно связать вашу тему с Гитхаб репозиторием.  

О том как интегрировать Шопифай тему с Гитхаб я писал в своей предыдущей статье. Также узнаете про Shopify CLI, тоже очень крутая фича, почитайте.

Настройка темы

Как только тема привязана — хорошо бы ее настроить. Основные настройки на которые стоит обратить внимание:

1. Store details (нужно обратить внимание на получателя сообщений для того чтобы тестировать работу формы);

2. Users and permissions (для предоставления доступа в магазин);

3. Markets (для настройки основного рынка продаж и мультиязычности);

4. Apps and sales channels (для настройки плагинов и точек продажи);

5. Brand (для добавления логотипов, цветов, описания и тд.);

6. Metafields (те самые дополнительные поля);

7. Policies (настройка политики магазина).

После выставления глобальных настроек желательно изменить дефолтные настройки темы, туда входят: цвета сайта, шрифты, размер контейнеров, округлость кнопок, ссылки на соц. сети и еще кучу всего. Эти настройки зависят от темы, поэтому их количество и качество варьируется в зависимости от выбранной вами темы. Если вы не знаете, что выставлять в этих настройках, то оставьте как есть.

Секции

Секция — liquid файл, который позволяет вам создать переиспользуемый элемент контента и может быть кастомизирован клиентом. Насчет переиспользуемого контента возвращаемся к JSON шаблонам и вспоминаем его важность на этом этапе. 

Существует три способа отобразить секцию в Шопифай:

1. Через JSON шаблон; Когда у вас JSON шаблон страницы вы можете добавить любую секцию на страницу, которая есть в папке sections, также вы можете переиспользовать любую секцию (использовать одну и ту же секцию несколько раз). Чтобы добавить какую-либо секцию на страницу с JSON шаблоном вам всего лишь нужно нажать на кнопку add section в кастомайзере на нужной вам странице.

2. При помощи Liquid тэга; В старых темах вы можете увидеть .liquid шаблоны, но «жидкие» шаблоны неудобные в разработке. Чтобы отобразить секцию вам нужно зайти в код страницы и прописать: {% include "section-name" %}
   Подробнее про liquid вы можете почитать здесь.
   Памятка
   Вы можете добавлять секцию с .liquid расширением в нескольких файлах. Но помните, что существует всего лишь одна версия этой секции. Это значит, что при кастомизации кода этой секции она будет изменяться везде, где вы ее отображаете.

3. Использовав Section Rendering API; Вы можете использовать Section Rendering API чтобы запросить HTML структуру для секций темы используя AJAX запрос. Это позволит вам обновить контент страницы без перезагрузки всей страницы при помощи извлечения и замены лишь некоторых элементов. Такой метод применяется при пагинации результатов поиска на странице.

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

• Не перегружать секцию контентом
  Я встречал такой случай, когда весь контент на странице был помещен в одну секцию. Работать с этим, естественно, не удобно. Запутаться можно в два счёта и что-либо сломать тоже. Поэтому чтобы таких курьезов не возникало, разграничивайте контент по блокам. Например, у вас есть текстовый контейнер — поместите его в блок под названием ‘text’. Если у вас есть картинка в секции — поместите её в блок под названием ‘image’. И тогда получится, что у вас в секции есть два блока — ‘text’ и ‘image’.

  Памятка
  Eсли вам нужно установить задний фон секции, для этого не нужно помещать картинку или цвет в блок, лучше будет воспользоваться настройками секции. Тоже самое касается заголовка и подзаголовка секции (или любых других элементов).

Блоки

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

Прежде чем верстать какую-либо секцию, посмотрите на неё, как она работает. Есть ли у неё повторяющиеся элементы? Если да, то это можно и нужно поместить в блок, тогда не придется писать много ненужного кода.

Ограничения Шопифай как платформы

На Шопифай иногда не получается воплотить все идеи заказчика. Но почему так?

Шопифай это CMS для работы с магазином, она не создавалась для того чтобы на ней делали какие-то сложные анимации или дизайн решения. Шопифай создан чтобы продавать. Я понимаю, что дизайн очень важен для магазина и дизайн это то, что увидит покупатель в первую очередь. Но что лучше — красивый дизайн или хорошо работающая техническая часть магазина? Опять же понятие красивого дизайна у каждого свое. А под технической частью я имею в виду следующее: фильтры, личный кабинет пользователя, корзину, секцию недавно просмотренных товаров, поиск, вишлист, контактную форму, имейл рассылку. Это все — стандартный функционал интернет-магазина. И бывают темы, в которых это есть, но оно не работает. 

Заключение

Если вы изучаете Шопифай разработку, как и я, то добро пожаловать в клуб Шопифай разработчиков. Если же вы прочитали эту статью потому-что вам было интересно узнать мой опыт работы с Шопифай, то я тоже очень рад. В общем, пишите крутые темы, подходите к созданию магазина с умом, всем пис.