Виджет расчета доставки для разработчиков (корзинный)

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

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

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

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

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

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

    root.addEventListener('eShopLogisticWidgetCart:onInvalidSettlementCode', () => {
        console.log('Неверный код населенного пункта')
    })

    root.addEventListener('eShopLogisticWidgetCart:onInvalidName', () => {
        console.log('Неверный name города')
    })

    root.addEventListener('eShopLogisticWidgetCart:onInvalidServices', () => {
        console.log('Неверный массив служб')
    })

    root.addEventListener('eShopLogisticWidgetCart:onInvalidPayment', () => {
        console.log('Не передана оплата')
    })

    root.addEventListener('eShopLogisticWidgetCart:onInvalidOffers', () => {
        console.log('Не передан offers')
    })
</script>

Установка на сайт

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

<div id="eShopLogisticWidgetCart" data-lazy-load="false" data-key="000000-0-0"></div>
<script src="https://api.esplc.ru/widgets/cart/app.js">
/*
   для компактной версии виджета:
   https://api.esplc.ru/widgets/cartCompact/app.js
*/
</script>

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

---

Как использовать виджет на странице оформления заказа

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

• Населённый пункт (далее НП) для доставки.

  Определить НП при загрузке страницы оформления заказа:
  если на сайте установлена система определения города посетителя и у вас есть название города, а лучше ФИАС-код, то можно воспользоваться методом /locality/search. В противном случае, можно использовать метод /locality/geo.
  Выбор НП посетителем сайта: используйте метод /locality/search.

• Состав корзины.

  JSON-представление массива товаров в корзине.

• Метод оплаты.

  Обратите внимание: необходимо связать варианты оплаты, настроенные на сайте с зарезервированными кодами в нашейм сервисе:
  card (карта)
  cash (наличные)
  cashless (безналичный расчёт)
  prepay (специальный тип: предоплата)
  upon_receipt (специальный тип: оплата при получении).

При обновлении любого из указанных выше параметра необходимо обновлять виджет, перезапуская событие eShopLogisticWidgetCart:updateParamsRequest с новыми данными.

JS-код запуска:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('eShopLogisticWidgetCart'),
    // объект settlement должен содержать массив services, а также один из элементов code или fias
    // данные получаются посредством методов /locality/search или /locality/geo
    settlement = {
        "code": 120935,
        "name": "Тверь",
        "fias": "c52ea942-555e-45c6-9751-58897717b02f",
        "services": [
            "sdek",
            "yandex",
            "boxberry",
            "energija"
        ]
    },
    // массив товаров корзины
    cart = [{
        "article":"001",
        "name":"Товар 1",
        "count":1,
        "price":6400,
        "weight":2.5,
        "dimensions":"15*10*5"
    }, {
        "article":"002",
        "name":"Товар 2",
        "count":2,
        "price":1500,
        "weight":0.5,
        "dimensions":"10*5*5"
    }]

    // собыите onLoadApp запускается только один раз - при первом запуске виджета
    // для того, чтобы передать в виджет новые параметры, используйте только updateParamsRequest
    root.addEventListener('eShopLogisticWidgetCart:onLoadApp', (event) => {
        const params = {
            offers: JSON.stringify(cart),
            payment: 'card',
            // При необходимости можно задать ПВЗ отправления груза
            // Актуально, если ПВЗ используются разные и на них есть доплаты, например у ПЭК и DPD)
            fromTerminal: {
                dpd: 'BBK'
            },
            // Указанием здесь ФИАС-кода можно изменить город-отправитель, заданный по умолчанию в настройках ключа доступа (в личном кабинете)
            from: '8dea00e3-9aab-4d8e-887c-ef2aaa546456'
        }

        root.dispatchEvent(new CustomEvent('eShopLogisticWidgetCart:updateParamsRequest', {
            detail: {
                settlement: settlement,
                requestParams: params
            }
        }))
    })

})
</script>

В результате работы виджета доступны следующие данные, которые необходимо передать в объект заказа:

• Выбранная служба доставки, стоимость и срок доставки, комментарий (если указан).

  Используйте функцию обратного вызова eShopLogisticWidgetCart:onSelectedService.
  В event.detail также могут содержаться другие необходимые данные, в зависимости от конкретной службы доставки. Например, «код тарифа» для СДЭКа, который необходим для выгрузки заказа на доставку в кабинет сдека.

• Метод доставки

  Используйте функцию обратного вызова eShopLogisticWidgetCart:onSelectTypeDelivery.

• Выбранный пункт самовывоза

  Используйте функцию обратного вызова eShopLogisticWidgetCart:onSelectedPvz.

Пример:

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

    // Событие «Выбор варианта доставки»
    root.addEventListener('eShopLogisticWidgetCart:onSelectedService', (event) => {
        console.log('Событие onSelectedService', event.detail)
    })
})
</script>

В случае, если не найдено ни одного варианта доставки, вызывается eShopLogisticWidgetCart:onNotAvailableServices.