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

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

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

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

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

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

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

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

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

  • Возможность зафиксировать города отправки

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

  • Оформление заказа прямо в виджете

    В настройках есть возможность разрешить/запретить оформление заказа. Если оформление включено, то заказ с выбранными параметрами доставки отправится вам на электронную почту, в МойСклад или на URL (скрипт, который загрузит заказ куда вам нужно, например в CRM). Также заказы будут сохранены в нашем кабинете в специальном разделе. На этой странице оформление включено.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Выполните подключение виджета к сайту по документации ниже.

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


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

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

Параметр Описание
data-key Ключ виджета. Указан в настройках виджета на вкладке «Подключение на сайте».
data-offers

JSON-строка с данными мест по умолчанию.

Вы можете добавить в виджет сразу несколько грузовых мест. Например, содержимое корзины посетителя (если у вас уже используется штатная корзина), набор связанных товаров.

Важно! Обязательные элементы:
article - артикул или идентификатор товара на сайте name - название товара, count - количество, price - стоимость единицы товара, weight - вес единицы товара, кг

Дополнительно можно (и желательно) указать габариты единицы товара:
dimensions - формат Д*Ш*В в сантиметрах.

Пример:

data-offers='[
    { "article":91,"name":"Радиотелефон DECT","count":1.5,"price":304,"weight":1,"dimensions":"25*15*10" },
    { "article":98,"name":"Кроссовки Puma","count":2,"price":5304,"weight":2.3,"dimensions":"15*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-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)
    })

    // ...
</script>

Методы

  • 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

Добавьте к ключу виджет типа Расчет доставки с формой указания веса и габаритов.

Выбор виджета
3

Настройте параметры и функционал виджета по документации.

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

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

Ключ виджета
5

Общий порядок действий для подключения сервиса eShopLogistic на ваш сайт или в МойСклад описан здесь. Подключайтесь по документации и используйте все возможности интеграции со службами доставки для вашего бизнеса.

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>