Как мы запустили интернет-магазин для нового бренда Melon Fashion Group в кратчайшие сроки
IDOL стал пятым брендом в портфеле российского fashion-ритейлера Melon Fashion Group, присоединившись к Zarina, Love Republic, Befree и Sela
IDOL — это идея, заложенная в названии: I DO Life — я сам создаю свою жизнь, себя и окружение. Основа бренда — изделия из шерсти, кашемира и смесовых материалов высокого качества. Были привлечены новые поставщики, работающие с премиальными материалами и международными брендами. Ассортимент включает в себя костюмы, платья, трикотажные изделия, джинсовую и верхнюю одежду, обувь, сумки и аксессуары, 30% изделий ориентированы на мужскую аудиторию.
IDOL позиционирует себя как «доступный премиум». Клиентам предоставлен индивидуальный сервис, который включает в себя услуги стилиста, уход за вещами, а также персонализацию изделий. Специально для пространства розничных магазинов была создана парфюмерная композиция.
Запуск IDOL – знаменательное событие. Выход в новый для себя сегмент affordable premium – своего рода стартап, дух которого мы культивируем в компании. Такой шаг соответствует стратегии развития и расширения Melon Fashion Group, что позволит усилить свое присутствие на fashion-рынке России и привлечь новую аудиторию
История запуска интернет-магазина
Проведя аналитику, составив функциональные требования к проекту и интеграциям, мы приступили к этапу разработки.
Для реализации интернет-магазина была выбрана технология SPA (Single Page Application) — веб-приложение, которое работает в рамках одной страницы, без необходимости перезагрузки страницы при каждом запросе. Далее расскажем подробнее, из чего состоит фронт и бэк проекта.
Frontend
Для написания фронта выбрали фреймворк Nuxt.js. В результате получили такие преимущества:
- Быстрая загрузка страницы: SPA на Nuxt.js загружаются быстрее, потому что они загружают только те данные, которые нужны для отображения страницы, а не все данные сразу
- Удобство использования: Nuxt.js предоставляет множество инструментов для упрощения процесса разработки, таких как автоматическая генерация маршрутов, управление состоянием приложения и многое другое
- Улучшенная SEO-оптимизация: SPA на Nuxt.js имеют улучшенную SEO-оптимизацию благодаря пререндерингу страниц на сервере перед отправкой клиенту
- Большая скорость работы: SPA на Nuxt.js работают быстрее благодаря использованию серверного рендеринга и кешированию данных
- Легкость масштабирования: SPA на Nuxt.js легко масштабируются благодаря использованию компонентной архитектуры и удобству управления состоянием приложения
Backend
Для написания backoffice выбрали php-фреймворк Symfony. В качестве структуры хранения данных использовали платформу 1С-Битрикс. Администрирование и управление контентом также оставили на стороне CMS, поскольку Битрикс предоставляет широкий готовый функционал для этого.
Из плюсов подключения Symfony в Битрикс-проект можно отметить:
- Расширенные возможности для разработки - Symfony предоставляет широкий набор компонентов, которые могут быть полезны в проекте (например, компоненты для работы с базами данных, HTTP-запросами, формами и т.д.)
- Удобство при работе с API — Symfony имеет мощную систему маршрутизации, что делает работу с API проще и удобнее
- Поддержка стандартов — Symfony следует современным стандартам PHP, что позволяет использовать библиотеки и инструменты от других разработчиков
- Качество кода — Symfony признана как одна из лучших фреймворков на PHP, благодаря чему ее используют многие крупные компании
Реализованные страницы: Главная, Каталог, Карточка, Корзина, Чекаут, ЛК, Авторизация и регистрация, Результаты поиска, Информационные страницы, Лукбук, Уход за изделием
Помимо разработки в ограниченные сроки, перед нами стояла задача интегрировать новый интернет-магазин в контур проектов Melon Fashion Group. C помощью API мы провели интеграцию с внутренней системой ESB, которая передает информацию о складах, товарах, остатках и ценах. Благодаря этому происходит постоянная актуализация каталога.
Lamoda Фулфилмент
- Остатки для склада Lamoda
- Идентификаторы населенного пункта
- Детальная информация по точке самовывоза и доступным интервалам доставки
- Доступные способы доставки
- Интервалы доставки для курьерской службы
- Точки самовывоза по населенному пункту
Интеграция с системой управления заказами
OMS — внутренняя система управления заказами компании Melon Fashion Group.
Благодаря интеграции, система обменивается с интернет-магазином следующими данными:
- Контактные данные клиента
- Товары в заказе
- Способ оплаты
- Способ доставки
- Адрес доставки
- Стоимость заказа
- Статус заказа
- Статус доставки по заказу
OMS, в свою очередь, интегрирована с 1С и Lamoda. Таким образом, после оформления на сайте, заказы передаются на доставку.
В случае, если клиент изменил или отменил часть заказа, операторы систем правят заказ на своей стороне. После этого изменения приходят на сайт.
Мобильное приложение Fittin
Разработка мобильного приложения осуществлялась нашими коллегами по e-commerce — компанией Fittin.
В рамках интеграции были реализованы следующие фиды:
Фид с товарами
Основной фид с товарными позициями. Передаем в формате XML все данные о товарах, категориях и иерархии, включая описания и изображения.
Фид доступности товаров
Фид остатков, который содержит в себе информацию о наличии товаров на складах, количестве и цене данных товаров.
Для остального функционала искали компромисс с учетом того, какая реализация будет быстрее. Также мы переиспользовали API сайта, например для страниц авторизации, регистрации и функционала оплат. Написали вебхуки для корзины и чекаута, работы с заказами и доставками.
Кроме того, была реализована синхронизация корзин для авторизованных пользователей и сохранение истории просмотренных товаров.
Онлайн-оплата заказа
В качестве эквайринга для онлайн-оплаты картой был выбран сервис Payture. Интеграция была проведена с помощью API. Была реализована возможность оплатить самыми популярными платежными системами: Visa, Mastercard, МИР, Яндекс Pay. Дополнительно мы внедрили SDK модуль от Райффайзен Банка — СБП Райффайзен (способ онлайн-оплаты).
Для осуществления триггерных и маркетинговых рассылок была проведена интеграция с сервисом Mindbox. В результате на стороне Mindbox заведена база клиентов с информацией о подписках, а также загружены товары с помощью yml-фида. Это позволяет бренду делать персонализированные рассылки и развивать маркетинговые инструменты в дальнейшем.
Программа лояльности для всех пользователей сайта
При регистрации пользователя на сайте реализована проверка на участие в программе лояльности:
- если пользователь является участником программы лояльности, запрашивается информация о клиенте и отображается в соответствующем разделе личном кабинете
- если пользователь не является участником программы лояльности, ему предлагается зарегистрироваться в программе, а информация об этом отображается в соответствующем разделе личного кабинета
У участников программы лояльности есть возможность:
- накапливать бонусные баллы
- списывать бонусные баллы
- просматривать доступный баланс бонусных баллов
На стороне сайте реализована логика начисления бонусных баллов
- для пользователей 1 уровня в ПЛ доступно начисление 5%
- для пользователей 2 уровня в ПЛ доступно начисление: 10%
Зачисление бонусных баллов должно производиться по истечении 14 дней с момента перевода заказа в статус «Получен». Если часть товаров по заказу не была выкуплена, тогда требуется реализовать перерасчет бонусных баллов в соответствии с обновленным составом заказа.
Отображение начисляемых бонусов в публичной части сайта
- В карточке товара выводится количество получаемых пользователем бонусных баллов при покупке товара
- если на товар применена скидка, тогда бонусные баллы рассчитываются на базовую цену, которая учитывает скидку на товар
- на странице оформления заказа пользователь видит общее количество начисляемых бонусных баллов
- если на заказ применена скидка, тогда бонусные баллы рассчитываются по итоговой цене с учетом всех скидок
Списание бонусных баллов
- Отображение доступных к списанию бонусов в выводится в публичной части сайта
- в личном кабинете раздела ПЛ пользователь видит общее количество бонусных баллов
- на странице оформления заказа пользователь видит общее количество бонусных баллов
- реализована возможность применения к заказу части бонусов в соответствии с уровнем в программе лояльности
Интеграция с платежным сервисом «Подели»
- Backend
- Frontend
- Доработка для мобильного приложения Fittin
В рамках интеграции с «Подели» реализованы возможности:
- получать график платежей
- создавать оплату для холдирования д/с клиента
- подтверждать оплату для списания д/с клиента
- отменять оплату для возврата д/с клиента, если они не были списаны (доступно только на этапе холдирования д/с)
Первый розничный магазин IDOL открыл свои двери в конце сентября прошлого года, а продажи в официальном интернет-магазине стартовали ранее.
Благодаря применению новых технологий, позволяющих в короткие сроки запустить проект, соответствующий золотым стандартам e-commerce, покупатели могут по достоинству оценить формулу IDOL — продуманный широкий гардероб для разных случаев жизни, который сочетает в себе удобные базовые вещи, а также актуальные акцентные коллекции.
Перед нами стояла очень сложная задача — запустить интернет-магазин и мобильное приложение в рекордно-сжатый срок, не жертвуя при этом функционалом и архитектурой выбранного решения. В качестве IT-партнера мы выбрали команду Интаро и не пожалели об этом. Благодаря их опыту и высокой экспертизе в решении подобных задач, мы запустили онлайн на месяц раньше открытия розничной сети.
Интаро специализируется на разработке и поддержке сложных e-commerce проектов и B2B порталов. Мы реализуем высоконагруженные и отказоустойчивые системы, интегрируем сложные контуры и автоматизируем бизнес-процессы заказчика.