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

Виджет расчета доставки в странице

Встраивается в нужное место на странице сайта, например в карточку товара во вкладку 'Доставка'.

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

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

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

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

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

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

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

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

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

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

Описание
Доставка

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

АМОРТИЗАЦИЯ

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

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

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

...

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

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

Показывает сразу все варианты доставки нужными вам транспортными компаниями:
Яндекс Доставка, СДЭК, Почта России, DPD, Деловые Линии, ПЭК, Dostavista, КИТ, Байкал Сервис, Желдорэкспедиция, Возовоз, Энергия, 5POST, Магнит Пост, Постаматы «Халва Экспресс», Grastin, Logsis
Выберите в настройках используемые вами службы доставки, и они автоматически появятся в виджете.
Учет веса, габаритов и цены товаров при расчете доставки
Источником данных весо-габаритных характеристик может быть ваш сайт или настройки в нашем кабинете.
В зависимости от ваших задач возможно передавать на расчет доставки как по логике один товар = одно грузоместо, так и вся корзина = одно грузоместо.
Оформление заказа прямо в виджете
В настройках есть возможность разрешить/запретить оформление заказа. Если оформление включено, то заказ с выбранными параметрами доставки отправится вам на электронную почту, в МойСклад или на URL (скрипт, который загрузит заказ куда вам нужно, например в CRM). Также заказы будут сохранены в нашем кабинете в специальном разделе. На этой странице оформление включено.
Онлайн оплата
В настройках есть возможность разрешить онлайн оплату через одну из подключенных к нам платёжных систем. Таким образом выбрав тип оплаты «Картой на сайте» клиент сможет оплатить заказ прямо в виджете. Разрешенные типы оплат и их названия настраиваются в личном кабинете.
На данный момент доступна оплата через ЮKassa, Альфа-банк, PayKeeper, Т-банк и Точка банк. Другие платежные сервисы и банки добавим по запросу.
По факту оплаты заказа изменится статус его оплаты в в нашем кабинете, и вам будет отправлено email уведомление что заказ оплачен.
Возможность через правила настроить коррекцию стоимости и срока
На этой странице для примера при выборе DPD с оплатой Наличными при получении добавляется 100% наценка к стоимости доставки. Так же через правила можно сделать коррекцию в зависимости от любых других параметров заказа.
Выбор тарифа
Если у транспортной компании есть разные тарифы, то в настройках виджета вы можете разрешить выбор тарифа для пользователей. На этой странице включен выбор тарифа для Сдэк и Почты России.
Выбор дополнительных услуг
Если у транспортной компании есть дополнительные услуги, такие как обрешетка, страховка, подъем на этаж и т.п., в настройках виджета вы можете применять их по умолчанию при каждом расчете доставки или разрешить выбор дополнительных услуг прямо в виджете, изменить их названия и вывести ваш комментарий. На этой странице выбор дополнительных услуг разрешен для Сдэк и Деловых Линий.
Кастомизация под стиль сайта через css
Настроить внешний вид можно с помощью css под дизайн конкретного сайта (цвета, шрифт, форма и расположение блоков)
Простая настройка и установка на любую страницу сайта
Этот виджет вы можете встроить в любой сайт, подключить к любой CMS, разрешающей использование внешних скриптов. Для этого достаточно разместить код виджета в нужное место на сайте. Можно настроить запуск виджета на любую кнопку или, например, на клик по вкладке «Доставка»
Функции обратного вызова для гибкой встройки в сайт
Доступные события смотрите ниже в блоке Подключение и настройка.

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

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

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

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

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

Обязательным параметром, который должен быть указан и не может быть изменён, является ключ виджета - 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":"251510" }, { "article":98,"name":"Кроссовки Puma","count":2,"price":5304,"weight":2.3,"dimensions":"151510" } ]'`
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-target	Строка с названием города или ФИАС-кодом. Автоматически подставляется в поле поиска города и данный город выбирается для расчёта. Работает, если не указан `data-ip`. Например: data-target="c52ea942-555e-45c6-9751-58897717b02f" , data-target="Тверь"
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 - выбор варианта доставки;
onBalloonOpen - открытие балуна метки на карте (можно использовать аналогично onSelectedService + выбранный ПВЗ)
onChangeAdditionalService - выбор дополнительных услуг;
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)
    })

    // ...
})
</script>

После регистрации на нашей платформе добавьте ключ доступа и нужные вам службы доставки.

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

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

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

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

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>

Виджет расчета доставки в странице

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

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

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

Установка и примеры

Параметры

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

Настройка в личном кабинете