13:12, 3 февраля 2021, 13:12
Количество просмотров 10270

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

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

 - рис.1

Веб-студия 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. Укажите доступы к базе данных.

 - рис.2

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

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

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

 - рис.4

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

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

 - рис.5

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

 - рис.6

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


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

 - рис.10

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

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

 - рис.12

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

 - рис.13

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

 - рис.14

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

 - рис.15

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

 - рис.16

 - рис.17

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

 - рис.18

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

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

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

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

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

Заключение

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

Рубрика:
{}E-Commerce

ТАКЖЕ ПО ТЕМЕ