Интернет-магазин на Drupal с нуля: пошаговая инструкция

Оригинал публикации вышел на сайте Retail & Loyalty.

Мы запускаем серию материалов про разработку сайтов для онлайн-торговли на Drupal. В первом материале — о том, как себя чувствует отрасль в эпоху пандемии (спойлер: отлично), инструментах разработки eCommerce-сайтов на Drupal и о том, насколько они легки в освоении для не знакомых с программированием людей (ещё один спойлер: легко будет только в начале).

Состояние онлайн-ритейла к 2021 году

Весна 2020 года стала неоднозначным испытанием для торговли.

С одной стороны, наблюдалось падение выручки у малого и среднего бизнеса и закрытие некоторых его представителей. INTERFAX.RU ссылается на информацию от поставщика решений для автоматизации бизнеса «Эвотор»: в период с апреля по ноябрь 2020 года закрылись 20% торгово-сервисных точек из числа тех, которые работали в феврале и марте. Больше всего убытков понесли общепит, фитнес-индустрия, турфирмы и книжные магазины.

С другой стороны, от полного падения бизнес спас онлайн. Отчёты сети «Детский мир» и группы «М.Видео-Эльдорадо» за II квартал прошлого года говорят, что первая увеличила онлайн-продажи на 31,1%, а вторая — на 69,1%. В то же время аудитория сайта Wildberries выросла за прошлый год с 18 до 40 млн человек. Они, в свою очередь, вложились в двукратное по сравнению с 2019 годом увеличение заказов товаров через сайт и в конечном итоге почти двукратный же рост оборота маркетплейса.

Какое будущее предрекают исследования? Российское агентство Data Insight, специализирующееся на рынке электронной коммерции, прогнозирует, что к 2024 году объём онлайн-продаж в России составит 7,2 трлн рублей. По их расчётам, эта цифра могла бы быть на 1,6 трлн меньше, но вмешались самоизоляция и перевод на удалёнку.

Такие прогнозы носят глобальный характер. В 2021 году общая стоимость покупок, совершённых онлайн, составит почти 5 трлн долларов, более 3,5 трлн из которых придётся на покупки через мобильный интернет (для сравнения: в 2016 году эта цифра не достигала 1 трлн долларов).

Надеемся, что вывод для всех однозначный: обеспечить бизнесу долгую жизнь и доходность поможет онлайн-магазин, доступный на всех устройствах.

На чём можно разработать интернет-магазин

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

Также не стоит пренебрегать встроенными возможностями соцсетей. К примеру, небольшой бизнес может успешно жить внутри экосистемы ВКонтакте.

Но переход от небольшого бизнеса к среднему и крупному ставит перед его владельцем новые задачи:

• разграничение прав доступа пользователей инструмента онлайн-продаж;
• масштабируемость при высоких нагрузках;
• несколько разных eCommerce-сайтов, объединённых одной кодовой базой и одинаковой функциональностью (система мультисайтинга);
• поиск товаров по нескольким характеристикам (или фасетный);
• интеграция с CRM и другими сервисами.

В таком случае стоит обратиться к готовым CRM и eCommerce-платформам. Таких платформ много, но мы как студия с глубокими компетенциями в CMS Drupal поговорим о ней.

Коммерческий потенциал Drupal

Готовые платформы Open Source экономят бюджет тем, кто ставил их на службу своему бизнесу. В кризисное время они стали ещё более привлекательными. И то, что с помощью Drupal можно одновременно управлять и контентом, и продажами, — большая удача для всех видов предпринимателей и заслуга сообщества, разбросанного по всему миру. Есть минимум 11 причин, почему на базе этой CMS можно разработать не только лендинг или сайт туроператора, но и отличный интернет-магазин:

Таксономия. Модуль Taxonomy организует работу фильтрации и сортировки товаров в каталоге продукции на сайте. Без этого онлайн-магазин невозможен. Какое-то время модуль Taxonomy приходилось скачивать и устанавливать отдельно, но из-за большой востребованности его включили в ядро Drupal.

