Регистрация прошла успешно

Регистрация прошла успешно

На ваш e-mail пришло письмо с подтверждением

На вашу почту отправлена ссылка для восстановления пароля

Восстановление пароля
Все новости
17:31, 16 Апреля
Cofix приглашает москвичей на крупнейший кофейный фестиваль Moscow Coffee Fest
16:20, 16 Апреля
ПЛАС-Форум «Банковское самообслуживание, ритейл и НДО 2021» – новые спикеры и партнеры!
15:26, 16 Апреля
Свыше 12 тысяч компаний подключилось к маркировке молочной продукции в России
15:15, 16 Апреля
В России появятся органические дикоросы
15:11, 16 Апреля
К оплате по СБП подключилось 109 тысяч торгово-сервисных предприятий
15:04, 16 Апреля
Утконос увеличит свой ассортимент в 3 раза до конца года
14:57, 16 Апреля
Перекрёсток обновил оформление зон готовой кулинарии
12:56, 16 Апреля
Макдоналдс празднует юбилей МакАвто в России новым национальным рекордом
12:33, 16 Апреля
X5 объявила о росте чистой выручки на 8,1%
12:30, 16 Апреля
Айпост: В приоритете цифровизация и создание единого почтового пространства на территории ЕАЭС
03 Февраля 2021, 13:12

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

Retail _ Loyalty.jpg

Веб-студия ADCI Solutions запускает серию материалов про разработку сайтов для онлайн-торговли на 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. Сделать это можно двумя способами:
    1. с помощью менеджера пакетов Сomposer. В его консоль нужно отправить команду:

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

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

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

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

0.1 Конфигурация-базы-данных-Drupal.jpg

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

  1. Установка модуля Drupal Commerce возможна только с помощью менеджера пакетов composer, либо с использованием модуля Ludwig. Ознакомьтесь с документацией. Пусть вас не волнует, что команды в документации написаны для Drupal 8 – они справедливы и для Drupal 9.
  2. Для того чтобы скачать модуль Commerce через Composer, отправьте в консоль команду composer require drupal/commerce.
  3. Перейдите во вкладку расширения в верхнем меню администратора и включите необходимые модули.
1 Включение модулей.jpg

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

0.2 Добавить-tax-type-My-Store.jpg

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

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

0.3 Конфигурация-My-Store.jpg

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

0.4 Добавить-валюту-My-Store.jpg

  1. Перейдите в пункт меню «Торговля» -> «Конфигурация» -> «Магазины» и создайте новый магазин. Заполните необходимые поля.
3 Добавить-магазин.jpg
  1. Аналогичным образом добавьте новый тип товара. Для типа товара можете задать минимально необходимый набор полей, общий для всех товаров и не влияющий на их цену, например текстовое описание. Остальные характеристики отобразятся в его вариациях.
4 Добавление типа товара.jpg
  1. В пункте меню «Торговля» -> «Атрибуты товара» добавьте несколько атрибутов. Например, для телефонов это могут быть камера, размер экрана, объём памяти или цвет.
5 Атрибуты товара.jpg


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

6 Настройки вариации товара.jpg

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

  1. После того, как мы подготовили структуру, время добавить несколько товаров. Для этого перейдите в «Торговля» -> «Products» -> «Добавить товар».
7 Создаем продукт.jpg
  1. Перейдите во вкладку «Вариации». Здесь вы можете задать вариации товара с дополнительными опциями (атрибутами), которые мы создали на шаге 12.

8 Создаем вариации продукта.jpg

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

9 Страница продукта.jpg

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

10 Представление.jpg

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

11 Страница всех продуктов.jpg

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

12 Оформление заказа.jpg

13 Заказ.jpg

Мы рассмотрели базовую функциональность платформы 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, передающий данные от от сервера к клиенту.

Headless eCommerce 2.jpg

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

- снижение нагрузки на сервер за счёт только частичной загрузки Drupal,

- снижение времени на разработку бэкенда сайта,

- использование возможностей JavaScript-фреймворков при разработке фронтенда вместо тем и шаблонов Drupal,

- гибкость в выборе фронтенд-разработчиков.

Заключение

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

Понравился материал? Поделись.
ЖУРНАЛ RETAIL&LOYALTY №8 (95) 2020

будь в курсе
новостей индустрии