Кейс агентства AiR о том, как они помогли оптовой компании сделать из обычного интернет-магазина эталон сервиса в Казахстане. Для этого они доработали функционал личного кабинета, внедрили умный поиск, синхронизацию нескольких 1С со многоскладовостью и не только. А затем клиент стал международной компанией с помощью внедрения мультиязычности и мультисайтовости.
Заказчик проекта
Yans.kz — международный оптовый поставщик товаров для сферы HoReCa (отели, рестораны, кафе) в странах СНГ: Казахстане, Грузии, Армении и России. Ассортимент включает одноразовую посуду, моющие средства, упаковку, расходные материалы для оборудования.
Цели проекта
- Отстроиться от конкурентов за счёт функциональности и удобства сайта и приложения;
- Перевести имеющихся клиентов на продажи через онлайн;
- Привлечь новых покупателей, не создавая чрезмерной нагрузки на отдел продаж за счет автоматизации работы с заказами.
Задачи проекта
- Максимально быстрый и удобный поиск;
- Удобный и многофункциональный личный кабинет;
- Реализовать бонусную систему для повышения клиентской лояльности;
- Сделать функциональные карточки и внедрить в них 3D-просмотрщик для товаров (многие товары можно покрутить в 3D);
- Сделать сайт мультиязычным: русский, английский. В следствии ещё добавились армянский, грузинский;
- Организовать для мобильного приложения рассылки и пуши для информирования об акциях, сервиса и up-sale;
- Внедрить чат для клиентов в мобильном приложении, интегрированный с Chat2Desk;
- Интеграция с 1С. Сделать обмен:
- Все заказы-товары;
- Остатки;
- Обновление заказов, при изменениях из 1С;
- Быстрая корзина и оформление заказа.
До реализации проекта
Компания базировалась только в Казахстане и была одним из начинающих игроков рынка.
Первая версия сайта была сделана для старта, чтобы заявить о своём существовании в 2017 году. Вскоре компания стала набирать обороты и обнаружив пробелы в сфере взаимодействия с клиентами через сайт и отсутствие важного клиентам функционала для быстрой поиска и выбора товара, приняла решение их закрыть и сделать максимально функциональный сайт и приложение, а не просто сайт для галочки.
Проект задумывался уникальным в своей сфере, так как у большинства конкурентов были достаточно не очень функциональные сайты, отражающие просто текущий каталог (не всегда актуальный), с малоудобным интерфейсом и минимумом функций.
Решение и вызовы проекта
Бонусная система
Бонусы — must have для любого бизнеса.
Но тут пойдёт речь не о маркетинге, а о том, как специалисты агентства проделали работу над этой системой с учётом реалий проекта.
Дело в том, что после выполнения заказа он уходит в 1С и CRM, после получения которого с клиентом связывается менеджер для уточнения заказа.
Менеджер, при необходимости корректирует заказ, и казалось бы надо просто настроить обмен заказа обратно на сайт, но нет. Клиент использует свою кастомизированную 1С, которую быстро не изменишь, потому у спецов написано API, которое подхватывает данные об изменении заказа в 1С и изменяет их на сайте.
Но это не всё.
После того, как заказ оформлен, он должен быть доставлен. Бонусы начисляются только после доставки, для чего менеджер должен сделать отметку в 1С о завершении заказа, после чего данные снова подхватываются API и тогда уже клиенту начисляются бонусы, которые он может использовать для последующих покупок.
Поиск
Поиск самый популярный раздел на сайте, было важно сделать его максимально точным, быстрым и ловким.
Стандартный поиск Битрикс не позволяет исправлять опечатки, как поисковая система. То есть если вы печатаете текст с ошибками, то он игнорирует ваш запрос как неверный. Точнее стандартный поиск упускает некоторые детальные запросы пользователей.
Это очевидно требовало совершенствования и в AiR нашли для него решение.
Для начала было принято решение использовать Sphinx, но быстро перешли к более продвинутой системе ElasticSearch. Хотя это звучит как готовая система, но это не так. Потребовалось много времени для настройки/интеграции данного поиска.
Итоговую логику работы поиска можно описать следующим образом.
Фактически сформировали правила запросов определённого вида из Битрикс в ElasticSearch и настроили правила поиска.
- Настроили учёт окончания слов;
- Составили правила очистки поиска от ненужных символов;
- Задали алгоритм поиска. Используется смежная логика из трёх типов запроса:
- Цифры. Если есть набор цифр, то определяется как артикул;
- Параметры товара. Если текст содержит различные спецсимволы, то считают его этой категорией;
- Запросы не попавшие в первые две группы – текстовые. Они подключаются если изначально запрос проходит как текст.
Таким образом на выходе пользователи получают быстрый и корректный результат поиска сайта, который не упускает важные запросы клиентов по каталогу, даже если они заданы с ошибками.
Фасовка товаров каталога и просмотр 3D моделей товаров
Товары на сайте представлены в виде торговых предложений, которые можно выбрать в различных удобных для посетителя сайта/приложения фасовках.
К тому же в ряде карточек товара, есть возможность просмотреть в виде 3D модели во всех возможных проекциях, что упрощает понимание полного представления внешнего вида товара.
Интеграция с 1С
Хоть всё начиналось с одного сайта с одной учётной системой 1С, проект эволюционировал и сейчас это уже 4 разных сайта для пользователей.
Работа организована так, что у каждого сайта есть своя учётная система 1С, которая в свою очередь разделена на склады.
Например, в Казахстане 4 склада:
- Алматы,
- Астана,
- Шымкент,
- Караганда.
Поскольку компания работает на всей территории Казахстана, склады распределены по регионам страны. Данная логистическая модель позволяет учитывать региональные особенности спроса и обеспечивать оптимальное наличие товаров в каждом филиале. В рамках интеграции, эта информация поступает на сайт, позволяя поддерживать актуальность для пользователя.
Личный кабинет
Контрагенты и адреса доставки
Необходимо заметить, что клиенты у заказчика достаточно разноплановые: некоторые имеют несколько юрлиц и адресов доставки, а кто-то может заказывать и как юрлицо, и как физлицо. Все это потребовало реализации многопрофильного оформления заказа
То есть у клиентов может быть много адресов, что очевидная ситуация для сетевых компаний, которые также могут находиться под разными юридическими лицами. Так что для пользователей создан функционал внесения списка всех адресов, данных юридических или физических лиц.
Что дает возможность при оформлении заказа: клиент может выбрать из списка уже готовых адресов и юр/физ лиц для оформления заказа, так и создать новые.
Лист ожидания
Чтобы клиенту не приходилось каждый раз проверять наличие необходимого товара, на сайте есть Лист ожидания. Если пользователь нашёл на сайте товар, который сейчас не в наличии, его можно положить в лист ожидания. Как только товар появится – клиенту придёт уведомление на почту, в личном кабинете сайта, а в мобильном приложении сработает пуш-уведомление.
Мобильное приложение
Чтобы повысить лояльность аудитории, разработчики сделали мобильное приложение. А в качестве фреймворка выбрали React Native. Который позволяет ускорить и удешевить разработку как минимум в полтора раза, по сравнению с разработкой мобильных приложений отдельно под iOS и Android.
По причине широкой географии работы компании Заказчика, необходимо было реализовать выбор страны перед авторизацией, т.к. от этого дальше зависит номенклатура каталога, цены, остатки и прочее, вплоть до маски авторизации (пример заполнения полей).
Все фишки основного сайта: push-уведомления, покупка упаковками или коробками, заведение целого справочника юрлиц, от которых вы делаете заказы, и адресов, куда эти заказы нужно привозить – также присутствуют в приложении.
Для главной страницы приложения, как центрального гостевого экрана, реализованы несколько типов баннеров:
- основной слайдер с баннерами, где выводятся основные акционные баннеры;
- несколько баннеров топ-категорий, назначаемых вручную из админ-панели приложения;
- popup-баннер с самым горячим предложением, который появляется при входе в приложение (однократно).
Внутри приложения реализована параллельная структура меню: информационное и функциональное меню.
- Информационное – контакты, условия доставки и прочее.
- В функциональном – все, что относится к каталогу и оформлению заказа.
Механизм поиска также продублирован в мобильном приложении – оно ни в чем не должно уступать сайту информационно, функционально или в удобстве.
Вся информация в приложении синхронизирована с сайтом и учетной системой в real-time по наличию, ценам, ассортименту и т.д., чтобы клиент всегда видел только самые актуальные данные.
Интеграция с Chat2Desk
Команда Yans давно использует агрегатор мессенджеров Chat2Desk, который позволяет компании оперативно работать с клиентами в одном месте, а не переключаться между мессенджерами.
Кстати, чат поддерживает любые медиа-форматы (фото, видео и т.д.), в том числе – голосовые сообщения со стороны клиентов.
Потому потребовалось интегрировать его с мобильным приложением, чтобы работа менеджеров оставалась такой же оперативной.
Интеграция была произведена по API, но чтобы работа проходила оперативно сначала сообщения переходят на промежуточный сервер для маршрутизации сообщений, и только потом уходят в агрегатор Chat2Chesk и обратно.
Команда Yans использует агрегатор мессенджеров Chat2Desk, который позволяет компании оперативно работать с клиентами в одном месте, а не переключаться между мессенджерами.
Разработчики предложили интегрировать его с мобильным приложением, чтобы менеджеры могли общаться с клиентами из единого приложения.
Интеграция была произведена по API. Но чтобы снизить нагрузку на личный кабинет, сообщения сначала приходят на промежуточный сервер, и только потом уходят в агрегатор Chat2Chesk и обратно.
Кстати, чат поддерживает любые медиа-форматы (фото, видео и т.д.), в том числе – голосовые сообщения со стороны клиентов.
Мультиязычность и Многосайтовость
Ввиду нехватки штатных возможностей Битрикс для мультиязычности, реализовали несколько кастомных механизмов для разных языков, так как требовалось, чтобы были переведены не только статичные надписи, но и названия товаров, новости и т.д.
К тому же у компании появились представительства в разных странах СНГ (список ниже), для чего потребовались различающиеся сайты по ряду технических особенностей и каталога, но с общим функционалом и стилистикой.
Специалисты агентства сделали общий кастомный код (шаблоны сайта, страницы, логика работы именно сайта) для всех сайтов. Но у каждого сайта своё ядро Битрикс, API и база данных.
В результате получили 4 сайта, каждый со своей комбинацией языковых версий, со своими каталогами и небольшими техническими отличиями:
- https://yans.kz/ – русский, английский
- https://complex.am/ – армянский язык, английский, русский
- http://yan-s.ru/ – русский
- https://yans.ge/ – грузинский, английский, русский
Фактически для языковых версий используется стандартный функционал Битрикс, который потребовал ряд доработок:
- Динамические свойства (названия товаров, разделов, описания и т.д.). Для них были созданы просто дополнительные свойства.
- Статические свойства (заголовки блоков, названия информационных страниц и т.д.) Выведены в отдельные файлы с языковыми переменными.
Таким образом при смене языка меняются динамические и статические переменные и показывают соответствующий язык.
Генерация PDF каталога
Данная часть работает исключительно для менеджеров сайта, но нельзя не выделить.
Менеджерам компании периодически требуется актуальный перечень каталога, который отражён на сайте, в красивом брендированном дизайне. И важно, чтобы они могли это сделать легко и самостоятельно без привлечения специалистов.
Для этого создали генератор каталог из php кода в PDF формат.
У данного функционала нет шаблонов и заготовок для работы, которые могли бы использовать разработчики. Потому подобрали и доработали специальную библиотеку для конвертации php в HTML, а после в PDF файл.
Главной сложностью оказалось то, что генерация производится в специальный формат по заданному из php предварительно дизайну в html. После уже код html конвертируется в PDF файл. Нюанс состоит в том, что при генерации в html всегда могут появляться “баги” и “неровности”, которые и предстояло отловить и доработать.
В результате методом перебора специалисты агентства нашли оптимальный вариант библиотеки, с минимальными доработками, которая выполняет данную задачу. И менеджеры могут наслаждаться брендированными и актуальными каталогами в PDF в любой момент.
Итоги после реализации проекта
После реализации проекта в Казахстане проект получил большую популярность за счёт высоких стандартов работы самой компании заказчика, а также и за счёт функциональности и удобства сайта и мобильного приложения.
Проект из локального сайта вырос в международный и стал образцом, который уже копируют конкуренты и стремятся повторить его успех и удобство.
