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

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

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

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

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

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

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

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

  • Онлайн оплата

    В настройках есть возможность разрешить онлайн оплату через одну из подключенных к нам платёжных систем. Таким образом выбрав тип оплаты «Картой на сайте» клиент сможет оплатить заказ прямо в виджете. Разрешенные типы оплат и их названия настраиваются в личном кабинете.
    На данный момент доступна оплата через ЮKassa, Альфа-банк и PayKeeper, Точка. Другие платежные сервисы и банки добавим по запросу.

  • Возможность через правила настроить коррекцию стоимости и срока в зависимости от типа оплаты

    На этой странице для примера при выборе Boxberry с оплатой Наличными при получении добавляется 100% наценка к стоимости доставки. Так же коррекцию стоимости и сроков можно настроить в зависимости от любых других параметров заказа.

  • Выбор тарифа

    Если у транспортной компании есть разные тарифы, то в настройках виджета вы можете разрешить выбор тарифа для пользователей. На этой странице включен выбор тарифа для Сдэк и Почты России.

  • Выбор дополнительных услуг

    Если у транспортной компании есть дополнительные услуги, такие как обрешетка, страховка, подъем на этаж и т.п., в настройках виджета вы можете разрешить выбор дополнительных услуг, изменить их названия и вывести ваш комментарий, а также включить нужные вам по умолчанию. На этой странице выбор дополнительных услуг разрешен для Сдэк и Деловых Линий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data-lazy-load

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

Пример:

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

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

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

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

Пример:

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

Если в настройках виджета в нашем личном кабинете Вы настроили отправку заказа, но на определённой странице не хотите разрешать отправку заказа, установите значение data-order="false" .
В таком случае виджет позволит рассчитать доставку, показать ПВЗ на карте, но не будет функции "Отправить заказ".

Удобно при использовании виджета при встраивании в панель управления CMS или иных сервисов, а также для вывода виджета на информационных страницах без привязки к товарам, например «Доставка».
data-terminal-delivery-default

Выбрать указанную транспортную компанию по умолчанию для варианта «курьер».

По умолчанию виджет выбирает самый дешёвый вариант.
Если вы хотите, чтобы конкретная транспортная компания была выбрана не зависимо от стоимости, укажите её код в данном параметре. Например:
data-terminal-delivery-default="sdek"
data-door-delivery-default

Выбрать указанную транспортную компанию по умолчанию для варианта «самовывоз».

По умолчанию виджет выбирает самый дешёвый вариант.
Если вы хотите, чтобы конкретная транспортная компания была выбрана не зависимо от стоимости, укажите её код в данном параметре. Например:
data-door-delivery-default="sdek"
data-controller

Если вы хотите, чтобы запросы от виджета шли не напрямую к нашему серверу, а через какой-то контроллер, укажите URL в этом атрибуте.

Актуально для логгирования или отладки.

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

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

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

  • onLoadApp - инициализация виджета;
  • onSelectedSettlement - выбор населённого пункта;
  • onSelectedService - выбор варианта доставки;
  • onAllServicesLoaded - получение всех доступных вариантов доставки;
  • onSelectTypeDelivery - выбор типа доставки;
  • onSelectedPayment - выбор варианта оплаты;
  • onClickCalculate - клик по кнопке расчёта доставки;
  • onClickSubmitOrder - клик по кнопке отправки заказа;
  • onAcceptAddress - выбор адреса доставки;
  • onSendedOrder - успешная отправка заказа;
  • onErrorSendOrder - ошибка отправки заказа;
  • onNotAvailableServices - не получено ни одного варианта доставки;
  • onChangeAdditionalService - при выборе дополнительных услуг.

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

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

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

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

    // ...
})

Методы

  • eShopLogisticWidgetForm:updateParamsRequest - обновление параметров виджета.

Важный нюанс: «под капотом» виджет использует общий для всех виджетов объект offers, поэтому для обновления параметров веса, цены и габаритов необходимо обновлять именно его; пример ниже.

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

‹script›
    // изменим габариты при изменении веса и перезапустим расчёт доставки
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetForm'),
            price = document.getElementsByClassName('eshoplogistic-theme-input-price'),
            length = document.getElementsByClassName('eshoplogistic-theme-input-length'),
            width = document.getElementsByClassName('eshoplogistic-theme-input-width'),
            height = document.getElementsByClassName('eshoplogistic-theme-input-height')


        document.addEventListener('input', (event) => {
            if(event.target.classList.contains('eshoplogistic-theme-input-weight')) {
                length[0].value = 50
                width[0].value = 50
                height[0].value = 50

                root.dispatchEvent(
                    new CustomEvent('eShopLogisticWidgetForm:updateParamsRequest', {
                        detail: {
                            requestParams: {
                                offers: JSON.stringify([{
                                    "count": 1,
                                    "price": price[0].value,
                                    "weight": event.target.value,
                                    "dimensions": "50x50x50"
                                }])
                            }
                        }
                    })
                )
            }
        })
    })
‹/script›

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

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

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

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

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

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

<div id="eShopLogisticWidgetFormOrder"
    data-key="000000-0-0"
    data-lazy-load="false"
    data-dimensions="25*15*10"
    data-price="1500"
    data-weight="1">
</div>

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

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

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

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