Представлен макет карточки товара; виджет встроен во вкладку «Доставка» и запускается при переключении на эту вкладку.
Купить кроссовки с доставкой
Цена: 6 500 рублей
Для расчёта стоимости и срока доставки перейдите на вкладку «Доставка»
Виджет реагирует на изменение количества товара в форме.
Описание товара
АМОРТИЗАЦИЯ
Подошва из ЭВА обладает хорошими амортизирующими свойствами и снижает нагрузку на позвоночник.
НАДЕЖНАЯ ФИКСАЦИЯ
Кроссовки удобно фиксируются на ноге при помощи шнуровки.
...
Вы можете подобрать наиболее удобный для вас вариант доставки и сразу оформить заказ с доставкой
Выберите в настройках используемые вами службы доставки, и они автоматически появятся в виджете.
В настройках есть возможность разрешить/запретить оформление заказа. Если оформление включено, то виджет отправит заказ с выбранными параметрами доставки вам на электронную почту или в CRM/CMS
В настройках есть возможность разрешить онлайн оплату через одну из подключенных к нам платёжных систем.
Таким образом выбрав тип оплаты «Картой на сайте» клиент сможет оплатить заказ прямо в виджете.
Разрешенные типы оплат и их названия настраиваются в личном кабинете.
На данный момент доступна оплата через ЮKassa,
Альфа-банк и
PayKeeper,
Точка.
Другие платежные сервисы и банки добавим по запросу.
Настроить внешний вид можно с помощью css под дизайн конкретного сайта (цвета, шрифт, форма и расположение блоков)
Этот виджет вы можете встроить в любой сайт, подключить к любой CMS, разрешающей использование внешних скриптов. Для этого достаточно разместить код виджета в нужное место на сайте. Можно настроить запуск виджета на любую кнопку или, например, на клик по вкладке «Доставка»
Порядок подключения:
1. Зарегистрируйтесь в личном кабинете: my.eshoplogistic.ru
2. Создайте ключ доступа и добавьте нужные транспортные компании
3. Для установки виджета воспользуйтесь инструкцией, указанной на вкладке «Установка и примеры»
Помимо параметров настройки виджета в личном кабинете, некоторые настройки можно применять прямо при установке виджета.
Это позволяет переопределять указанные в личном кабинете базовые настройки (например, в зависимости от каких-то условий на сайте).
Обязательным параметром, который должен быть указан и не может быть изменён, является ключ виджета - data-key
.
Параметр | Описание |
---|---|
data-key | Ключ доступа |
data-lazy-load |
Установите значение Пример:
|
data-from |
Изменение города-отправителя. В качестве значения используется ФИАС-код или название населённого пункта. Примеры (изменит город-отправитель на «Тверь»): |
data-offers |
JSON-строка с данными набора товаров. По клику на кнопке, вместо 1 товара вы можете добавить в виджет сразу несколько. Например, содержимое корзины посетителя (если у вас уже используется штатная корзина) или набор связанных товаров. Важно! Обязательные элементы: Дополнительно можно (и желательно) указать габариты единицы товара: Пример:
|
data-user |
JSON-строка с данными пользователя. Если на сайте авторизованный пользователь, то можно вывести его данные в виджет при оформлении заказа (просто чтобы пользователю не нужно было заполнять их). Доступные элементы: Пример:
|
data-ip |
IP-адрес посетителя для автоматического определения города. Может быть получен средствами CMS или напрямую, например посредством php:
|
data-order |
Если в настройках виджета в нашем личном кабинете Вы настроили отправку заказа,
но на определённой странице не хотите разрешать отправку заказа, установите значение Удобно при использовании виджета при встраивании в панель управления CMS или иных сервисов, а также для вывода виджета на информационных страницах без привязки к товарам, например «Доставка». |
data-terminal-delivery-default |
Выбрать указанную транспортную компанию по умолчанию для варианта «курьер». По умолчанию виджет выбирает самый дешёвый вариант. |
data-door-delivery-default |
Выбрать указанную транспортную компанию по умолчанию для варианта «самовывоз». По умолчанию виджет выбирает самый дешёвый вариант. |
data-controller |
Если вы хотите, чтобы запросы от виджета шли не напрямую к нашему серверу, а через какой-то контроллер, укажите URL в этом атрибуте. Актуально для логгирования или отладки. |
Параметры, отмеченные , - обязательны.
Доступно 10 функций обратного вызова для каждого ключевого события или ошибки:
Пример использования:
<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>