Магазин косметики на непопулярной CMS в России — Magento

Привет! Мы полезная команда разработки WPP.DIGITAL. Уже 15 лет мы помогаем компаниям поддерживать и развивать сайты, приложения и другие веб-продукты. Начинали мы как студия с единственной услугой — поддержка сайтов на битрикс. Время шло, и мы расширяли свой стек. Так, в 2017 году у нас уже появилась мобильная разработка, сильный менеджмент проектов и толковый бухгалтер. Но мы не закостенели в плену того, что понятно и просто.

Эта история о вызове, который мы бросили сами себе, взявшись за продукт на самой непопулярной (по нашему субъективному мнению) cms в России — Magento-2.

Что не так с Magento?

Magento-2 — CMS-система для создания и управления интернет-магазинами от Adobe. Ближайший российский аналог — система 1C Bitrix: управление сайтом. И там, и там есть развитый набор инструментов для формирования каталога, корзины, работы с различными видами онлайн-оплаты и доставки. Функционально они крайне похожи, но есть различия. Теперь о них.

1C Bitrix: управление сайтом

- Строго проприетарный, платный проект. Разработка ведется силами команды компании.

- Не основывается ни на одном известном фреймворке.

- Локальный продукт, искать документацию сложнее, чем для Magento-2.

- Архитектура с одной стороны очень простая в своей основе, а с другой — довольно запутанная, код ядра полон легаси*.

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

Magento 2

- Open source версия платформы Adobe E-Commerce. Развивается при большом вкладе сообщества.

- Использует некоторые модули фреймворка Symphony и другие общедоступные библиотеки.

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

- Продвигает структурированный подход к написанию компонентов: что-то на уровне рекомендаций, а что-то жестко зашито в архитектуру ядра.

- В коде Magento-2 разобраться сложно. Следует моде в плане ООП и подходов к написанию кода, перекочевавших за 7-10 лет из enterprise-разработки и больших систем в веб.

«Magento — во многом аналог битрикс, но есть отличия. Их одновременно можно считать и плюсом и минусом. В magento cms изначально расширяемый в любые стороны, очень гибкий флоу заказа. Очень здорово, но требуется время разобраться в “гибкости” пути заказа, когда берешь уже начатый проект. Усложняется работа еще тем, что фреймворк редко используют в России и документации на русском мало».

– Андрей Назариков, php-разработчик wpp.digital

Magento-2 — редкий фреймворк для России, поэтому найти российскую команду с хорошим опытом сложно. Согласно Рейтингу Рунета в СНГ всего 5 агентств, которые разработали на magento больше 3-х интернет магазинов. Для сравнения — в том же рейтинге минимум 200 агентств занимаются разработкой сайта на битрикс, а это в 40 раз больше, чем на magento. О непопулярности cms от Adobe свидетельствует и количество сайтов в рунете. 11250 интернет-магазинов используют битрикс для управления сайтом, magento commerce — только 176.

У нас, команды разработки WPP.DIGITAL, был скромный опыт работы на Magento-2 по меркам digital-рынка — всего 2 проекта. Это мало для того, чтобы сказать, что Magento — наш профиль. Для сравнения — на Битриксе у нас около 50 реализованных проектов и 10 специалистов на постоянной основе.

Весной 2024 года к нам обратился русский интернет-магазин на Magento-2 за услугой технической поддержки и развития сайта. Мы были больше склонны отказаться от проекта, чем согласиться. У нас не было опыта работы на magento на аутсорсе, было много темных пятен в знаниях. На первом звонке мы честно сказали клиенту о нашем опыте, не украшали факты. Клиент взял время на раздумья. На следующий день вернулся с ответом — готов был нам довериться. Так mirra.ru стал первым цифровым продуктом на magento commerce, для которого мы предоставили выделенную команду.

«Я работал 3 года над разработкой именно e-commerce. Чуть меньше с екомм-продуктами на Magento. Предметная область была мне знакома довольно хорошо и глубоко. 60-70% знаний у меня было. Остальное добивалось по ходу боя».

