Разработка интернет-магазина официального представительства Xiaomi в России

Ведущий мировой бренд техники, основанный в Китае.

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

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

Высокие стандарты качества и производства продукции, а также наличие уникального дизайна устройств в 2021 году сделали Xiaomi лидером по производству и продажам смартфонов в мире.

В России бренд Xiaomi представлен с 2016 года, став популярным благодаря соотношению цены и высочайшего качества выпускаемой техники.
С 2020 года официальным дистрибьютором товаров Xiaomi является компания Inventive Retail Group.

Xiaomi

— Это 23 фирменных магазина в крупнейших городах России, а также интернет-магазин, на котором представлен полный ассортимент экосистемы Xiaomi, которая включает в себя смартфоны Mi и Redmi, телевизоры, маршрутизаторы, мелкую бытовую технику, умные устройства для жизни и красоты, а также другие продукты.

В 2021 году Inventive Retail Group объявила о покупке специализированного онлайн-магазина «Румиком» у компании Digmi Group.

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

Сеть Mi Store

Разработать интернет-магазин официального представительства Xiaomi в России, сохранив философию и концепцию бренда, интегрировав его в ландшафт проектов Inventive Retail Group.

Задача

Этапы

Также для работы был выбран front-end фреймворк Vue.js. Так как речь идет о интернет-магазине, который должен выдерживать пиковые нагрузки, данная технология позволяет уменьшать нагрузку на сервер и дает возможность находиться на сайте большому количеству пользователей. Для клиента неоспоримым плюсом является адаптированность под highload, что это существенно упрощает запуск рекламных кампаний. Это особенно актуально в период распродаж, например, при проведении “Черной Пятницы" и “Киберпонедельника".

Так как сроки разработки были ограничены, а фреймворк vue.js позволяет двигаться -front
и -back разработке параллельно, работа велась одновременно, сокращая временные издержки. Со стороны заказчика было предоставлено несколько вариантов дизайн-макетов, которые были согласованы с головным офисом Xiaomi Global в Китае.

Работа над проектом началась с изучения и формирования технического задания.
Также под проект была сформирована выделенная команда разработчиков.
Было принято решение разработке сайта на CMS 1С-Битрикс, так как на данной платформе
есть весь функционал, необходимый для корректной работы современного интернет-магазина.
1С-Битрикс позволяет интегрироваться с:

Начало разработки

Маркетинговыми сервисами.

Онлайн-кассами;

CRM-системами;

Службами доставки;

Платёжными системами;

ERP (1С);

Команда Интаро полностью сохранила базу данных клиентов программы лояльности, включая телефоны, почты, ФИО, адреса, суммы последнего заказа и общую стоимость заказов в новую систему. Технология по sms-авторизации позволяет подтянуть данные учетной записи для избежания потери пользователей. В новую программу лояльности были перенесены данные более 149 000 пользователей, благодаря чему была сохранена база клиентов компании. А клиенты фирменного магазина Xiaomi получили возможность быстрой авторизации, современный интерфейс личного кабинета, который упрощает оформление заказа и делает покупку более удобной.

Разработка новой программы лояльности

Для упрощения бизнес-процессов заказчика, команда Интаро разработала и внедрила систему для структурирования и упорядочивания процессов работы с каталогом товаров. Если на сайте не было необходимого раздела, но внутри 1С заказчика он был заведен, то при выгрузке раздел автоматически появляется на сайте, сокращая временные издержки актуализации каталога.

Реализация и внедрение системы PIM (Product Information Management)

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

В каталоге есть группа торговых предложений, мы попадаем на детальную страницу, попадая в карточку, которая включает все возможные варианты торговых предложений.
На стороне заказчика есть глобальная система управления торговым предложением - Mercurius. Специалисты Интаро провели интеграцию с CMS, и если во внутренней системе со стороны заказчика появляется шильдик, например “Скидка", “Новинка" и так далее, то данная информация автоматически подтягивается в карточку товара на проекте.

Одно из основных преимуществ интернет-магазина ru-mi.com — широкий ассортимент, поэтому особое внимание было уделено разработке каталога. Было принято решение о внедрении Elasticsearch - поисковой системы, которая позволяет в режиме реального времени искать и анализировать данные. Благодаря этому поиск товаров становится более удобным для пользователя, и даже в случае некорректного запроса, система поможет найти нужный товар.

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

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

Разработка каталога товаров

На проекте реализована интеграция с сервисом DaData, который помогает с адресами, определением локации, а также производит автоматический расчет ближайшей даты доставки в пункты выдачи заказа.

CMS, используя данные адресного сервиса dadata.ru:

Интеграция с сервисом DaData

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

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

В разрезе города (региона), выводит клиенту на визуальное отображение подсказки, при его желании изменить автоматически определенное местоположение в шапке сайта.

