Как устроен интернет-магазин «Бековских сладостей» изнутри

Проект–победитель конкурса Russian Drupal Awards в номинации «Лучший интернет-магазин»

В декабре 2022 года мы, веб-студия ADCI Solutions, подвели итоги конкурса Drupal-сайтов Russian Drupal Awards. В этот раз нам было приятно поздравить с победой не троих, а 12 участников, взявших — у кого-то из них это получилось неоднократно — первое, второе и третье места в пяти номинациях.

Одна из главных целей конкурса остаётся прежней: продвигать Drupal, демонстрируя на примерах работ победителей, какие сайты можно создавать на одной из самых популярных CMS в мире.

Продукция «Бековских сладостей» представлена во многих городах России через множество торговых сетей. Данный проект — официальный интернет-магазин производителя. Производитель сладостей обратился к исполнителю с задачей сделать редизайн существующего сайта. Проект заинтересовал разработчика в том числе потому, что сладости производятся в Пензе, его родном городе.

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

К общим для интернет-магазина требованиям относились:

Помимо них, были также специфические требования:

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

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

Сайт разрабатывался на Drupal 9 на основе Commerce Core. Кроме кастомных решений и «базовых» контрибных модулей (pathauto, field_group, redirect, simple_sitemap и т. п.) можно отметить Config Split, Mail Login, Paragraphs, REST UI, Search API, Warmer.

Скорость ответа для ecommerce-проекта очень важна, поэтому дополнительные усилия разработчик приложил к обеспечению кэширования. Drupal прекрасно справляется с кэшированием из коробки, а на проекте не слишком много контента. Но для динамических блоков с недавно просмотренными товарами и персональными рекомендациями была реализована своя система плейсхолдеров. Блоки подгружаются по мере скролла страницы, и после нужных серверных вычислений пользователь быстро получает то, что должен увидеть. При этом кэшировать всю страницу для каждого отдельного пользователя не нужно.

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

Также дополнялась страница просмотра заказа — для неё был разработан собственный шаблон на основе требований клиента.

Принимать оплату планировалось через сервис Payin-Payout. На тот момент сервис предлагал выгодную комиссию за проведение платежа, однако готового решения для его интеграции с Drupal не было. Для решения задачи был разработан модуль и оформлен в контрибный модуль Commerce Payin-Payout.

Очень важно было сделать процесс оформления заказа простым и понятным. И желательно, чтобы все шаги пользователь мог пройти на одной странице.

Поскольку подобные формы заказа предполагают вариативность и большое количество вычислений на бэкенде, было решено реализовать форму на фреймворке Alpine.js. Получилось удобно в поддержке и довольно легковесно.

Сайт был запущен в августе 2021 года. За 2022 год клиент добился роста следующих показателей:

✅ выручка: +30%
✅ количество заказов: +13%
✅ средний чек: +18%