Внедрение геозависимости цен и условий доставки в интернет-магазине на Яндекс.Картах

• Цели внедрения геозависимости интернет-магазину
• Изменения на сайте
• Спрашиваем адрес доставки в начале при добавление первого товара в корзину
• Трудности, проблемы, решения

Кто мы? ИНТЕРВОЛГА – квалифицированный разработчик развитых интернет-магазинов на Битриксе.
Мы любим и умеем решать сложные задачи. Подходим к делу ответственно и делаем всё так, чтоб заказчику было удобно с нами работать.

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

В 2015 году нами был разработан сайт mybox.ru, сразу после его запуска появился поток задач, который не заканчивается по сей день. Нас это очень радует, т.к. всегда приятно и интересно работать с умным клиентом.

В начале 2016 на сайте заработал конструктор блюд паназиатской кухни. Летом 2016 сайт стал адаптивным и получил API для работы с мобильными приложениями.

В конце 2016 года была проведена работа по оптимизации сайта, нагрузочное тестирование показало порог пропускной способности сайта.

Цели внедрения геозависимости интернет-магазину

Сайт mybox.ru позволяет заказать блюда с доставкой в 90 городах России. Эти города находятся в разных часовых поясах. Такой разброс городов повышает требования к сервису и IT-инфраструктуре. Нужно учитывать много мелочей: от учета ингредиентов на торговых точках до локального времени для ограничения приема заказов.

Например:

• Обед. Час пик. Пробки. Вася хочет угостить свою подругу Машу блюдами паназиатской кухней. Сам Вася живёт на одном конце города, а Маша на другом. Вася заказывает еду с доставкой к Маше. Система должна принять верное решение, и выбрать торговую точку, которая может приготовить все блюда из заказа, расположенную максимально близко к Маше;
• Отшельник Никанор живёт по адресу “Старые Хлебеня, 119Ж”. Он делает заказ и вводит свой адрес. Сайт ничего не знает об этом адресе, его нет в КЛАДРЕ, однако система принимает заказ у Никанора и автоматически направляет его в колл-центр для уточнения адреса и способа доставки. Неподалёку от Хлебеней есть торговая точка, из которой можно получить заказ самовывозом;
• Из-за внезапного приземления марсиан развели мосты и пора запретить доставку в некоторые районы города.

Напомним: точек очень много. Инструмент управления геозависимостями должен быть быстрым и удобным.

Нужна система инструментов на сайте (для клиентов) и в бэк-энде. Одной из эволюционных ступеней в развитии сайта было внедрение КЛАДРа. КЛАДР позволил упростить оформление заказа, а также дал возможность автоматически распределять заказы по ближайшим торговым точкам.

Пока конкуренты по телефону уточняют адрес каждого заказа, mybox осуществляет автоприёмку и доставку большей части заказов.

КЛАДР очень хорош, однако он не дал возможность управлять зонами доставки (в нем нет данных по координатам домов, улиц, районов). Один город, одна зона. Такое управление нельзя назвать гибким.

Так перед нами встала новые задачи:

1. увеличить количество заказов принимаемых через “автоприёмку”;
2. дать возможность гибко настраивать зоны: границы, стоимость доставки, время доставки, время приёма заказа и т.д.;
3. всегда показывать на сайте актуальную информацию по зонам.

Решение этих задач представляет большую ценность для заказчика:

1. снижение нагрузки на колл-центр;
2. прозрачность работы сервиса и счастье клиента;
3. значимое конкурентное преимущество, т.к. ни у кого такого нет.

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

Мы проанализировали сайты конкурентов и подобные сервисы, изучили возможные пользовательские сценарии, составили своё представление о возможном решении:

• администратор сервиса в учётной системе с помощью специально созданного графического редактора поверх карты города рисует многоугольник, задаёт настройки зон и сохраняет его;
• в учётной системе реализуется веб-сервис, готовый к высокой нагрузке и способный быстро отдавать многоугольник зоны по требованию сайта;
• на сайте делается механизм ввода адреса с подсказками улиц и домов, чтобы в максимальном количестве случаев пользователь выбирал свой адрес из списка, а не вводил его полностью;  адрес конвертируется в координаты “долгота+широта”;
• на стороне учётной системы делается надёжный веб-сервис, которой по координатам определяет зону.