– Андрей Назариков, php-разработчик wpp.digital

Теперь подробнее о клиенте.

Mirra — косметическая компания с собственным производством и научной лабораторией. У компании 200+ оффлайн-магазинов в России, Чехии, Словакии, Японии, Белоруссии, Казахстане, Армении, Кыргызстане и Узбекистане. Сегодня у Mirra 100 000+ дистрибьюторов, работающих по системе МLМ (сетевой маркетинг).

Косметическая компания на рынке уже 28 лет. За это время Mirra успела:

- зарегистрировали 12 патентов в области медицины, ветеринарии и гигиены;

- сделать международную коллаборацию с Пьером Карденом — тем самым кутюрье, который работал с Кристианом Диором, создал дизайн для НАСА, брюки для «Битлз» и парфюмерную империю Pierre Cardin;

- первая из российских косметических компаний получила академические награды за работы в области биотехнологий;

- получила награду в 2022 год «Лучший российский косметический бренд» в номинации «За передовые технологии и инновационный подход» в рамках Международной премии в области здоровья и красоты THE MEDICAL STARS & BEAUTY AWARDS-2022.

- а в 2019 году стала Лауреатом премии ECO BEST AWARD в категории «Косметика» в номинации «Лучшая компания-производитель экологически безопасной продукции».

Сайт — один из каналов продаж компании МИРРА, благодаря которому ежедневно совершают оптовые покупки более 100 пользователей. В онлайн-магазине mirra.ru 300+ позиций косметики, бадов и парфюмерии. Сайт ориентирован и на b2b- и на b2c-сектора.

Последние 5 лет сайт поддерживал и развивал небольшой внутренний IT-отдел в тесной связке с российским it-подрядчиком. Сотрудничество было тяжелым. Внутреннюю команду не устраивала скорость работы IT-подрядчика. Но найти новую команду было сложно. Стек непопулярный, поэтому CTO mirra.ru решил искать аутсорс-команду по рекомендациям коллег.

«Через рекомендации быстрее и проще искать надежного подрядчика, меньше вероятности, что команда сделает плохо. Конечно, это все равно своеобразный кот в мешке, но он уже не такой черный. Нас посоветовали коллеги из другого IT-агентства. Так заказчик нашел нас 6 месяцев назад».

– Василий Гребенников, директор wpp.digital

Полгода назад онлайн-магазин Mirra попал к нам. Предыдущий IT-подрядчик выполнил некоторые работы по функционалу: в магазине можно было зарегистрироваться, сложить товар в корзину и сделать заказ. Страдали UX и работоспособность части функционала. Товар в интернет-магазине косметики mirra.ru можно было купить, но при оформлении заказа часто всплывали ошибки разного характера. С этими проблемами и предстояло разобраться в первую очередь.

«За 6 месяцев WPP.DIGITAL выполнила около 300 задач. Из них большинство реально большие и критичные. Многие вещи на сайте работали неправильно, что отталкивало клиентов: не позволяло им завершить заказ, не позволяло им хорошо ориентироваться на сайте. От постоянных клиентов в наш телеграм-канал поступало много жалоб».

– Александр Трифонов, руководитель IT-отдела Mirra

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

На момент 2024 основной клиент mirra.ru — дистрибьютор, работающий по MLM-системе. Доход от дистрибьюторской сети составляет 30-40% от общего числа форматов продаж. В этом большая мотивация делать покупки через сайт максимально удобными и легкими, чтобы их было больше. Сам личный кабинет должен стать персональной картой бизнеса для каждого дистрибьютора: чтобы он мог в любое время зайти в свой личный кабинет и понять, как его бизнес выглядит сейчас и как его можно улучшить.

Дистрибьютор заинтересован в расширении своего дерева. Чем больше у него ветвей, участников, тем больше они заказывают и тем ниже закупочная цена косметики для обоих. Новые участники присоединяются к команде по промо-коду. Как владелец промо-кода дистрибьютор получает 20% скидку за первый заказ новичка, а новичок — 10%.

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

