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

Виджеты расчета доставки для сайтов на Tilda

Расчет доставки в корзине и карточке товара для сайтов на Tilda. Демо-сайт. Инструкция подключения. Техподдержка.

СДЭК, Почта, DPD, Boxberry, Яндекс доставка, Деловые Линии, ПЭК, КИТ, Байкал Сервис, ЖелдорЭкспедиция, Возовоз, Энергия, 5post, Grastin, Logsis и др.

Основные возможности виджетов расчёта доставки для Tilda

  • Расчет стоимости доставки по всем нужным вам службам доставки
  • Вывод пунктов самовывоза / постаматов для всех транспортных компаний на одной карте
  • Возможность оформления и онлайн оплаты заказа, с получением заявки на электронную почту или в вашу систему ведения заказов
  • Собственная корзина с расчётом доставки и онлайн оплатой заказов, работающая без включения функционала корзины Tilda

Демонстрационный сайт: eshoplogistic.tilda.ws

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

Установка виджетов на сайт, созданный в Tilda

Необходима возможность вставки html-блоков в конструкторе, поэтому требуется выбрать минимальный платный тариф Tilda.

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

1 Выберите нужный виджет

Доступно 5 вариантов виджетов:

2 Зарегистрируйтесь в личном кабинете eShopLogistic

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

4 Установите виджет на сайт Tilda

Для установки виджета на страницу Tilda добавьте html-блок:

Вставка виджета на страницу Tilda

Далее в контент html-блока необходимо вставить код:

  • Для виджета №1 
    <div id="eShopLogisticWidgetForm" data-lazy-load="false" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/form/app.js"></script>
  • Для виджета №2 
    <div id="eShopLogisticWidgetFormOrder" data-key="000000-0-0" data-lazy-load="false" data-weight="1"></div>
<script src="https://api.esplc.ru/widgets/form-order/app.js"></script>
  • Для виджета №3 
    <button data-esl-widget data-title="Быстрый заказ с доставкой">Стоимость и срок доставки</button>
<div id="eShopLogisticWidgetModal" data-lazy-load="true" data-weight="1"></div>
<script src="https://api.esplc.ru/widgets/modal/app.js"></script>
  • Для виджета №4 
    <div id="eShopLogisticWidgetBlock" data-lazy-load="false" data-key="000000-0-0" data-weight="1"></div>
<script src="https://api.esplc.ru/widgets/block/app.js"></script>
  • Для виджета №5 
    <button data-esl-widget-cart
    data-offers='[{ "article":"001","name":"Наушники","count":1,"price":6500,"weight":1,"image":"https://eshoplogistic.ru/files/demo/headphones.jpg" }]'>
    Заказать с доставкой
</button>
<div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/cart-module/app.js"></script>
  • Для виджета №6 
    
<div id="eShopLogisticWidgetTerminals" data-lazy-load="false" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/terminals/app.js"></script>
<script>document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('eShopLogisticWidgetTerminals').dispatchEvent(new CustomEvent('eShopLogisticWidgetTerminals:loadApp'))
})</script>

Пример вставки кода:

Вставка виджета на страницу Tilda

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

Необходимо выключить штатную корзину Tilda:

Выключение корзины Тильда

Для товаров указываем 3 дополнительных параметра: артикул, вес и габариты. Вес указываем в кг, габариты в сантиметрах в формате Д*Ш*В; артикул должен быть уникальной строкой для каждого товара. Если не указать артикул, он будет сформирован автоматически.

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

<script>
const esl_default_weight = 0.1, esl_default_dimensions = '10*10*15'
</script>

В таком случае указывать вес / габариты для каждого товара не нужно.

Настройка товаров Tilda
Настройка товаров Tilda

Для установки виджета на страницу Tilda добавьте html-блок:

Вставка виджета на страницу Tilda

Далее в контент html-блока необходимо вставить код:

<div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/cart-module/app.js"></script>
<script src="https://api.esplc.ru/widgets/tilda.min.js"></script>
Параметр Описание
data-key Ключ виджета. Указывается на вкладке «Подключение на сайте».
data-lazy-load Включение или отключение автозагрузки виджета.
Если значение data-lazy-load="true", то виджет не будет автоматически загружен при открытии страницы в браузере. Для запуска виджета необходимо будет использовать какое-то событие, например клик по кнопке.
Рекомендуется устанавливать значение true, если страница имеет высокую посещаемость (особенно ботами), чтобы не создавать лишние запросы к сервису.
Подробнее смотрите в документации к выбранному виджету.
data-weight Вес груза в килограммах
data-dimensions Габариты в формате Д*Ш*В, в сантиметрах
data-price Стоимость груза в рублях.
Важно указывать, если в расчёт тосимости включена страховка или настроены корректирующие правила в зависимости от стоимости.

Атрибуты, отмеченные , - обязательны.

Расчёт доставки для нескольких товаров

Для включения в расчёт доставки нескольких товаров, используйте атрибут data-offers.
Этот атрибут представляет собой строку в формате JSON и заменяет атрибуты data-weight, data-price, data-dimensions. Пример: 

<div id="eShopLogisticWidgetBlock"
    data-lazy-load="false"
    data-key="000000-0-0"
    data-offers='[{ "article":91,"name":"Радиотелефон Siemens","count":1,"price":3450,"weight":1 }, { "article":92,"name":"Наушники Sony","count":1,"price":8600,"weight":0.8 }]'>
</div>
<script src="https://api.esplc.ru/widgets/block/app.js"></script>

Пример настройки вставки виджета внешней корзины с расчетом доставки с определением дефолтных параметров веса и габаритов, а также определением IP-адреса и отправкой события в Яндекс.Метрика:

<div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-ip='' data-key="ВАШ_КЛЮЧ_ВИДЖЕТА"></div>
<script>
    const esl_default_weight = 0.25, esl_default_dimensions = '10*10*15'
    fetch('https://ipapi.co/json/').then(d => d.json()).then(d => document.getElementById('eShopLogisticWidgetCartModule').dataset.ip = d.ip)
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetCartModule');
        root.addEventListener('eShopLogisticWidgetCartModule:onSendedOrder', (event) => {
            ym(ВАШ_НОМЕР_СЧЁТЧИКА, 'reachGoal', 'onSendedOrder')
        })
    })
</script>
<script src="https://api.esplc.ru/widgets/cart-module/app.js"></script>
<script src="https://api.esplc.ru/widgets/tilda.min.js"></script>