Виджет ПВЗ

Пример заданных параметров в контейнере

<div id="shiptor_widget_pvz" class="_shiptor_widget _sbl_widget" data-weight="2" data-cod="0" data-price="5400"></div>

Здесь: вес — 2 кг, стоимость отправления — 5 400 руб, наложенный платёж — отсутствует.

Отложенная инициализация

По умолчанию виджет начинает рисоваться сразу же при загрузке страницы, а это не всегда удобно. Есть возможность настроить его показ по клику на какой-либо элемент. Подойдёт любой, на котором корректно срабатывает событие click.

<a href="#" data-role="shiptor_widget_show">Показать виджет</a>

Задайте у своей ссылки параметр data-role равным shiptor_widget_show и тогда виджет отобразится только после нажатия на эту кнопку.

Пример отложенной инициализации с заданными параметрами в контейнере

Если требуется задать дополнительные параметры виджета при отложенной инициализации, используйте следующий сниппет:

<div id="shiptor_widget_pvz" class="_shiptor_widget _sbl_widget"></div>

<a href="#" data-role="shiptor_widget_show">Показать виджет</a>

События

При выборе пользователем ПВЗ виджет вызывает 1 специальное событие. Для него можно назначать обработчики по аналогии со стандартными браузерными событиями типа click или change. В этом случае контейнером выступает сам виджет. В качестве аргумента в обработчик события передается объект CustomEvent. Все данные, получаемые виджетом в результате запроса к API Shiptor, возвращаются в поле detail этого объекта.

• onError — срабатывает, когда виджет ПВЗ выводит сообщение об ошибке.
• onGetPvzList — срабатывает, когда виджет заканчивает процесс получения всех доступных точек ПВЗ.
• onPvzSelect — срабатывает, когда пользователь выбирает конкретный ПВЗ. В поле detail возвращается информация о выбранном ПВЗ.

Пример назначения обработчика события

var elemShiptorWidget = document. querySelector("#shiptor_widget_pvz");
elemShiptorWidget.addEventListener ("onPvzSelect", function(ce){ console.log(ce.detail);});
или с использованием jQuery:
$("#shiptor_widget_pvz").on("onPvzSelect",function(ce){console. log(ce. detail);});

Программная инициализация и обновление исходных данных

Объект window.JCShiptorWidgetPvz управляет виджетом и содержит все исходные данные, которые можно программно переопределить и перерисовать карту после. Это актуально, когда, например, на странице оформления заказа нужно показать список точек, доступных в выбранной области.

Чтобы перестроить виджет без изменения начальных данных, используется метод window.JCShiptorWidgetPvz.refresh(); При этом контейнер полностью уничтожается и создается заново, а в качестве исходных данных используются параметры, которые в нем были на момент вызова этого метода.

window.JCShiptorWidgetPvz.setParams(); переопределяет исходные данные и требует входного параметра в виде простого объекта с определенным набором полей:

• location — объект с полем kladr_id, в которое записывается КЛАДР-код нужного местоположения.
• dimensions — объект с полями length, width и height, содержащими длину, ширину и высоту отправления.
• cod — признак оплаты наличными при получении. Допустимые значения: true или false.
• card — признак оплаты по карте при получении. Допустимые значения: true или false.
• courier — ограничение методов доставки конкретной логистической службой. Допустимые значения: shiptor, boxberry, dpd, iml, pickpoint, cdek.
• price — число, означающее стоимость отправления в рублях.
• weight — число, означающее вес отправления в кг.
• declaredCost — число, означающее объявленную стоимость отправления в рублях. Если наложенный платёж включен, declaredCost игнорируется.
• pvzFilterByCod — фильтрация списка ПВЗ по доступности/недоступности наложенного платежа. Допустимые значение: true или false.
• search — значение для поисковой строки геолокации.
• pvz — идентификатор ПВЗ. Должен быть задан вместе с shipping_method
• shipping_method — идентификатор службы доставки.

Пример обновления виджета новыми данными

Карта с точками будет перерисована для местоположения Междуреченск Кемеровской обл. с установленной минимальной стоимостью доставки в 125 р.

window.JCShiptorWidgetPvz.setParams({location:{kladr_id: "42000016000"}, threshold:{min: 125}});
window.JCShiptorWidgetPvz.refresh();

Чтобы скрыть виджет, используется метод window.JCShiptorWidgetPvz.hide();

Чтобы показать виджет, используется метод window.JCShiptorWidgetPvz.show();

Полностью удалить контейнер виджета со страницы можно, вызвав метод window.JCShiptorWidgetPvz.destroy();

Чтобы создать на странице несколько копий виджета с различными параметрами, создайте отдельные контейнеры для каждого экземпляра виджета ПВЗ.

window.JCShiptorWidgetPvzRec = new ShiptorWidgetPvz({
    id: "shiptor_widget_pvz_rec"
})

Все, кроме самого первого (id контейнера shiptor_widget_pvz), нужно програмно инициализировать со своим именем и id:

window.JCShiptorWidgetPvzRec2 = new ShiptorWidgetPvz({
     id: "shiptor_widget_pvz_new"
});
window.JCShiptorWidgetPvzRec3 = new ShiptorWidgetPvz({
     id: "shiptor_widget_pvz_new_new"
})