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

‹script›
const widget = document.getElementById('eShopLogisticWidgetForm'),
        button = document.getElementById('runWidget')
button.addEventListener('click', event => {
	widget.dispatchEvent(new CustomEvent('eShopLogisticWidgetForm:loadApp'))
})
‹/script›

‹?php echo $_SERVER['REMOTE_ADDR']; ?›

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

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

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

Для установки виджета на сайт необходимо вставить в код страницы контейнер для виджета и подключить js-скрипт:

<div id="eShopLogisticWidgetForm" data-lazy-load="false" class="eshoplogistic-widget-calculate" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/form/app.js"></script>

Параметр data-key должен содержать ключ виджета, указанный в настройках виджета в личном кабинете:

Функции обратного вызова

• onLoadApp - вызывается при загрузке виджета;
• onClickSubmit - вызывается по клику на кнопке «Рассчитать»;
• onChangeAdditionalService - при выборе дополнительных услуг.

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

‹script›
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetForm')

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

        root.addEventListener('eShopLogisticWidgetForm:onClickSubmit', (event) => {
            console.log('Событие клика по кнопке "Рассчитать"', event.detail)
        })
    })
‹/script›

Методы

• eShopLogisticWidgetForm:updateParamsRequest - обновление параметров виджета.

Важный нюанс: «под капотом» виджет использует общий для всех виджетов объект offers, поэтому для обновления параметров веса, цены и габаритов необходимо обновлять именно его; пример ниже.

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

‹script›
    // изменим габариты при изменении веса и перезапустим расчёт доставки
    document.addEventListener('DOMContentLoaded', () => {
        const root = document.getElementById('eShopLogisticWidgetForm'),
            price = document.getElementsByClassName('eshoplogistic-theme-input-price'),
            length = document.getElementsByClassName('eshoplogistic-theme-input-length'),
            width = document.getElementsByClassName('eshoplogistic-theme-input-width'),
            height = document.getElementsByClassName('eshoplogistic-theme-input-height')


        document.addEventListener('input', (event) => {
            if(event.target.classList.contains('eshoplogistic-theme-input-weight')) {
                length[0].value = 50
                width[0].value = 50
                height[0].value = 50

                root.dispatchEvent(
                    new CustomEvent('eShopLogisticWidgetForm:updateParamsRequest', {
                        detail: {
                            requestParams: {
                                offers: JSON.stringify([{
                                    "count": 1,
                                    "price": price[0].value,
                                    "weight": event.target.value,
                                    "dimensions": "50x50x50"
                                }])
                            }
                        }
                    })
                )
            }
        })
    })
‹/script›