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

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

Информационный виджет расчета доставки с ручным вводом города получателя, веса и габаритов.
Удобно использовать если вам не нужна связь с конкретными товарами и корзиной сайта

Этот виджет удобно использовать если вы хотите разместить на сайте простой информационный калькулятор доставки без связи с конкретными товарами и корзиной сайта.

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

Список возможных городов отправителей при необходимости можно ограничить в личном кабинете, как сделано на этой странице.

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

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

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

  • Вес, габариты и цена товаров указываются пользователем вручную

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

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

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

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

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

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

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

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

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

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

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

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

Вес по умолчанию, в кг

Данный параметр может быть переопределён параметром data-offers
data-title

Изменяет заголовок окна виджета на указанный.

Пример: data-title="Узнать стоимость доставки"

data-from

Изменение города-отправителя.

В качестве значения используется ФИАС-код или название населённого пункта.
Лучше всего использовать именно ФИАС-код, т.к. населённых пунктов с одинаковым навзанием бывает несколько.
ФИАС-код можно узнать на сайте Федеральной Адресной Системы: https://fias.nalog.ru/ExtendedSearch.

Примеры (изменит город-отправитель на «Тверь»):
data-from="c52ea942-555e-45c6-9751-58897717b02f" , data-from="Тверь"

data-lazy-load

Управление автозагрузкой виджета.

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

Пример:

‹script›
const widget = document.getElementById('eShopLogisticWidgetForm'),
        button = document.getElementById('runWidget')
button.addEventListener('click', event => {
	widget.dispatchEvent(new CustomEvent('eShopLogisticWidgetForm:loadApp'))
})
‹/script›
data-ip

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

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

‹?php echo $_SERVER['REMOTE_ADDR']; ?›
data-price

Стоимость товара по умолчанию
Используется для расчёта стоимости доставки с учётом страховки или применения корректирующих правил

data-dimensions

Габариты по умолчанию, формат Д*Ш*В в сантиметрах

Например: data-dimensions="25*15*10"

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

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

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

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

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

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

Для установки виджета на сайт необходимо вставить в код страницы контейнер для виджета и подключить js-скрипт:

<div id="eShopLogisticWidgetForm" data-lazy-load="false" class="eshoplogistic-widget-calculate" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/form/app.js"></script>
Параметр data-key должен содержать ключ виджета, указанный в настройках виджета в личном кабинете: Подключение виджета расчёта доставки

Доступно две функции обратного вызова:

  • eShopLogisticWidgetForm:onLoadApp - вызывается при загрузке виджета;
  • eShopLogisticWidgetForm:onClickSubmit - вызывается по клику на кнопке «Рассчитать»

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

‹script›
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetForm');

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

        root.addEventListener('eShopLogisticWidgetForm:onClickSubmit', (event) => {
            console.log('Событие клика по кнопке "Рассчитать"', event.detail)
        })
    })
‹/script›