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

Виджет внешней корзины с расчетом доставки

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

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

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

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

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

Корзина отображается в нижнем правом углу экрана.
Расположение и цвета можно менять как через настройки в личном кабинете, так и через CSS.

Для добавления товара в корзину кликнете по кнопке «Заказать с доставкой».

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

Количество товара, которое будет добавлено в корзину по умолчанию равно 1 штуке, можно изменить через поле «Количество».

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

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

  • Позволяет из лендинга сделать полноценный интернет-магазин

    Вы можете сделать простую страницу на бесплатном конструкторе или на чистом html в блокноте.
    Далее достаточно подключить этот виджет и в результате вы получаете магазин с корзиной, расчётом доставки, возможностью оплаты и отправкой заказа на почту или в CRM-систему.

  • Можно использовать на любой CMS вместо штатной корзины

    У вас на сайте появится удобная корзина с расчетом доставки и оплатой.
    Оформленные заказы вы получите на почту, в CMS сайта или в CRM-систему.
    Таким образом этот виджет заменит сразу несколько модулей для чекаута и даст вам нужный функционал в корзине без подключения или разработки модулей интеграции.

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

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

  • Онлайн-оплата заказа

    Выберите одну из платёжных систем и при выборе варианта оплаты «Картой на сайте» - клиент сможет оплатить заказ прямо в виджете.
    Разрешенные типы оплат и их названия настраиваются в личном кабинете.
    На данный момент доступна оплата через ЮKassa, Альфа-банк и PayKeeper. Другие платежные сервисы и банки добавим по запросу.

  • Простая настройка и кастомизация внешнего вида под стиль сайта

    Запуск виджета настраивается на любую кнопку сайта.
    Место отображения корзины, а также цвета элементов корзины настраиваются в Личном кабинете. Внешний вид с помощью css можно настроить под дизайн конкретного сайта: цвета, шрифт, форма и расположение блоков.

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

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

1. Зарегистрируйтесь в личном кабинете: my.eshoplogistic.ru

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

3. Для установки виджета воспользуйтесь инструкцией, указанной на вкладке «Установка и примеры»

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

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

Параметр Описание
data-key Ключ доступа
data-offers

JSON-строка с данными набора товаров.
Данный атрибут относится к кнопке добавления в корзину.
Например:

<button data-esl-widget-cart
    data-offers='[{ "article":"001","name":"Кроссовки","count":1,"price":6500,"weight":1 }]'>
    Заказать с доставкой
</button>

По клику на кнопке, вместо 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" }
]'

Также можно передать ссылку на изображение товара:
image - uri изображения товара (параметр src тега img).

Пример:

data-image="images/product.png"
data-from

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

В качестве значения используется ФИАС-код или название населённого пункта.
Лучше всего использовать именно ФИАС-код, т.к. населённых пунктов с одинаковым названием может быть несколько.
ФИАС-код можно узнать на сайте Федеральной Адресной Системы: https://fias.nalog.ru/ExtendedSearch.

Примеры (изменит город-отправитель на «Тверь»):
data-from="c52ea942-555e-45c6-9751-58897717b02f" , data-from="Тверь"

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 - успешная отправка заказа;
  • onGetPaymentSystem - при отправке заказа, если есть включена платёжная система;
  • onAddToCart - товар добавлен в корзину;
  • onInitCart - инициализация корзины;
  • onChangeCountOffer - изменено количество товара в корзине;
  • onRemoveOffer - товар удалён из корзины;
  • onCloseWindow - закрытие окна виджета;
  • onErrorSendOrder - ошибка отправки заказа;
  • onNotAvailableServices - не получено ни одного варианта доставки.

Пример использования:

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetCartModule');

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

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

        // ...
    })
</script>

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

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

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

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

Подробно о настройке виджета смотрите в руководстве.

1. Добавить в нужное место на странице элемент запуска виджета.
Обязательные атрибуты: data-esl-widget-cart и data-offers:

<button data-esl-widget-cart
    data-offers='[{ "article":"001","name":"Кроссовки","count":1,"price":6500,"weight":1 }]'>
    Заказать с доставкой
</button>

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

<div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-key="000000-0-0"></div>

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

<script src="https://api.esplc.ru/widgets/cart-module/app.js"></script>

Примеры

1. Настройка параметров запуска виджета через data-атрибуты

Настроим заголовок окна виджета, город отправления:

<button data-esl-widget-cart
    data-offers='[{ "article":"001","name":"Кроссовки","count":1,"price":6500,"weight":1 }]'>
    Заказать с доставкой
</button>
<div id="eShopLogisticWidgetCartModule"
    data-lazy-load="false"
    data-key="000000-0-0"
    data-from="Самара"
    data-title="Наш заголовок виджета"
</div>

2. Добавление в корзину сразу набора товаров

Для этого нужно просто добавить в атрибут data-offers нужные товары

<button data-esl-widget-cart
    data-offers='[{ "article":"001","name":"Кроссовки","count":1,"price":6500,"weight":1 }, { "article":"002","name":"Шнурки","count":5,"price":250,"weight":0.01 }]'>
    Заказать с доставкой
</button>
<div id="eShopLogisticWidgetCartModule" data-lazy-load="false" data-key="000000-0-0"</div>

3. Изменение кодичества товара в корзину

Нам необходим элемент, задающий количество. Например, это будет обычный input type="number" с идентификатором id="counter":

<input id="counter" class="form-control" type="number" value="1">
<button data-esl-widget-cart id="to-cart"
    data-offers='[{ "article":"001","name":"Кроссовки","count":1,"price":6500,"weight":1 }]'>
    Заказать с доставкой
</button>

Добавим немного javascript:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('to-cart'), offers = JSON.parse(button.dataset.offers)
    document.getElementById('counter').addEventListener('change', (event) => {
        if(typeof offers === "object"){
            offers[0].count = event.target.value
            button.dataset.offers = JSON.stringify(offers)
        }
    })
})
</script>

При изменении количества в поле с идентификатором id="counter" будет изменён параметр data-offers кнопки.
Поэтому при клике на кнопке в корзину будет добавлено соответствующее указанному количество.