«Отсутствовал метод для интеграции, чтобы уведомление о подключении приходило и человеку, и в систему. С фронта сайта оно уходило на бэк и там тихо погибало, не записывая информацию никуда».

– Андрей Назариков, php-разработчик wpp.digital

Баллы (PV) — это данные, по которым дистрибьюторам платят вознаграждение. Дистрибьютор и его «подчиненные» копят баллы, покупая косметику и выполняя другие условия маркетинг-плана. В конце каждого месяца выплачивается вознаграждение. Оно зависит от количества баллов у дистрибьютора и у всех участников его дерева продаж. Чтобы выполнить маркетинг-план и получить большее вознаграждение, участники одного дерева продаж могут обмениваться баллами в личном кабинете на сайте.

Следующая функциональная проблема, которую предстояло решить — баллы. Информация о баллах в ЛК была ненаглядной: текущий баланс, история пополнения и списания. Все операции с баллами были реализованы в бэкенде, но до клиента эта информация не доходила.

«По итогам отчетного периода мы начисляем вознаграждение клиентам по маркетинг-плану на основе совершенных покупок. До решения проблемы с баллами, перед закрытием периода, у нас был аврал, так как ошибку приходилось поправлять вручную. Многие клиенты жаловались на функционал: не туда перенесли баллы, а отменить действие они не могли; не видели, пришли им переданные баллы или нет. Команда разработки WPP.DIGITAL очень разгрузила нас, когда специалисты решили проблему баллов».

– Александр Трифонов, руководитель IT-отдела Mirra

С доставкой также было не все гладко. Она осуществлялась несколькими способами: курьером; Почтой России; до пункта выдачи СДЭК, 5Post; до оффлайн-магазинов сети. Если покупатель хотел поменять способ доставки, ему приходилось пересоздавать заказ. Система делала смену способа доставки только на фронтенде, на бэкенде же ничего не происходило. Если в заказе — 3 позиции, то проблема не выглядит страшной, а когда в корзине косметики на 200 000 руб., то проблема становится глобальной. Дистрибьютор просто бросал пересобирать такие заказы на пол пути.

«Когда мы устранили все проблемы выручка подросла. Мысли обычного пользователя сайта были такими: “Зачем мне заморачиваться с сайтом, если не получается оформить заказ. Я не буду мучиться”. Естественно, эта проблема снижала число покупок».

– Александр Трифонов, руководитель IT-отдела Mirra

Параллельно с задачами по «исправлению» функционала мы выполняли глобальный квест по изменению платежной системы. С мая 2024 года Сбер перестал обслуживать свой платежный шлюз. Как и другие клиенты Сбера, mirra.ru должен был перейти на ЮKassa. Чтобы оплата в онлайн-магазине мирра работала и дальше, за 3 недели мы должны были перевезти сайт на новую платежную систему.

«Платежную систему подключить несложно, но конкретно в mirra.ru это усложнялось тем, что работа Magento во многом построена на различных плагинах, и некоторые из них были самописными. Приходилось разбираться в коде и модифицировать плагины для того, чтобы они работали с ЮKass-ой корректно».

– Василий Гребенников, директор wpp.digital

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

Андрей Назариков, php-разработчик wpp.digital

Вот основные отличия ЮKassa от Сбера, которые мы для себя выделили после переезда с одного решения на другое:

Сбер

- Идет своим путем. Все запросы идут только методом POST.

- Возвращает из платежа только, по его мнению, нужное. В ответ на сообщение о заказе вернет на страницу оплаты только статус, например, «заказ оплачен», без сообщения.

ЮKassa

- API следует принципам REST. Используются http-методы GET, POST и PUT для соответствующих действий.

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

