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

Решение для интеграции сайтов Tilda со службами доставки

Виджеты расчета доставки в корзине и на других страницах Tilda

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

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

Подробнее по возможностям виджетов на демо-страницах:

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

Cистема Tilda закрыта для внешних интеграций, поэтому сделать полноценную встройку в движок Тильды нет возможности. Решение, разработанное нами для расчета доставки в корзине, является по сути надстройкой над Тильдой, которую она не видит. Соответственно, есть специфика:

1. Чтобы реализовать расчет доставки при оформлении заказа в корзине Тильды, понадобится отключить штатную корзину, заменив ее на наш виджет с корзиной и расчетом доставки. В ней будет расчет доставки всеми нужными вам службами доставки, но заказы вы будете получать не в Тильду, а на email (или на ваш скрипт).
2. Онлайн оплату, если у вас предусмотрена, так же понадобится подключить на стороне виджета в настройках. На данный момент доступно подключение оплаты через Юkassa, Альфа Банк, Т-банк, Точка банк и Pay-Keeper (другие платежные сервисы и банки подключим по запросу). В этом случае после оформления заказа в виджете будет происходить переадресация на вашу платежную страницу, и далее вам нужно будет самостоятельно узнать был ли факт оплаты оформленного заказа (смотреть в кабинете эквайера или настроить оттуда уведомление об оплате).

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

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

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

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

Инструкция по установке виджета на любую страницу Tilda, если у вас нет каталога товаров с корзиной

Вставляем код виджета на страницу Tilda

Открываем страницу, на которую хотите установить виджет, и добавляем сюда блок типа html-код.

Возможность использования html-блоков у Tilda есть только на платном тарифе.

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

Для виджета по параметрам

<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>

Для виджета во всплывающем окне

<button data-esl-widget data-title="Быстрый заказ с доставкой">Стоимость и срок доставки</button>
<div id="eShopLogisticWidgetModal" data-lazy-load="true" data-key="000000-0-0" data-weight="1"></div>
<script src="https://api.esplc.ru/widgets/modal/app.js"></script>

Для виджета в странице

<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>

Для виджета с корзиной

<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>

Для виджета ПВЗ на карте

<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>

Для виджета по маршруту

<div id="eShopLogisticWidgetDistance" data-lazy-load="false" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/distance/app.js"></script>

На странице Tilda блок будет выглядеть так:

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

Помимо обязательных параметров виджета можно использовать дополнительные. Пример кода c дефолтными габаритами и ценой, а также с определением города по IP:

<div id="eShopLogisticWidgetFormOrder"
    data-ip=''
    data-key="ВАШ_КЛЮЧ_ВИДЖЕТА"
    data-lazy-load="false"
    data-dimensions="25*15*10"
    data-price="1500"
    data-weight="1">
</div>
<script>
fetch('https://api.ipify.org?format=json').then(d => d.json()).then(d => document.getElementById('eShopLogisticWidgetFormOrder').dataset.ip = d.ip)
</script>
<script src="https://api.esplc.ru/widgets/form-order/app.js"></script>

Теперь на вашем сайте отображается нужный вам виджет.

На этом скриншоте пример с Виджетом по параметрам груза

Инструкция по замене штатной корзины Tilda на Виджет с корзиной и расчетом доставки

Находим блок со штатной корзиной Tilda и выключаем его.
Скорее всего этот блок находится на странице типа Footer или Header

При использовании каталога товаров

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

При отсутствии каталога товаров

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

1. Вес и габариты товаров примерно одинаковые

В html код вызова виджета добавляем строку с вашими значениями по умолчанию (пример полного кода будет ниже):


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

2. Вес и габариты товаров разные

Открываем поочередно все карточки товаров и для каждого добавляем 3 дополнительных параметра: Вес, Габариты и Артикул.

Вес указываем в кг.

Габариты указываем в сантиметрах в формате Д*Ш*В.

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

Вставляем код виджета на страницу Tilda

Открываем страницу типа Footer и добавляем сюда блок типа html-код.

Возможность использования 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>

На странице Tilda блок будет выглядеть так:

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

<div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-ip='' data-key="ВАШ_КЛЮЧ_ВИДЖЕТА"></div>
<script>
    // установим дефолтные значения веса и габарита для товаров
    const eslCart = document.getElementById('eShopLogisticWidgetCartModule'),
        esl_default_weight = 0.25,
        esl_default_dimensions = '10*10*15'

    // определим IP-адрес польсетителя для того, чтобы наш виджет смог автоматически подставить его населённый пункт
    fetch('https://api.ipify.org/?format=json').then(d => d.json()).then(d => document.getElementById('eShopLogisticWidgetCartModule').dataset.ip = d.ip)

    // Пример: использование колбэка для отправки цели в Яндекс.Метрика
    document.addEventListener('DOMContentLoaded', () => {
        eslCart.addEventListener('eShopLogisticWidgetCartModule:onSendedOrder', (event) => {
            ym(ВАШ_НОМЕР_СЧЁТЧИКА, 'reachGoal', 'onSendedOrder')
        })
    })

    // Пример: скрыть корзину до события добавления в корзину товара
    eslCart.style.display = 'none';
    const orderBtns = document.querySelectorAll('a[href="#order"]')
    orderBtns.forEach.call(orderBtns, function(element){
        element.addEventListener('click', event => {
            eslCart.style.display = 'block';
        })
    })
</script>
<script src="https://api.esplc.ru/widgets/cart-module/app.js"></script>
<script src="https://api.esplc.ru/widgets/tilda.min.js"></script>

Теперь на вашем сайте при клике по кнопке товар добавляется в корзину виджета:

Оформленные клиентами заказы со всеми данными по доставке придут вам на указанный email или будут отправлены на ваш скрипт, в соответствии в настройками виджета:

Обратите внимание, в кабинет ТК заказ не загрузится, такого функционала у виджета нет.

Параметр	Описание
data-key	Ключ виджета. Указан в настройках виджета на вкладке «Подключение на сайте».
data-lazy-load	Включение или отключение автозагрузки виджета. Если значение `data-lazy-load="true"`, то виджет не будет автоматически загружен при открытии страницы в браузере. Для запуска виджета необходимо будет использовать какое-то событие, например клик по кнопке. Рекомендуется устанавливать значение `true`, если страница имеет высокую посещаемость (особенно ботами), чтобы не создавать лишние запросы к сервису. Подробнее смотрите в документации к выбранному виджету.
data-weight	Вес груза в килограммах
data-dimensions	Габариты в формате ДШВ, в сантиметрах
data-price	Стоимость груза в рублях. Важно указывать, если в расчёт стоимости включена страховка или настроены корректирующие правила в зависимости от стоимости.
data-ip	IP-адрес посетителя для автоматического определения города. Может быть получен через сторонний сервис для определения ip, например: `<script> fetch('https://api.ipify.org/?format=json').then(d => d.json()).then(d => document.getElementById('eShopLogisticWidgetCartModule').dataset.ip = d.ip) </script>`

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

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

Для включения в расчёт доставки нескольких товаров, используйте атрибут 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>

Все виджеты имеют функции обратного вызова, которые вы можете использовать для расширения функционала.

Подробная информация по виджетам с описанием всех возможных параметров доступна на демо-странице конкретного виджета.