Виджет ПВЗ
Виджет с пунктами выдачи заказов позволяет пользователям вашего сайта:
- выбрать на карте пункты с нужным способом оплаты;
- воспользоваться поиском пункта выдачи по адресу.
Примечание
Виджет ПВЗ поддерживает только доставку в другой день.
Какую информацию отправляет виджет
Виджет вызывает callback-функцию в момент использования. В зависимости от настроек пользователь видит пункты выдачи заказов (ПВЗ), постаматы и их характеристики в заданном радиусе.
Сallback-функция передает на ваш сайт следующие параметры:
address.street+houseb
— aдрес;typec
— тип доставки;payment_methods
— способы оплаты;id
— идентификатор;position
— точку на карте.
Установка виджета на сайт
Для подключения виджета выполните следующие действия:
- Скопируйте загрузочный код (см. ниже).
- Настройте необходимые параметры. Подробнее в разделе Настройка виджета.
- Добавьте настроенный код на нужную страницу. Рекомендуем расположить его внутри тега
<head> … </head>
.
Загрузочный код
<script async src="https://ndd-widget.landpro.site/widget.js"></script>
<div id="delivery-widget"></div>
<!-- Код виджета -->
<script>
(function(w) {
function startWidget() {
w.YaDelivery.createWidget({
containerId: 'delivery-widget', // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
params: {
city: "Москва", // Город, отображаемый на карте при запуске
size:{ // Размеры виджета
"height": "450px", // Высота
"width": "100%" // Ширина
},
source_platform_station: "05e809bb-4521-42d9-a936-0fb0744c0fb3", // Станция отгрузки
physical_dims_weight_gross: 10000, // Вес отправления
delivery_price: "от 100", // Стоимость доставки
delivery_term: "от 1 дня", // Срок доставки
show_select_button: true, // Отображение кнопки выбора ПВЗ (false — скрыть кнопку, true — показать кнопку)
filter: {
type: [ // Тип способа доставки
"pickup_point", // Пункт выдачи заказа
"terminal" // Постамат
],
is_yandex_branded: false, // Тип пункта выдачи заказа (false — Партнерские ПВЗ, true — ПВЗ Яндекса)
payment_methods: [ // Способ оплаты
"already_paid", // Доступен для доставки предоплаченных заказов
"card_on_receipt" // Доступна оплата картой при получении
]
payment_methods_filter: "or" // Фильтр по типам оплаты
}
},
});
}
w.YaDelivery
? startWidget()
: document.addEventListener('YaNddWidgetLoad', startWidget);
})(window);
// Подписка на событие
document.addEventListener('YaNddWidgetPointSelected', function (data){
// Обработка выбранных данных
// Данные о выбранной точке содержатся в параметре data
console.log(data.detail.id);
console.log(data.detail.address.full_address);
console.log(data.detail.address.country);
console.log(data.detail.address.locality);
console.log(data.detail.address.street);
console.log(data.detail.address.house);
console.log(data.detail.address.comment);
});
</script>
Настройка виджета
Для настройки доступны следующие параметры:
Параметр |
Описание |
|
Город, который будет показан на карте при загрузке. По умолчанию карта настроена на г. Москва. Если вы или ваш пользователь разрешаете определение геолокации, карта покажет город местонахождения. Примечание Задайте значение города на русском языке. Для одноименных городов или большей детализации укажите область. |
|
Фильтрация по типу способа доставки:
Чтобы на карте были показаны пункты выдачи заказов и постаматы, выберите оба значения. |
|
Необязательный параметр. Фильтрация по типу пунктов выдачи заказов:
Чтобы на карте были показаны оба типа, оставьте параметр пустым. |
|
Необязательный параметр. Фильтрация пунктов выдачи заказа по доступным способам оплаты:
Одновременно можно выбрать несколько значений. |
|
Необязательный параметр. Выбор оператора при фильтрации ПВЗ по способам оплаты:
Если отсутствует в загрузочном коде, по умолчанию будет применена фильтрация |
|
Отображение кнопки выбора ПВЗ:
Если настроена активная кнопка, то событие передается в момент нажатия кнопки «Продолжить». Если кнопка неактивна, то событие передается при выборе пункта выдачи. При повторном выборе будет передано новое значение. |
|
Размеры виджета на странице:
|
Если не используется расчет стоимости и сроков доставки, можно также задать значения для следующих параметров:
Параметр |
Описание |
|
Стоимость доставки для пользователя в рублях. Если цена нефиксированная, укажите значение в формате: «от 100». Чтобы скрыть отображение стоимости, проставьте « ». Обозначение валюты подставляется автоматически. |
|
Срок доставки для пользователя в днях. Рекомендуем указывать в формате: «от 1 дня». |
Расчет стоимости и сроков доставки
Виджет поддерживает расчет стоимости и сроков доставки. Для этого используйте параметры:
Параметр |
Тип данных |
Описание |
|
GUID |
Станция отгрузки. Значение параметра можно:
|
|
|
Вес отправления, передается в граммах. Максимально допустимый вес отправления:
Точки, не подходящие для данного отправления, автоматически скроются при передаче веса отправления. |
|
|
Срок доставки:
Отвечает за отображение срока доставки и указывается в днях. Виджет при запросе возможных дат доставки определяет дату границы нижнего интервала по формуле Если параметр не передан, подставляется значение по умолчанию |
|
|
Стоимость доставки:
Отвечает за отображение стоимости доставки в рублях. Обозначение валюты необходимо указывать вручную. Также можно проводить математические операции с полученной ценой доставки, например, во время акционных предложений. |
Модификация виджета после запуска
Изменение параметров загрузочного кода в запущенном виджете
Для внесения правок в настройки виджета не обязательно загружать его снова, можно изменить настройки в уже запущенном виджете.
Процесс изменения параметров работает следующим образом:
- На сайт добавляется функция
YaDelivery.setParams
, содержащая изменяемые параметры. - Сайт вызывает функцию виджета
YaDelivery.setParams
и передает в нее один или несколько параметров из загрузочного кода, которые необходимо изменить. - Список доступных параметров:
- Город (
city
) - Типы способа доставки (
type
) - Типы пунктов выдачи заказов (
is_yandex_branded
) - Доступные способы оплаты (
payment_method
) - Фильтр по способам оплаты (
payment_methods_filter
) - Отображать кнопку выбора ПВЗ(
show_select_button
) - Стоимость доставки (
delivery_price
) - Срок доставки (
delivery_term
)
- Город (
- Виджет валидирует передаваемые изменения на допустимость заданных значений.
- Виджет обновляет переданные параметры и начинает работать так, как будто в загруженном коде были указаны значения с изменениями.
Важно
Изменение параметра size
(размеры виджета) не предусмотрено.
Пример функции YaDelivery.setParams
:
YaDelivery.setParams({
city: "Санкт-Петербург",
delivery_price: "от 200",
show_select_button: false
})
- Важно предусмотреть расширяемость данной функции, то есть при добавлении новых параметров загрузочного кода они автоматически будут получать возможность изменения.
- Функция принимает параметры в таком же формате, как и при создании виджета.
Рестарт уже запущенного виджета
Принцип работы:
- Сайт повторно обращается к функции
createWidget
. - Виджет делает рестарт.
Существует несколько способов рестарта виджета:
-
Реализовать повторный перезапуск/исполнение всего загрузочного кода.
-
Убрать оберточную функцию
function(w)
, тогда функцияcreateWidget
станет глобальной и её можно вызывать и таким образом перезапускать виджет.Пример глобальной функции
createWidget
:function startWidget() { YaDelivery.createWidget({ containerId: 'delivery-widget', params: { city: "Москва", // Размеры виджета size:{ "height": "450px", "width": "100%" }, delivery_price: "от 100", delivery_term: "от 1 дня", show_select_button: true, filter: { // Тип способа доставки type: [ "pickup_point", "terminal" ], is_yandex_branded: false, payment_methods_filter: "or", // Способ оплаты payment_methods: [ "already_paid", "card_on_receipt" ] } }, }); } YaDelivery ? startWidget() : document.addEventListener('YaNddWidgetLoad', startWidget);
Получение данных из виджета
- Чтобы получать данные о точке, которую выбрал пользователь, нужно подписаться на событие
YaNddWidgetPointSelected
. Подписка на событие внесена в загрузочный код. - Событие
YaNddWidgetPointSelected
будет отправляться:show_select_button = false
— при каждом выборе пользователем точки ПВЗ или постамата в виджете;show_select_button = true
— при выборе любым из доступных способов нужного ПВЗ или постамата и только при нажатии на кнопку выбора ПВЗ.
Данные, передаваемые с событием:
id
— id;address.country
— cтрана;address.locality
— город;address.street
— улица;address.house
— дом;address.full_address
— полный адрес;address.comment
— комментарий.
Код подписки на событие:
// Подписка на событие
document.addEventListener('YaNddWidgetPointSelected', function (data){
// Обработка выбранных данных
// Данные о выбранной точке содержатся в параметре data
console.log(data.detail.id);
console.log(data.detail.address.full_address);
console.log(data.detail.address.country);
console.log(data.detail.address.locality);
console.log(data.detail.address.street);
console.log(data.detail.address.house);
console.log(data.detail.address.comment);
});
Примеры
Со всеми настройками
<script async src="https://ndd-widget.landpro.site/widget.js"></script>
<div id="delivery-widget"></div>
<!-- Код виджета -->
<script>
(function(w) {
function startWidget() {
w.YaDelivery.createWidget({
containerId: 'delivery-widget', // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
params: {
city: "Москва", // Город, отображаемый на карте
// Размеры виджета
size:{
"height": "450px", // Высота
"width": "100%" // Ширина
},
delivery_price: "от 100", // Сумма доставки
delivery_term: "от 1 дня", // Срок доставки
show_select_button: true, // Отображение кнопки выбора пункта выдачи заказа (false - скрыть кнопку, true - показать кнопку)
filter: {
// Тип способа доставки
type: [
"pickup_point", // Пункт выдачи заказа
"terminal" // Постамат
],
is_yandex_branded: false, // Тип пункта выдачи заказа (false - Партнерские ПВЗ, true - ПВЗ Яндекса)
payment_methods_filter: "or", // Фильтр по способам оплаты
// Способ оплаты
payment_methods: [
"already_paid", // Доступен для доставки предоплаченных заказов
"cash_on_receipt", // Доступна оплата наличными при получении
"card_on_receipt" // Доступна оплата картой при получении
]
}
},
});
}
w.YaDelivery
? startWidget()
: document.addEventListener('YaNddWidgetLoad', startWidget);
})(window);
</script>
Без расчета сроков и стоимости доставки
<script>
(function(w) {
function startWidget() {
w.YaDelivery.createWidget({
containerId: 'delivery-widget', // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
params: {
city: "Москва", // Город, отображаемый на карте при запуске
size:{ // Размеры виджета
"height": "450px", // Высота
"width": "100%" // Ширина
},
delivery_price: "от 100", // Стоимость доставки
delivery_term: "от 1 дня", // Срок доставки
show_select_button: true, // Отображение кнопки выбора ПВЗ
filter: {
type: [ // Тип способа доставки
"pickup_point", // Пункт выдачи заказа
"terminal" // Постамат
],
is_yandex_branded: false, // Тип пункта выдачи заказа
payment_methods: [ // Способ оплаты
"already_paid", // Доступен для доставки предоплаченных заказов
"card_on_receipt" // Доступна оплата картой при получении
]
payment_methods_filter: "or" // Фильтр по типам оплаты
}
},
});
}
w.YaDelivery
? startWidget()
: document.addEventListener('YaNddWidgetLoad', startWidget);
})(window);
</script>
С расчетом сроков и стоимости доставки
<script>
(function(w) {
function startWidget() {
w.YaDelivery.createWidget({
containerId: 'delivery-widget', // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
params: {
city: "Москва", // Город, отображаемый на карте при запуске
size:{ // Размеры виджета
"height": "450px", // Высота
"width": "100%" // Ширина
},
source_platform_station: "05e809bb-4521-42d9-a936-0fb0744c0fb3", // Станция отгрузки
physical_dims_weight_gross: 10000, // Вес отправления
delivery_price: (price) => price + " руб", // Стоимость доставки
delivery_term: 3, // Срок доставки
show_select_button: true, // Отображение кнопки выбора ПВЗ
filter: {
type: [ // Тип способа доставки
"pickup_point", // Пункт выдачи заказа
"terminal" // Постамат
],
is_yandex_branded: false, // Тип пункта выдачи заказа
payment_methods: [ // Способ оплаты
"already_paid", // Доступен для доставки предоплаченных заказов
"card_on_receipt" // Доступна оплата картой при получении
]
payment_methods_filter: "or" // Фильтр по типам оплаты
}
},
});
}
w.YaDelivery
? startWidget()
: document.addEventListener('YaNddWidgetLoad', startWidget);
})(window);
</script>