Виджет расчета доставки по маршруту: от расстояния или времени

Предназначен для расчета доставки своими курьерами, в зависимости от количества километров или часов в пути

Демонстрация работы виджета расчета доставки

Выберите город доставки

Основные возможности виджета

  • Рассчитывает стоимость доставки вашим курьером до адреса клиента по настроенным тарифам в зависимости от расстояния, времени в пути, веса, габаритов и стоимости товара
  • Показывает на карте маршрут следования, расстояние и время в пути в зависимости от вашего типа доставки (пеший курьер, автомобильный или общественный транспорт)
  • Гибкие правила коррекции стоимости и срока доставки в зависимости от ваших задач
  • Возможность создать разные зоны доставки если у вас несколько разных складов отгрузки

    На этой странице выбор зоны реализован через выбор города. Аналогично можно создать несколько зон внутри одного города.

  • Возможность фиксации адреса отправления адресом вашего склада

    На этой странице для Москвы адрес склада отгрузки зафиксирован, а для Санкт-Петербурга нет (на случай если вам это не нужно)

  • Возможность задать ограничение зоны доставки рамками на карте, а так же превышением расстояния и времени в пути
  • Оформление заказа прямо в виджете

    В настройках есть возможность разрешить/запретить оформление заказа. Если оформление включено, то виджет отправит заказ с выбранными параметрами доставки вам на электронную почту или в CRM/CMS

  • Кастомизация под стиль сайта через css

    Настроить внешний вид можно с помощью css под дизайн конкретного сайта (цвета, шрифт, форма и расположение блоков)

  • Простая настройка и установка на любую страницу сайта

    Этот виджет вы можете встроить в любой сайт, подключить к любой CMS, разрешающей использование внешних скриптов. Для этого достаточно разместить код виджета в нужное место на сайте.


Настройка и установка виджета расчёта доставки по маршруту

Порядок подключения:

1. Зарегистрируйтесь в личном кабинете: my.eshoplogistic.ru

2. Создайте ключ доступа и добавьте нужные транспортные компании

3. Ознакомьтесь с инструкцией по настройке направлений доставки

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

Помимо параметров настройки виджета в личном кабинете, некоторые настройки можно применять прямо при установке виджета.
Это позволяет переопределять указанные в личном кабинете базовые настройки (например, в зависимости от каких-то условий на сайте).

Обязательным параметром, который должен быть указан и не может быть изменён, является ключ виджета - data-key.

Параметр Описание
data-key Ключ доступа
data-lazy-load

Установите значение data-lazy-load="true" для того, чтобы вместо автоматического запуска, виджет загружается по событию.

Пример:

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('pills-product-2-tab').addEventListener('click', event => {
        document.getElementById('eShopLogisticWidgetDistance').dispatchEvent(
            new CustomEvent('eShopLogisticWidgetDistance:loadApp')
        )
    })
})
</script>
data-zone

Если у вас настроено несколько направлений доставки, можно при запуске виджета определить нужное направление.

На вкладке «Установка и примеры» приведён пример переключения направлений доставки - так , как это реализовано на данной странице выше.

data-offers

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

JSON-строка с данными груза.

Состоит из элементов:
count - количество, price - стоимость груза, weight - вес единицы товара, кг dimensions - формат Д*Ш*В в сантиметрах.

Пример:

data-offers='[{ "count":1.5,"price":1500,"weight":15,"dimensions":"25*50*60" }]'
data-user

JSON-строка с данными пользователя.

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

Доступные элементы:
name - имя пользователя на сайте; phone - телефон; email - электронная почта.

Пример:

data-user='{ "name": "Иванов Иван Иванович", "email": "test@mail.ru", "phone": "+79100000000"}'

Параметры, отмеченные , - обязательны.

Доступно 10 функций обратного вызова для каждого ключевого события или ошибки:

  • onClickCalculate - Событие клика по кнопке «Рассчитать»;
  • onGetRoute - получение маршрута;
  • onCalculatedRoute - стоимость доставки рассчитана;
  • onClickToOrder - клик по кнопке «Заказать».
  • onClickSubmitOrder - клик по кнопке отправки заказа («Отправить»);
  • onSendedOrder - успешная отправка заказа;
  • onErrorSendOrder - произошла ошибка отправки заказа;
  • onErrorArea - ошибка при построении маршрута (ограничение зоны доставки);
  • onErrorDistance - ошибка при построении маршрута (расстояние не определено);
  • onErrorDuration - ошибка при построении маршрута (продолжительность не определена);
  • onErrorCalculateRoute - ошибка при клике на кнопку «Рассчитать»;

Пример использования:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('eShopLogisticWidgetDistance');
    if(root) {
        root.addEventListener('eShopLogisticWidgetBlock:onGetRoute', (event) => {
            console.log('Событие onGetRoute', event.detail)
        })
    }
})

1. Добавьте ключ доступа. Далее к данному ключу можно добавлять любое количество любых виджетов.

Подключение виджета расчёта доставки

2. Выберите тип виджета «Виджет расчета доставки по расстоянию». После добавления виджета автоматически произойдёт переход к его настройке.

Подключение виджета расчёта доставки

Помимо стандартных настроек, обязательными являются:

  • Зона (напраление) доставки - направление, которое будет загружено в виджете по умолчанию;
  • Ключ Yandex.Карты Геокодер и Ключ Yandex.Карты Геосаджест
    Для построения маршрута на карте зарегистрируйте ключи API по ссылке: https://developer.tech.yandex.ru/services.
    Потребуется подключить 2 API: JavaScript API и HTTP Геокодер и API Геосаджеста. Можно выбрать бесплатный тариф с лимитом запросов.
Подключение виджета расчёта доставки

Подробно о настройке общих параметров виджета смотрите в руководстве.

1. Добавить блок виджета:

<div id="eShopLogisticWidgetDistance" data-lazy-load="false" data-key="000000-00-00"></div>

2. Настроить событие запуска виджета (при data-lazy-load="true"):

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('ваш_элемент').addEventListener('click', event => {
            document.getElementById('eShopLogisticWidgetDistance').dispatchEvent(new CustomEvent('eShopLogisticWidgetDistance:loadApp'))
        })
    })
</script>

3. Подключить виджет:

<script src="https://api.esplc.ru/widgets/distance/app.js"></script>

Примеры


Переключение направлений доставки

<!-- Добавим выбор направлений доставки -->
<select id="distanceZone">
    <option value="66338eee42e2b">Москва</option>
    <option value="663391e181dc6">Санкт-Петербург</option>
</select>
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('distanceZone').addEventListener('change', event => {
        document.getElementById('eShopLogisticWidgetDistance').dispatchEvent(new CustomEvent('eShopLogisticWidgetDistance:updateParamsRequest', {
            detail: {
                requestParams: {
                    zone: event.target.value
                }
            }
        }))
    })
})
</script>