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

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

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

СДЭК, Почта, DPD, Boxberry, Яндекс доставка, Деловые Линии, ПЭК, КИТ, Байкал Сервис, ЖелдорЭкспедиция, Возовоз, Энергия, 5post, Grastin, Logsis и др.
  • Расчёт доставки по нескольким транспортным компаниям

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

  • Заказ в 1 клик

    Виджет может отправить заказ с выбранными параметрами доставки на электронную почту или в CRM/CMS

  • Оплата заказа

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

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

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

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

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

Настроить внешний вид можно посредством CSS под дизайн вашего сайта.

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

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

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

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

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

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

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

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

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

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

Данный параметр может быть переопределён параметром data-offers
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 - не получено ни одного варианта доставки.

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

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

    // ...
})

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>