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

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

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

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

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

В России бренд Xiaomi представлен с 2016 года и быстро стал популярным благодаря соотношению цены и высочайшего качества выпускаемой техники.

С 2020 года официальным дистрибьютором товаров Xiaomi является компания Inventive Retail Group.

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

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

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

Задача:

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

Этапы: 

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

1С-Битрикс позволяет интегрироваться с:

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

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

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

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

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

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

Также в процессе разработки было реализовано два типа фильтров.

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

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

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

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

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

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

Все сделано полностью на базе 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, КСЭ, Альфа-Банк и другие).

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

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

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

Для ускорения работы сайта был реализован API для построения ключа запроса.

Так как front и back части разделены, front часть делает запросы на back часть, ссылаясь

на один и тот же файл.

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