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

Виджет расчета доставки для карточки товара, во всплывающем окне

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

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

Пример фото товара

Купить кроссовки с доставкой

Цена: 6 500 рублей

Для запуска виджета кликнете по кнопке «Быстрый заказ с доставкой».
Название кнопки задается на сайте и может быть любым.

По умолчанию город-отправитель используется тот, который указан в настройках соответствующего ключа (в данном случае - Москва), но его можно изменить при необходимости через атрибут data-from.
Например для определенного бренда подставлять в город-отправитель Екатеринбург.

Виджет реагирует на изменение количества товара в форме.

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

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

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

  • Учет веса, габаритов и цены товаров при расчете доставки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data-offers

JSON-строка с данными набора товаров.

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

Важно! Обязательные элементы:
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-user

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

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

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

Пример:

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

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

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

<?php echo $_SERVER['REMOTE_ADDR']; ?>
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 - выбор населённого пункта;
  • onAllServicesLoaded - получение всех доступных вариантов доставки;
  • onSelectTypeDelivery - выбор типа доставки;
  • onSelectedPayment - выбор варианта оплаты;
  • onSelectedService - выбор варианта доставки;
  • onClickSubmit - клик по кнопке отправки заказа;
  • onAcceptAddress - выбор адреса доставки;
  • onSendedOrder - успешная отправка заказа;
  • onErrorSendOrder - ошибка отправки заказа;
  • onNotAvailableServices - не получено ни одного варианта доставки.

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

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

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

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

        // ...
    })
</script>

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

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

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

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

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

1. Добавить в нужное место на странице элемент запуска виджета.
Обязательный атрибут: data-esl-widget:

<button data-esl-widget data-title="Быстрый заказ с доставкой">Быстрый заказ с доставкой</button>

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

<div id="eShopLogisticWidgetModal"
    data-lazy-load="true"
    data-key="000000-0-0"
    data-offers='[{ "article":91,"name":"Радиотелефон DECT Siemens","count":1,"price":304,"weight":1 }]'>
</div>

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

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

Виджет запускается с теми data-атрибутами (элемента с идентификатором "eShopLogisticWidgetModal"), которые указаны в момент клика по элементу запуска. Т.е. все data-атрибуты можно менять и при новом запуске виджета он примет новые параметры.

Примеры

1. Изменение параметров запуска виджета через data-атрибуты элемента запуска виджета

Например, нужно изменить какой-то параметр (или все сразу: заголовок окна виджета, город отправления, состав заказа) при клике на кнопку.
Добавим кнопку в data-атрибутом data-esl-widget и нужными параметрами; при клике на неё виджет запустится с указанными параметрами:

<button data-esl-widget
    data-title="Быстрый заказ с доставкой"
    data-from="7b6de6a5-86d0-4735-b11a-499081111af8"
    data-offers="[{ "article":91,"name":"Радиотелефон DECT Siemens","count":2,"price":304,"weight":1 }]">
     Запустить виджет
</button>

2. Изменение параметров запуска виджета через изменение data-атрибутов корневого элемента виджета

Корневой элемент, это элемент с с идентификатором "eShopLogisticWidgetModal". Вы можете установить для него нужные парметры через dataset и виджет запустится с указанными параметрами. Например, изменим количество товара:

<script>

document.addEventListener('DOMContentLoaded', () => {

const root = document.getElementById('eShopLogisticWidgetModal')
let offers = JSON.parse(root.dataset.offers)

document.getElementById('productCounter').addEventListener('change', event => {
    if(typeof offers[0] === 'object') {
        offers[0].count = event.target.value
        root.dataset.offers = JSON.stringify(offers)
    }
})

})
</script>