Data-driven подход в электронной коммерции. Чтобы ваши продажи управлялись контентом, нужна глубокая интеграция eCommerce-платформы и CMS друг в друга. Это редко проходит быстро и бесшовно, и здесь обнаруживается один из выгодных плюсов Drupal: Drupal Commerce. Это дополнение к Drupal, играющее роль модуля и фреймворка. Ниже мы расскажем о нём подробнее.

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

Интеграция со сторонними сервисами. Для нормальной работы онлайн-магазин на Drupal нужно обвесить платёжными системами и системами аналитики, интегрировать с соцсетями, настроить чат, автоматизировать маркетинг. Архитектура REST API открывает Drupal доступ к широкому спектру таких инструментов.

Mobile first-архитектура. Если хотите помочь освоить те самые 3,5 трлн долларов, который заработают mCommerce-проекты в 2021 году, ваш интернет-магазин должен работать на всех мобильных устройствах. Адаптивный дизайн по умолчанию — вот одно из отличительных свойств Drupal.

Мультиязычность. Покупают и продают по всему миру, поэтому любой eCommerce/mCommerce-проект должен уметь говорить с клиентом на любом языке. Drupal знает около ста, в том числе те, текст на которых читается справа налево.

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

Учёт ассортимента товаров. Если вы продаёте одежду, у неё есть параметры размера, цвета, пола. Если ваш товар — комиксы, то их можно делить на оригиналы или переводы, для лиц старше 6 или 18 лет, выпущенные тем или иным издательством и т. д. В модуль Drupal Commerce заложено понятие складской учётной единицы (SKU — Stock Keeping Unit). Это идентификатор, который будет своим для каждого товара с разными параметрами. Кроме того, эта возможность помогает контролировать остаток на складе.

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

Грамотный UX. Чем быстрее пользователь совершит на сайте покупку, тем выше шанс, что он вернётся за новой, а поисковики будут лучше ранжировать сайт по целевым запросам. Drupal может обеспечить такую скорость, а при следовании принципу Headless eCommerce пользователь будет перемещаться между страницами со скоростью болида.

Омниканальность. Чем больше точек касания с покупателями, тем лучше, и Drupal обладает потенциалом для построения целой экосистемы продуктов. Если вслед за сайтом вы захотите разработать мобильное приложение, то работы будет меньше — благодаря тому же принципу Headless eCommerce система управления контентом выступает в качестве базы данных, общей и для сайта, и для приложения.

Drupal Commerce

О Drupal говорят как о платформе, в которой достаточно уметь ставить галочки в нужные чекбоксы и получить первые продажи. Так вот, это преувеличение — начать собирать колючки на этом тернистом пути можно даже во время конфигурации Drupal. Спросите себя: «Раз всё так просто, то чем занимается многочисленное комьюнити Drupal-разработчиков?» и станьте на шаг ближе к созданию красивого, современного, конкурентоспособного, безопасного с точки зрения утечки данных и постоянно обновляемого онлайн-магазина, который нельзя создать без знаний, добываемых годами. Но инструкцию для не-программистов мы всё равно приложим — новое знание поднимет вам самооценку и впоследствии позволит свободнее общаться с командой разработки.

Мы помним, что сам по себе Drupal в первую очередь позволяет размещать на сайте контент, а все остальные возможности наращиваются Drupal-совместимыми модулями. Один из таких — Commerce.

Это модуль и одновременно фреймворк, разработанный на архитектуре Drupal и дающий возможность нативной интеграции коммерческих опций в Drupal-сайт. С принципом API-first разработчик быстро сможет связать модуль с любым сторонним приложением. Это особенно важно, если до онлайн-магазина ваш бизнес уже был интегрирован с какими-то системами. Так как это фреймворк, то все конфигурации, настройки и темы создаются с нуля. Разработчику даётся полная свобода действий, но если вы не из их числа, то не расходуйте время на попытки понять этот инструмент самостоятельно.

В базовый набор сущностей, которые можно создать на Commerce, входят:

• Product (продукт) — то, что продаётся в магазине;
• Orders (заказы) — один или несколько единиц продуктов, которые пользователь сайта положил в корзину, а также настройки для каждой единицы продукта, учитываемые на этапе расчёта итоговой стоимости и оплаты (например, скидка на продукт);
• Line Items (позиции в заказе) — единица продукта с его свойствами (размер, цвет и т. п.), которые будут учтены при формировании заказа;
• Payment Gateways (платёжные шлюзы) — программное обеспечение, решающее задачу оплаты заказа. Это либо самописные решения, либо готовые, вроде PayPal, Stripe, Braintree, Ubercart, платёжные шлюзы банков.