Все сделано полностью на базе Elasticsearch. Back отдает все параметры для front-части по выбранной категории, но не грузит всю базу данных, а лишь подключает файл, в котором прописаны все необходимые параметры. Далее фильтры автоматически формируются благодаря индексам Elastic Search.

Реализация

Контент загружается на сайт, PIM (Product Information Management) формирует необходимые поля, которые передаются в систему Elasticsearch. После того, как система сверится с Elasticsearch, происходит реализация каталога.

Формирование файла
с параметрами товара

Предварительные способы доставки товара выводятся через корзину с помощью сервиса DaData. Если покупатель не авторизован, ему предлагается заполнить форму. Если пользователь не зарегистрирован, то создается новый аккаунт. Данные подтягиваются из программы лояльности через API.

Остатки товара выводятся в карточку товара благодаря интеграции с CRM, актуализация данных происходит постоянно. Система отправляет запрос в CRM на обновление остатков, CRM, в свою очередь, отправляет запрос в 1С и после этого запрос передается в CMS и количество остатков автоматически выгружается на сайт.

Карточка товара

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

Было реализовано три возможности оплаты заказа:

Все работает с помощью API, данные физических и юридических лиц выводятся при оформлении заказа благодаря интеграции с CRM-системой Inventive Retail Group - RetailCRM Enterprise.

История заказа клиентов автоматически переносится в личный кабинет из корзины.
В личном кабинете клиента есть возможность оставить обращение, которое передается в CRM-систему и менеджеры MI Store могут оперативно решить возникшие вопросы.
Благодаря интеграции с внутренней CRM реализована возможность отправлять SMS-сообщения, например, это актуально для специальных предложений постоянным клиентам.

Также в функционал корзины был внедрен FastService — часть RetailCRM, которая отвечает за работу с настройками доставок, оплат на проектах и осуществляет взаимодействие с внешними системами (1С, СПСР, PickPoint, КСЭ, Альфа-Банк и другие).

Корзина

По счету для юридических лиц.

При получении заказа;

Онлайн;

Общая схема интеграций проекта

Реализованные интеграции

Взаимодействие Nginx + Vue

Шильдики

Где получить

Сервис

Похожие товары

Контент

Карточка товара

Битрикс + Vue + Nginx + Nuxt + прослойка API на Symphony

Также онлайн-магазин интегрирован с Mindbox, Google Marketing Platform, Яндекс.Метрика.

Мессенджер

Сервисы кредитования

Фиды

Личный кабинет

Корзина

Карточка товара

Каталог

Раздел «Магазины»

Благодаря интеграции с DaData покупатель видит ближайшие адреса фирменных магазинов
Mi Store. Также можно указать выбранный город вручную. Если в городе пользователя нет магазина, то система предлагает ему воспользоваться доставкой.

Домашняя страница

Для более удобного управления страницей, а также актуализации баннеров и предложений, управлять страницей можно полностью с административной панели, которая интегрирована с внутренней системой магазина Mi Store. В зависимости от необходимости, можно подставлять либо товары, либо баннеры, с возможностью предпросмотра, а также автоматическое обновление страницы по таймеру.

Бестселлеры

Бестселлеры магазина Mi Store автоматически подтягиваются из внутренней системы,
а все подборки товаров работают по принципу landing-page. Landing-page поставляет фильтр и выводит подбор необходимых товаров, благодаря этому происходит быстрая передача информации на сайт.

Реализация API для front-части проекта

Для ускорения работы сайта был реализован API для построения ключа запроса.
Так как front и back части разделены, front часть делает запросы на back часть, ссылаясь
на один и тот же файл.

Логика разнесена по разным файлам. Существует блочная система, по которой фронт обращается к бэку, определяет фронт и происходит действие, вызванное с того или иного блока. Запрос идет в DaData, который выводится на front-часть проекта. При этом, был реализован свод правил - каталог по API.

Разработан современный и функциональный интернет-магазин, способный выдерживать пиковые нагрузки;

Команда Интаро опередила срок разработки на неделю, получив положительный отклик о проекте со стороны Xiaomi Global и Inventive Retail Group;

База постоянных клиентов онлайн-магазина Mi Retail выросла до 192 000 пользователей;

Произведена отладка внедрения новых технологий для e-commerce;

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

Сокращение времени на обработку заказов, содержащих некорректные данные по адресу доставки, путем сокращения количества таких заказов;

Увеличение товарооборота за счет повышения дружелюбности интерфейса клиента, сопровождающего процесс оформления заказа;

Работоспособность сайта ускорилась в разы. Благодаря этому разгрузились сервера проекта;

Объединение и импорт двух клиентских баз;

Реализация единой системы управления контентом;

Разработка единой шины для выгрузки контента в CMS.

В результате