Вход   Регистрация

Виджет ПВЗ на карте

Отображение ПВЗ всех нужных вам транспортных компаний на одной карте

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

Виджет встраивается в любое место на сайте.

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

  • Показывает сразу все варианты доставки нужными вам транспортными компаниями:
    Яндекс Доставка, СДЭК, Почта России, DPD, Деловые Линии, ПЭК, Dostavista, КИТ, Байкал Сервис, Желдорэкспедиция, Возовоз, Энергия, 5POST, Магнит Пост, Постаматы «Халва Экспресс», Grastin, Logsis

    Выберите нужные транспортные компании - они автоматически появятся в виджете.

  • Фильтрация пунктов самовывоза по нужной транспортной компании

    Можно выбрать отображение ПВЗ только для одной транспортной компании

  • Показывает информацию о пунктах самовывоза

    При выборе ПВЗ на карте можно узнать код ПВЗ, описание, контакты и время работы

  • Кнопка выбора ПВЗ под задачу

    Отображение кнопки включается/выключается в настройках. На этой странице включена.

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

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

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

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

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


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

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

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

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

Пример:

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('widget_button').addEventListener('click', event => {
        document.getElementById('eShopLogisticWidgetTerminals').dispatchEvent(
            new CustomEvent('eShopLogisticWidgetTerminals:loadApp')
        )
    })
})
</script>
data-ip

IP-адрес посетителя для автоматического определения города.

Может быть получен средствами CMS или напрямую, например посредством php:

<?php echo $_SERVER['REMOTE_ADDR']; ?>

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

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

  • onSelectedSettlement - выбор населённого пункта;
  • onSelectServiceInFilter - выбор ТК в фильтре;
  • onBalloonOpen - клик по ПВЗ на карте;
  • onSelectedService - клик по кнопке выбора ПВЗ;
  • onNotAvailableSettlements - не найдено ни одного населённого пункта
  • onNotAvailableTerminals - для выбранного населённого пункта не найдено ни одного ПВЗ

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

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetTerminals');

        root.addEventListener('eShopLogisticWidgetTerminals:onSelectedSettlement', (event) => {
            console.log('Событие onSelectedSettlement', event.detail)
        });

        root.addEventListener('eShopLogisticWidgetTerminals:onSelectServiceInFilter', (event) => {
            console.log('Событие onSelectServiceInFilter', event.detail)
        })

        root.addEventListener('eShopLogisticWidgetTerminals:onBalloonOpen', (event) => {
            console.log('Событие onBalloonOpen', event.detail)
        })
        root.addEventListener('eShopLogisticWidgetTerminals:onSelectedService', (event) => {
            console.log('Событие onSelectedService', event.detail)
        })
    })
    </script>

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

Подключение виджета пунктов самовывоза

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

Подключение виджета пунктов самовывоза

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

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

<div id="eShopLogisticWidgetTerminals" data-lazy-load="false" data-key="XXXXXX-X-XX"></div>

2. настроить событие запуска виджета: 

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('ваш_элемент').addEventListener('click', event => {
            document.getElementById('eShopLogisticWidgetTerminals').dispatchEvent(new CustomEvent('eShopLogisticWidgetTerminals:loadApp'))
        })
    })
</script>
или, загрузка по готовности страницы: 
<script>
 document.addEventListener('DOMContentLoaded', () => {
    const rootId = document.getElementById('eShopLogisticWidgetTerminals');
    rootId.dispatchEvent(new CustomEvent('eShopLogisticWidgetTerminals:loadApp'))
})
 </script>

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

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