Объединяем КЛАДР и расчёт доставки по карте

Расчёт стоимости доставки по зонам — довольно частая задача для интернет-магазинов в крупных городах. Для Москвы — это, обычно, доставка внутри МКАД с фиксированной стоимостью и доставка за МКАД с оплатой за километр пробега. Бывают и более сложные примеры, вроде бесплатной доставки в определённые районы города, расположенные близко к складу, или отличающиеся тарифы за километр, определяемые удалённостью от МКАД.

Задача

Базовый функционал Битрикс не предоставляет столь широких возможностей для расчёта. Обычно в таких случаях ограничиваются добавлением служб доставки «Курьером внутри МКАД» с фиксированной стоимостью и «Курьером за МКАД» с оплатой за километраж. Если с фиксированной стоимостью всё понятно, то с оплатой за километры сложнее. При оформлении заказа, пользователь может лишь приблизительно прикинуть в уме удалённость своего дома от кольцевой, перемножить на тариф за километр и понять сколько же ему придётся заплатить. Функция окончательного расчёта стоимости доставки возлагается на менеджера, который созванивается с клиентом и верит ему на слово, либо прокладывает маршрут в Яндекс.Картах.

Удобно? — Конечно нет!

Решение

Создавать с нуля своё собственное решение для расчёта километража оказывается экономически не выгодно, когда Маркетплейс предоставляет довольно функциональный модуль «Расчет стоимости доставки по Яндекс.карте» от SEBEKON. Для правильного и успешного поиска местонахождения покупателя, Яндекс.Картам требуется точный адрес в определённом формате. В этом нам поможет модуль «Автозаполнение адреса доставки по КЛАДР» от Ипол. Наша задача совместить эти модули на странице оформления заказа, максимально снизив количество кликов, необходимое для определения стоимости доставки.

Проблема

Модуль расчета стоимости доставки имеет ряд особенностей, не позволяющих использовать его в нашей задаче «из коробки»:

  • требует вводить адрес в своей форме повторно
  • не умеет синхронизироваться с полем адреса модуля КЛАДР
  • сохраняет введённый адрес в сессии
Кнопка Выбрать адрес под названием службы доставки теряется в общем потоке, особенно, если служб доставки несколько.
Да и вообще, дважды вводить адрес в форме заказа — неудобно и неправильно.
И нам нужно обязательно сохранить его в реквизитах заказа в формате КЛАДР.

Процесс

Попытка №1

Сначала мы решили просто синхронизировать адреса в двух формах обычным js. Решение оказалось простым лишь на первый взгляд, ведь мы имеем дело с перезагрузкой страницы, перезагрузкой отдельных её частей аяксом, изменением службы доставки, типа плательщика. Для реализации потребовалась масса условий, доработок шаблона компонента sale.order.ajax и самого модуля расчёта.
При незаполненном адресе, нужно было выводить стоимость доставки по-умолчанию и сообщать, что это стоимость доставки внутри МКАД. А для точного расчёта, требовалось ввести адрес и нажать кнопку Уточнить стоимость доставки.

Мы конечно сделали, чтобы кнопка нажималась сама при смене адреса, но это срабатывало не всегда, а иногда срабатывала не тогда, когда требовалось. При этом было проблематично определить когда пользователь действительно закончил ввод адреса, ведь форма КЛАДР состоит из 3-х полей: Улица, Дом, Квартира. Не у всех адресов есть последний реквизит, поэтому вызов формы повесили на событие onchange номера дома. Надо сказать, неожиданно всплывающая при этом форма расчёта, немало удивляла, не закончивших вводить адрес, покупателей.

$('#ORDER_PROP_25').on('change', function(){
	$(".DP_search_form input[type=text]").val( $(this).val() );
});

В общем, работало это плохо, а клиент хотел видеть действительно удобную форму.

Попытка №2

Была выработана новая идея — считать доставку по карте на сервере, без показа карты на странице оформления. Решение почти идеальное. Почти.
Непродолжительное копание в коде модуля расчёта, а затем в поисковике, показало, что никаких обращений к API Яндекса для расчёта расстояний нет, и самого этого API (по крайней мере в свободном доступе) нет.
То есть, расстояние от МКАД определяется Яндексом при открытии всплывающего окна на странице оформления заказа, затем модуль рассчитывает стоимость и выводит его покупателю. Выходит, без окна Яндекс.Карт на странице заказа не обойтись.
До реализации идея так и не дошла.

Попытка №3. Удачная

В нашем распоряжении имеется валидный адрес в формате КЛАДР, введённый пользователем. Мы можем рассчитывать стоимость доставки в фоновом режиме автоматически. При этом, избавляемся от дублирующихся полей, от лишних кнопок и действий пользователя.

Раз уж без Яндекс.Карт никак, окно с картой скроем в невидимом контейнере.

<div class="sebekon" style="display: none;">

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

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

Заключение

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