Упрощённая версия виджета расчёта доставки — содержит только карту с ПВЗ. Чтобы протестировать его работу, перейдите по ссылке.
Для установки виджета необходимо подключить файл по ссылке https://widget.shiptor.ru/embed/widget-pvz.js.
Не копируйте и не сохраняйте файл! Это может привести к нарушению работоспособности виджета в дальнейшем.
Сделать это можно в теге body нужной страницы.
<script type="text/javascript" src="https://widget.shiptor.ru/embed/widget-pvz.js"></script>
По умолчанию виджет выведет доступные для Москвы точки ПВЗ для отправления весом 1 кг, габаритами 10×10×10 см3, стоимостью 3 000 рублей, включенным наложенным платежом и объявленной ценностью. Возможно указание своих собственных начальных параметров через контейнер.
Внешний вид виджета
Если контейнера виджета нет, он создаётся автоматически с параметрами по умолчанию. Если задать его явным образом, то можно определять свои собственные начальные значения.
Виджет опирается на HTML-контейнер вида:
<div id="shiptor_widget_pvz" class="_shiptor_widget"></div>
Через него передаются все изначальные параметры.
Параметр | Описание | Пример |
---|---|---|
data-mode | Режим отображения. Может быть задан строкой вида: popup или inline. Значение popup соответствует полноэкранному всплывающему окну, а inline - блоку, встраиваемому в тело страницы. |
data-mode="inline" По умолчанию: popup |
data-weight | Расчетный вес в кг, указывается числом. |
data-weight="2" По умолчанию: 1 |
data-dimensions | Расчетные габариты в см, указываются в json-формате. |
data-dimensions= '{"length":25, "width":10, "height":20}' По умолчанию: 10 х 10 х 10 см3 |
data-price | Расчетная стоимость в рублях, указывается числом. Является наложенным платежом, если один из параметров data-cod или data-card равен 1. |
data-price="5000" По умолчанию: 3 000 |
data-cod | Флаг учета оплаты наложенного платежа наличными. Задается целым числом, где 0 — нет, 1 — да. |
data-cod="0" По умолчанию: 1 |
data-card | Флаг учета оплаты наложенного платежа картой. Задается целым числом, где 1 - да, 0 - нет. |
data-card="1" По умолчанию: 0 |
data-courier | Фильтр для отображения информации по конкретному перевозчику (ТК). Возможное значение: shiptor, boxberry, dpd, iml, russian-post, pickpoint, cdek, shiptor-one-day, sberlogistics или sber_courier. Чтобы задать составной фильтр из способов доставки, укажите их через запятую, пользуясь списком ниже: shiptor_pvz — Shiptor Самовывоз |
data-courier="dpd" data-courier="dpd_pvz, pickpoint" |
data-declaredCost | Объявленная стоимость для расчета доставки. Не может быть меньше 10. Если параметр data-cod равен 1 или отсутствует, data-declaredCost игнорируется и в качестве объявленной стоимости берется значение из data-price. | data-declaredCost="1500" |
data-kladr | КЛАДР-код местоположения, задается строкой. Обязательный параметр, без которого не может загрузиться карта с точками ПВЗ. |
data-kladr="78000000000" По умолчанию: 77000000000 (КЛАДР-код Москвы) |
data-kladr-from |
КЛАДР-код населенного пункта отправления для сквозной доставки, задается строкой. |
data-kladr-from="77000000000" |
data-fixedDeliveryPrice* |
Фиксированная цена доставки в рублях, задается числом. Определяет единую стоимость доставки для всех точек на карте. |
data-fixedDeliveryPrice="125" По умолчанию: отсутствует |
data-round* | Округление стоимости доставки, задается строкой. Возможны значения: math (математическое округление), floor (всегда в меньшую сторону) и ceil (всегда в большую сторону). Если задана фиксированная цена доставки, параметр игнорируется. |
data-round="ceil" По умолчанию: отсутствует |
data-deliveryPriceText* | Текст (например, БЕСПЛАТНО), который будет выводится вместо стоимости доставки в списке ПВЗ. | data-deliveryPriceText="БЕСПЛАТНО" |
data-deliveryPriceLower* | Нижняя граница стоимости доставки для всех ПВЗ в списке. Все меньшие значения будут подняты до этого уровня. |
data-deliveryPriceLower="250" По умолчанию: 0 (минимальное ограничение отсутствует) |
data-deliveryPriceUpper* | Верхняя граница стоимости доставки для всех ПВЗ в списке. Все большие значения будут снижены до заданного уровня. |
data-deliveryPriceUpper="750" По умолчанию: 0 (максимальное ограничение отсутствует) |
data-threshold | Ограничение стоимости доставки по нижней или верхней границе. При необходимости ограничения можно комбинировать. Например, data-threshold='{"min":50,"max":80}' — минимальная стоимость доставки 50 рублей, а максимальная 80 рублей. |
data-threshold='{"min":50,"max":80}' По умолчанию: 0 (ограничение отсутствует) |
data-markup* |
Наценка на стоимость доставки в процентах или в абсолютном исчислении. Существует два алгоритма её задания: прямой и составной. Доступны следующие правила:
При необходимости ключи можно комбинировать. Например, data-markup='{"all": "30%", "post": "50%"}' — наценка для всех служб 30%, а для Почты России 50%. |
простое правило составное правило |
data-pvzFilterByCod | Фильтрация списка ПВЗ по доступности/недоступности наложенного платежа. |
data-pvzFilterByCod="0" По умолчанию: 1 (фильтруется) |
data-showConfirm | Режим отображения кнопки «Выбрать ПВЗ», которая появляется внизу списка при выборе ПВЗ. Задается числом 0 (не показывать) или 1 (показывать). |
data-showConfirm="0" По умолчанию: 1 |
data-show_term | Режим отображения сроков доставки в списке ПВЗ. Задается числом 0 (не показывать) или 1 (показывать). |
data-show_term="0" По умолчанию: 1 |
data-map | Выбор карты, на которой будут отображаться точки ПВЗ. Допустимое значение: yandex или 2gis. |
data-map="2gis" По умолчанию: yandex |
data-link-maps | Подключение карты в виджете. Если сервис уже подключён, то можно его заблокировать, чтобы избежать ошибок с отображением карты с ПВЗ. Задается числом 0 (не подключать) или 1 (подключать). |
data-link-maps=”1” По умолчанию: 0 |
data-mk |
API-ключ для подключения поисковой строки по карте. Алгоритм его получения зависит от типа карты ПВЗ:
|
data-mk=”XXXXX” |
data-geo-search |
Задание значения для поисковой строки геолокации. На данный момент этот параметр доступен только только для карт 2gis. |
data-geo-search="адрес без указания города" |
data-pvzPicker | Режим отображения точек ПВЗ на мобильном телефоне. Задается строкой list (список) или map (карта). |
data-pvzPicker="map" По умолчанию: list |
data-wk |
Виджет-ключ для авторизованной работы через сервис Чекаута Shiptor. |
data-wk="XXXXXXXXXXX" |
data-pk |
Публичный ключ API Shiptor для авторизованной работы. |
data-pk="XXXXXXXXXXX" |
data-pvz | Выбор ПВЗ с указанным идентификатором уже на старте виджета. При этом должны соблюдаться следующие условия:
|
data-pvz = "индекс ПВЗ" По умолчанию: 1 |
data-shipping-method | Выбор метода доставки с указанным идентификатором уже на старте виджета. | data-shipping-method="идентификатор службы доставки" |
data-city-search | Режим отображения кнопки поля ввода города. Задается числом 0 (не показывать) или 1 (показывать). |
data-city-search = "1" По умолчанию: 0 |
* параметры являются конкурирующими. Обрабатываются в порядке приоритетности (data-deliveryPriceLower/data-deliveryPriceUpper можно считать единым параметром):
<div id="shiptor_widget_pvz" class="_shiptor_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" data-deliveryPriceText="БЕСПЛАТНО"></div>
<a href="#" data-role="shiptor_widget_show">Показать виджет</a>
Здесь: задана единая текстовая надпись «БЕСПЛАТНО», которая будет выводится вместо стоимости доставки в списке ПВЗ.
При выборе пользователем ПВЗ виджет вызывает 1 специальное событие. Для него можно назначать обработчики по аналогии со стандартными браузерными событиями типа click или change. В этом случае контейнером выступает сам виджет.
В качестве аргумента в обработчик события передается объект CustomEvent. Все данные, получаемые виджетом в результате запроса к API Shiptor, возвращаются в поле 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(); переопределяет исходные данные и требует входного параметра в виде простого объекта с определенным набором полей:
Карта с точками будет перерисована для местоположения Междуреченск Кемеровской обл. с установленной минимальной стоимостью доставки в 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"
});