Осложняли «переезд» интеграции. В продукте mirra.ru их больше 5. Каждая интеграция — это зависимость работы системы от некой внешней. Любые изменения во внешних системах должны поддерживаться со стороны Magento и наоборот. Конкретно на mirra.ru заказы обрабатываются сразу учётной системой, платежным шлюзом, кассовым сервисом и системой учета маркетинговой информации. Любые попытки что-то поменять на сайте должны учитывать все эти связи и не ломать их.

«Путь информации выглядит так: данные о том, на какой стадии находится заказ: оплачен, собран, передан в доставку и т.д. передаются в Magento, затем идут в ЮKassa. После оплаты данные заказа и оплаты идут в 1С».

– Виктория Добаринова, QA-инженер в wpp.digital

После подключения ЮKassa на стандартные платежи мы приступили к интеграции системы «Плати частями». Сделали за 2 месяца. Решение позволяет разделить оплату заказа на 4 равные части. Маркетинговый отдел предполагал, что рассрочка мотивирует дистрибьюторов заказывать больше, то есть увеличит средний чек. Так и вышло.

«Мы хотели повысить средний чек. Он вырос с 2-3 тысяч при единовременной оплате до 6-7, 14-20 тысяч при использовании “Плати Частями”. Сервис появился в августе, поэтому люди пока не так активно им пользуются. Уже в октябре мы увидели, что 10 продаж из 100 в день приходятся на “Плати частями”, даже такие результаты для нас уже интересны».

– Александр Трифонов, руководитель IT-отдела Mirra

Пока мы настраивали корректную работу между «Плати Частями» и ЮKassa, нас уже поджидала задача по изменению процесса заказа. Некоторые плагины, связанные с чекаутом и перенаправлением на платежный шлюз, были рассчитаны только на один платежный метод. К ним нельзя было подключить сразу 2 платежные системы. Чтобы при оплате можно было использовать одновременно ЮKassа и «Плати частям», доработали плагины и планомерно тестировали. Двигались небольшими шажками через циклы: разработка — тест — локальная отладка — ретест. После весь цикл повторяли снова.

В «Плати частями» фискализация работала только на тестах. В боевом режиме эта функция не была реализована. Чеки не отправлялись в сервисы касс, вроде АТОЛа и т.д. Они уходили на заглушки для касс, подключенные разработчиками «Плати частями», поддержка которых была остановлена пару лет назад. Мы самостоятельно допилили модуль отправки чеков, чтобы он заработал по актуальному стандарту.

«Настроили интеграцию и допилили модуль отправки чеков. Когда сайт видит, что платеж прошел успешно, он формирует чек и отправляет его в кассу».

Андрей Назариков, php-разработчик wpp.digital

Раньше, когда все платежи проходили через шлюз Сбер-а, система сообщала о них заказчику. Ему приходило письмо на почту. Он выгружал заказы в 1С и там видел всю информацию по ним. Ни в ЮKassa, ни в «Плати частями» такой функции нет. Отсутствие письма могло напугать дистрибьюторов и стать поводом грозных писем в поддержку. Поэтому, предугадывая реакцию покупателя, мы настроили автоматическую отправку писем на почту покупателям с оповещением о совершенной сделке.

В планах:

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

- Создать на сайте mirra.ru отдельный раздел профессиональной косметики, где можно подобрать набор под конкретный запрос: выпадение волос, акне, розацея и тд. Набор можно будет положить в корзину целиком или выбрать из него товары поштучно;

- Добавить на сайт mirra.ru видео-библиотеку материалов о здоровье. Mirra как производитель косметики сотрудничает с профессорами, докторами, академиками. На YouTube уже есть вебинары о здоровье кожи, волос, внутренних органов. Такую библиотеку в планах разместить и на сайте;

- Внедрить онлайн-консультирование по фотографии. Специалист Mirra, опираясь на фото, порекомендует уход под случай клиента;

- Добавить в mirra.ru интерактивные элементы. Например, колесо фортуны для привлечения пользователей. По итогу игр пользователь сможет получить скидку или кешбек;

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

- Создать рейтинги товаров и сортировку по ним. Так можно продвигать востребованные товары в топ и увеличивать их продажи.

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