Виджет расчета доставки по маршруту внутри зоны

Демонстрация работы

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

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

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

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

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

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

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

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

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

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

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

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

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

• Функции обратного вызова для гибкой встройки в сайт

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

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

1. Создайте и настройте аккаунт в сервисе eShopLogistic. Порядок действий описан здесь.

2. Выполните подключение виджета к сайту по документации ниже.

Если что-то не получается - напишите нам через Telegram или в раздел «Поддержка» в нашем кабинете, мы обязательно поможем!

• Установка и примеры

• Параметры

• Функции обратного вызова

• Настройка в личном кабинете

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

Обязательным параметром, который должен быть указан и не может быть изменён, является ключ виджета - 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('eShopLogisticWidgetDistance:onGetRoute', (event) => {
            console.log('Событие onGetRoute', event.detail)
        })
    }
</script>

1

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

---

2

Добавьте к ключу виджет типа Виджет расчета доставки по расстоянию.

---

3

Настройте параметры и функционал виджета по документации.

---

4

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

---

5

Общий порядок действий для подключения сервиса eShopLogistic на ваш сайт или в МойСклад описан здесь. Подключайтесь по документации и используйте все возможности интеграции со службами доставки для вашего бизнеса.

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>