В довесок к этому члены комьюнити написали для Drupal Commerce полезные модули для всего на свете: расчёта стоимости доставки, учёт остатков, подсчёта сборов и пошлин и многого другого.

На текущий момент существуют две версии Drupal Commerce: Commerce 1 совместима с проектами на Drupal 7, а Commerce 2 — Drupal 8 и 9. Обе можно скачать с сайта Drupal.

Как создать интернет-магазин на Drupal без помощи разработчика

А теперь мы покажем вам, как собрать с помощью Commerce простенький магазин по продаже телефонов. Назовём его «Трилайн».

1. Скачайте последнюю версию ядра Drupal. Сделать это можно двумя способами:

• с помощью менеджера пакетов Сomposer. В его консоль нужно отправить команду:

composer create-project drupal-composer/drupal-project:9.x-dev my_dir — no-interaction

• c официального сайта Drupal.

Модуль Drupal Commerce потребует установки внешних зависимостей, поэтому лучше создать проект с помощью Composer. В качестве альтернативы необходимые пакеты могут быть подключены через модуль Ludwig, но рекомендуем всё равно Composer.

2. Перейдите на адрес сайта в браузере, выберите русский язык при установке.

3. Укажите доступы к базе данных.

Drupal предложит вам выбор из нескольких профилей сайта, которые содержат в себе настройки и контент по умолчанию. Если вам это не нужно, выберите minimal profile. Затем дождитесь окончания установки и заполните реквизиты на странице Configure Site.

4. Установка модуля Drupal Commerce возможна только с помощью менеджера пакетов composer, либо с использованием модуля Ludwig. Ознакомьтесь с документацией. Пусть вас не волнует, что команды в документации написаны для Drupal 8 — они справедливы и для Drupal 9.

5. Для того чтобы скачать модуль Commerce через Composer, отправьте в консоль команду:

composer require drupal/commerce

Перейдите во вкладку расширения в верхнем меню администратора и включите необходимые модули.

Опционально вы можете включить модуль Commerce Tax, необходимый для добавления дополнительных налогов (например, 12% НДС для заказов из России).

Модуль Commerce Promotion служит для создания промоакций, Commerce Number Pattern — для создания шаблона номера ваших продуктов, а Commerce Store пригодится, если вы хотите иметь несколько магазинов, управляемых одной системой.

7. Если вы все сделали правильно, в верхнем меню администратора появится новый пункт меню «Торговля».

8. Для начала зададим общие конфигурации магазина, после чего приступим к созданию товаров. Перейдите в пункт меню «Торговля» -> «Конфигурация».

9. Добавьте одну или несколько валют, которой пользователи будут рассчитываться за покупки. Для этого перейдите в пункт меню «Валюты».

10. Перейдите в пункт меню «Торговля» -> «Конфигурация» -> «Магазины» и создайте новый магазин. Заполните необходимые поля.

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

12. В пункте меню «Торговля» -> «Атрибуты товара» добавьте несколько атрибутов. Например, для телефонов это могут быть камера, размер экрана, объём памяти или цвет.

13. На странице «Торговля» -> «Конфигурация» -> «Типы вариаций товара» отредактируйте ваш кастомный тип и убедитесь, что выбраны созданные на прошлом шаге атрибуты.

Вы также можете добавить дополнительные поля, относящиеся ко всей вариации в целом, например фото товара.

14. После того, как мы подготовили структуру, время добавить несколько товаров. Для этого перейдите в «Торговля» -> «Products» -> «Добавить товар».

15. Перейдите во вкладку «Вариации». Здесь вы можете задать вариации товара с дополнительными опциями (атрибутами), которые мы создали на шаге 12.

16. Сохраните изменения и перейдите на страницу продукта.

Модуль автоматически выводит виджет для переключения атрибутов и загружает соответствующую вариацию.

