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

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

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

Представлен макет карточки товара; виджет встроен во вкладку «Доставка» и запускается при переключении на эту вкладку.

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


Настройка и установка виджета

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

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

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

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

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

Обязательным параметром, который должен быть указан и не может быть изменён, является ключ виджета - 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 - клик по ПВЗ на карте;

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

<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)
    })
})

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>