Разработка официального магазина бренда IDOL

ЗаказчикMelon Fashion Group — российская компания, владеющая брендами Zarina, Befree, Love Republic, Sela, IDOL.ЗадачаВ сжатые сроки разработать интернет-магазин нового бренда, интегрировав его в контур других проектов Melon Fashion Group.

IDOL — это идея, заложенная в названии: I DO Life — я сам создаю свою жизнь, себя и окружение.Основа бренда — изделия из шерсти, кашемира и смесовых материалов высокого качества. Были привлечены новые поставщики, работающие с премиальными материалами и международными брендами. Ассортимент включает в себя костюмы, платья, трикотажные изделия, джинсовую и верхнюю одежду, обувь, сумки и аксессуары, 30% изделий ориентированы на мужскую аудиторию. 

c95a10c848d93346e686f7fd48d29b73.png

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

a7c5b619f1b4224c3165595f72016aea.png

Для разработки официального интернет-магазина IDOL Melon Fashion Group выбрали команду Интаро.

Расскажем историю запуска интернет-магазина для одного из самых ожидаемых брендов года. 

ff45de96c1b799e3507624840e31b988.png

Проведя аналитику и составив функциональные требования к проекту и требования к интеграциям, мы приступили к этапу разработки. 

Для реализации интернет-магазина была выбрана технология 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, благодаря чему ее используют многие крупные компании.

Реализованные страницы: Главная, Каталог, Карточка, Корзина, Чекаут, ЛК, Авторизация и регистрация, Результаты поиска, Информационные страницы, Лукбук, Уход за изделием.

a9c95907f0e0f6d72d4ddeb8a5556f15.png

Помимо разработки в ограниченные сроки, перед нами стояла задача интегрировать новый интернет-магазин в контур проектов Melon Fashion Group. C помощью API мы провели интеграцию с внутренней системой ESB, которая передает информацию о складах, товарах, остатках и ценах. Благодаря этому происходит постоянная актуализация каталога.

Интеграция с Lamoda. 

  • Остатки для склада Lamoda;
  • Идентификаторы населенного пункта;
  • Доступные способы доставки;
  • Интервалы доставки для курьерской службы;
  • Точки самовывоза по населенному пункту;
  • Детальную информацию по точке самовывоза и доступным интервалам доставки.

Интеграция с системой управления заказами. 

OMS —  внутренняя система управления заказами компании Melon Fashion Group. 

Благодаря интеграции, система обменивается с интернет-магазином следующими данными:   

  • Контактные данные клиента;
  • Товары в заказе;
  • Cпособ оплаты;
  • Способ доставки;
  • Адрес доставки;
  • Стоимость заказа;
  • Статус заказа;
  • Статус доставки по заказу.

В случае, если клиент изменил или отменил часть заказа, операторы систем правят заказ на своей стороне. После этого изменения приходят на сайт.  

Разработка мобильного приложения осуществлялась нашими коллегами по e-commerce — компанией Fittin. 

c295b80a9bfd36d59e4343d950908578.png

В рамках интеграции были реализованы следующие фиды:  

Фид с товарами

Основной фид с товарными позициями. Передаем в формате XML все данные о товарах, категориях и иерархии, включая описания и изображения.

Фид доступности товаров

Фид остатков, который содержит в себе информацию о наличии товаров на складах, количестве и цене данных товаров. 

Для остального функционала искали компромисс с учетом того, какая реализация будет быстрее. Также мы переиспользовали API сайта, например для страниц авторизации, регистрации и функционала оплат. Написали вебхуки для корзины и чекаута, работы с заказами и доставками.

9e06b99e9a12401fab90b98b779a5894.png 

Кроме того, была реализована синхронизация корзин для авторизованных пользователей и сохранение истории просмотренных товаров. 

Онлайн-оплата заказа. 

В качестве эквайринга для онлайн-оплаты картой был выбран сервис Payture. Интеграция была проведена с помощью API. Была реализована возможность оплатить самыми популярными платежными системами: Visa, Mastercard, МИР, Яндекс Pay. Дополнительно мы внедрили SDK модуль от Райффайзен Банка — СБП Райффайзен (способ онлайн-оплаты) .

Для осуществления триггерных и маркетинговых рассылок была проведена интеграция с сервисом Mindbox. В результате на стороне Mindbox заведена база клиентов с информацией о подписках, а также загружены товары с помощью yml-фида. Это позволяет бренду делать персонализированные рассылки и развивать маркетинговые инструменты в дальнейшем. 

eb9067ffa0f24db70c873110b8ab76ec.png

Первый розничный магазин IDOL открыл свои двери в конце сентября 2023 года, а продажи в интернет-магазине стартовали ранее. 

Благодаря применению новых технологий, позволяющих в короткие сроки запустить проект, соответствующий золотым стандартам e-commerce, покупатели могут по достоинству оценить формулу IDOL — продуманный широкий гардероб для разных случаев жизни, который сочетает в себе удобные базовые вещи, а также актуальные акцентные коллекции.

12800a3d2cfd356ced44fe9f1b64a6bc.png

Перейти на сайт

Полный текст статьи читайте на CMS Magazine