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

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

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" }
]'

data-image="images/product.png"

data-user='{ "name": "Иванов Иван Иванович", "email": "test@mail.ru", "phone": "+79100000000"}'

<?php echo $_SERVER['REMOTE_ADDR']; ?>

Доступно 10 функций обратного вызова для каждого ключевого события или ошибки:

• onLoadApp - инициализация виджета;
• onSelectedSettlement - выбор населённого пункта;
• onAllServicesLoaded - получение всех доступных вариантов доставки;
• onSelectTypeDelivery - выбор типа доставки;
• onSelectedPayment - выбор варианта оплаты;
• onSelectedService - выбор варианта доставки;
• onChangeAdditionalService - выбор дополнительных услуг;
• 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 кнопки.
Поэтому при клике на кнопке в корзину будет добавлено соответствующее указанному количество.

4. Отправка события в метрику

Например, необходимо отправить в метрику достижение цели «Отправка заказа»:

<script>
document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('eShopLogisticWidgetCartModule').addEventListener('eShopLogisticWidgetCartModule:onSendedOrder', (event) => {
            ym(ваш_номер_счётчика, 'reachGoal', 'onSendedOrder')
        })
    })
</script>

5. Автоматичекое определение города посетителя

Для этого необходимо определить IP-адрес.

IP-адрес может быть получен средствами CMS или напрямую, например посредством PHP:

<?php echo $_SERVER['REMOTE_ADDR']; ?>

Если нет доступа к переменным сервера (например, для Tilda), можно получить IP-адрес через JS:

<script>
fetch('https://ipapi.co/json/').then(d => d.json()).then(d => document.getElementById('eShopLogisticWidgetCartModule').dataset.ip = d.ip)
</script>