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

Виджет расчёта стоимости доставки для карточки товара, встраиваемый в страницу

Виджет встраивается в нужное место на странице сайта, например в карточку товара во вкладку «Доставка».
  • Расчёт доставки по нескольким транспортным компаниям

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

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

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

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

    Выберите одну из платёжных систем и при выборе варианта оплаты «Картой на сайте» - клиент сможет оплатить заказ прямо в виджете.

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

    Этот виджет вы можете встроить в любой сайт, подключить к любой CMS.
    Настроить внешний вид можно с помощью css под конкретный сайт. Можно настроить запуск виджета на любую кнопку или, например, на клик по вкладке «Доставка».

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

Представлен макет карточки товара; виджет встроен во вкладку «Доставка» и запускается при переключении на эту вкладку.

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

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

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

Для расчёта стоимости и срока доставки перейдите на вкладку «Доставка»

Описание товара

АМОРТИЗАЦИЯ

Подошва из ЭВА обладает хорошими амортизирующими свойствами и снижает нагрузку на позвоночник.

НАДЕЖНАЯ ФИКСАЦИЯ

Кроссовки удобно фиксируются на ноге при помощи шнуровки.

...

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

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

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

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

Параметр Описание
data-key Ключ доступа
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-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('eShopLogisticWidgetBlock');

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

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

    // ...
})

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

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

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

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

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

‹div id="eShopLogisticWidgetBlock"
    data-lazy-load="true"
    data-key="199226-6-14"
    data-offers='[{ "article":91,"name":"Радиотелефон DECT Siemens","count":1,"price":304,"weight":1 }]'›
‹/div›

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

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

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

‹script src="https://api.esplc.ru/widgets/block/app.js"›‹/script›

Примеры

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

‹script>
    // Элемент с id="changeDispatch" это элемент, при клике на котором мы хотим изменить город-отправитель (в данном примере на Екатеринбург)
    // Также для примера изменим offers
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('changeDispatch').addEventListener('click', event => {
            event.preventDefault()
            document.getElementById('eShopLogisticWidgetBlock').dispatchEvent(new CustomEvent('eShopLogisticWidgetBlock:updateParamsRequest', {
                detail: {
                    requestParams: {
                        // изменить город отправитель
                        from: '7b6de6a5-86d0-4735-b11a-499081111af8',
                        // изменить состав отправления (например, количество товара или добавить товары)
                        offers: [{ "article":91,"name":"Радиотелефон DECT Siemens","count":2,"price":304,"weight":1 }]
                    }
                }
            }))
        })
    })
‹/script›

Изменение количества товара

‹script>
    // Элемент с id="productCounter" это input для ввода количества товара.
    // При изменении количества - сообщаем об этом виджету для пересчёта доставки
    document.addEventListener('DOMContentLoaded', () => {

        const root = document.getElementById('eShopLogisticWidgetBlock')
        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.dispatchEvent(new CustomEvent('eShopLogisticWidgetBlock:updateParamsRequest', {
                    detail: {
                        requestParams: {
                            offers: JSON.stringify(offers)
                        }
                    }
                }))
            }
        })
    })
‹/script›