Поиск готовых решений подтвердил, что ничего на 100% готового для этой задачи ещё нет, однако есть волшебные Яндекс-карты, которые умеют и подсказки показывать и адреса в координаты конвертировать, а кроме того, у них есть целая библиотека инструментов для рисования поверх карт:

1. Редактор позволяет создавать зоны, управлять ими, менять границы, время и стоимость доставки;
2. Редактор не даёт одной зоне накладываться на другую;
   
3. Зоны могут находится внутри друг друга.

Большой задачей было реализовать такой умный редактор зон.

Он запрограммирован на ReactJS. JS и HTML код редактора размещены на сайте, однако вызывается напрямую из учётной системы с помощью CEF – Chromium Embedded Framework. Результат сеанса работы конвертируется в JSON и зоны в виде координат углов многоугольников сохраняются в базу данных.

Изменения на сайте

Спрашиваем адрес доставки в начале при добавление первого товара в корзину

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

Введенный адрес автоматически передаётся на страницу оформления заказа, теперь пользователю не нужно тратить время на заполнение формы, он может быстро оформить и оплатить свой заказ!

Трудности, проблемы, решения

1. Первый релиз формы ввода адреса включал одно поле для ввода улицы и дома, как в Яндекс.Такси. В это поле посетители писали всё, вплоть до кода домофона. От таких изменений нагрузка на колл-центр выросла. Мы переработали форму, разделив одно поле на два (улица и дом) и добавив третье для номера квартиры. Результат: нагрузка упала, все выдохнули;
2. “3-я улица строителей дом 25 квартира 12”. В каждом городе есть улица Ленина, в некоторых, одноименная площадь или проспект. В Волгограде полный комплект, а ещё рядом есть посёлок Гумрак (в нём есть аэропорт) и своя улица Ленина. Так сложилось, что Гумрак с ул. Ленина, что Волгоград со своими Лениными находятся в одной зоне доставки. Когда в волгограде кто-то пишет “Лени....”, он может запросто выбрать улицу в другом городе. У яндекс.карт есть 2 метода, которые так или иначе возвращают подсказки:

• suggest(request[, options]) - Возвращает список адресов вида { displayName: "Мытищи, Московская область", value: "Россия, Московская область, Мытищи " }. Проблема в том, что область поиска автоматически увеличивается до региона. Т.о. Возвращаются ул. Ленина во всех городах и сёлах выбранной области. Хуже чем у нас только в подмосковном домодедово;
• Геокодер - возвращает координаты наиболее подходящего объекта. Принимает на вход любую строку и сам пытается понять, что ищет пользователь. Тоже классная штука, однако, при запросе Столето… (проспект Столетова) усердно возвращает аптеки доктор столетов;
• Проблему решили комбинацией запросов и анализом ответов на стороне сайта. В результате проб и ошибок получили алгоритм, который быстро находит улицы и дома в окрестностях пользователя;
• Нужно больше точек на карте. Зона доставки - сложный многоугольник, в котором могут быть дырки, например область внутри зоны, куда доставка невозможны (например режимный объект). Чем больше зон в одном городе, тем больше нужно точек для их описания. Браузер начинает сильно тормозить, когда на карте появляется несколько сотен. Когда и почему тормозит? Тормозить начинает при добавление новых точек или перемещение предыдущих, т.к. система просчитывает возможные пересечения зон и пытается уложить зоны так, чтоб зоны не накладывались друг на друга и между ними не образовывались дыры.

В итоге все вопросы были решены. Сервис запущен и работает. Упала нагрузка на колл-центры, заказчик получил точный инструмент для управления стоимостью доставки.

Мы получили компетенцию работы с коммерческим API яндекс карт, узнали его особенности, наступили на десяток грабель и готовы точно оценивать и решать подобные задачи.

Для справки: эта глубокая модернизация потребовала привлечения ~10 специалистов с трех сторон (особо стоит отметить фронтенд-разработчика Дмитрия Матюшечкина) и работы по координации 3 менеджеров на протяжении нескольких месяцев.