17. Создадим страницу, которая будет выводить все продукты. Для этого в меню администратора перейдите в «Структура» -> «Представления» и создайте новое представление. Выберите «Показать товар» типа (ваш кастомный тип) и поставьте галочку в чек-боксе «Создать страницу».

18. Если вы всё сделали правильно, то при переходе на страницу, которую вы сделали на предыдущем шаге, вы увидите все добавленные на сайт товары. Это — базовое использование представлений, а перейдя по адресу «Структура» -> «Представления» и выбрав нужное, вы сможете кастомизировать эту страницу, к примеру настроить вывод или добавить фильтры поиска. С этим вам могут помочь модули Search API и Facets для создания фасетного поиска.

19. Созданные заказы можно просматривать на странице «Торговля» -> «Заказы».

Мы рассмотрели базовую функциональность платформы Drupal Commerce.

В дальнейшем вы захотите кастомизировать свой сайт и выбрать для него тему. На официальном сайте Drupal можно найти множество готовых бесплатных тем, либо инсталляционных профайлов, которые содержат настройки конфигураций и тему. Вы также можете рассмотреть платные сборки на различных платформах, например ThemeForest.

Drupal Commerce поддерживает множество популярных платежных систем, таких как Stripe или PayPal. О нашем опыте работы с ними вы узнаете из следующей статьи.

Чуть проще: eCommerce-модули Kickstart и Ubercart

Нет времени и бюджета? На такой случай есть парочка модулей с чуть более низким порогом сложности.

Drupal Commerce Kickstart

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

Ubercart

Ещё один комплект Drupal-модулей для создания интернет-магазина рядовым пользователем. Соответственно, конфигурируется простановкой галочек. Функциональность из коробки включает каталог категорий и товаров, корзину, оформление заказа, модули для оплаты и доставки, модуль для расчёта налогов, модуль для учёта складских остатков и модули для создания отчётов.

Headless eCommerce: один бэкенд, чтобы править всеми каналами продаж

Перед заключением расскажем о тренде в eCommerce-разработке, который не собирается уходить. Headless (или Decoupled) eCommerce — это принцип разработки даже не сайта, а целой экосистемы продуктов, работающих на ваш бизнес. В эту экосистему, помимо сайта, может входить мобильное приложение, онлайн-касса, смарт-терминал, социальные сети, чат-боты и многое другое. В случае соблюдения принципа Headless eCommerce все они берут данные с одного и того же сервера.

Попробуем объяснить архитектуру Headless eCommerce-сайта элементарным языком. Все незримые процессы, обслуживающие простые пользовательские операции вроде добавления продуктов в корзину, оплаты, применения подарочных карт и скидок, называются бизнес-логикой. Её обработка происходит на сервере, который можно в том числе построить на CMS Drupal. За видимые результаты обработки этих операций отвечает клиентская часть, для разработки которой используются такие JavaScript-фреймворки как React, Vue.js или Angular. Между ними встроен прикладной интерфейс, например, Rest API или GraphQL, передающий данные от от сервера к клиенту.

Преимуществами использования такого принципа станут:

• снижение нагрузки на сервер за счёт только частичной загрузки Drupal,
• снижение времени на разработку бэкенда сайта,
• использование возможностей JavaScript-фреймворков при разработке фронтенда вместо тем и шаблонов Drupal,
• гибкость в выборе фронтенд-разработчиков.

Заключение

Когда вас снова попробуют убедить, что разобраться с CMS с открытым исходным кодом проще простого, вспомните, что Drupal и все совместимые с ним технологии созданы на PHP, а PHP — это один из самых популярных и таких же обманчиво простых, как Drupal, языков программирования. Подключение систем оплаты, настройка разметки страницы, интеграция с системами аналитики (вам же нужно знать, откуда приходят покупатели), email-рассылки (для информирования об акциях и новинках и удержания) и многим другим — это сложно, а потому не стоит вашего времени. Пусть каждый занимается своим делом: вы — поиском новых каналов продаж и маркетингом, а веб-студия — разработкой и поддержкой магазина. В следующих статьях мы расскажем про наш опыт работы с системами платежей и о дизайнерских трендах в eCommerce.

Подписывайтесь на наш Medium-блог, а также следите за нами на vc.ru, в инстаграме и ВКонтакте.