События виджета
В процессе работы виджета возникает 4 типа событий, на которые можно подписать функцию-обработчик, чтобы позволить получать данные из виджета:
- загрузка виджета,
- расчет доставки,
- выбор ПВЗ,
- выбор курьерской доставки.
Пример с использованием нескольких обработчиков событий указан в файле example3-1.htm
Загрузка виджета (onReady)
Событие срабатывает, когда виджет загрузил все стили, скрипты, карты, а также – информацию о городах и пунктах выдачи заказов. Оно означает, что уже можно пользоваться методами виджета. Учтите, что html и разметка карт на этом моменте еще могут не подгрузиться. В событии нет никаких передаваемых параметров. Для работы с этим событием необходимо в параметре указать название функции-обработчика и описать выполнение этой функции:
<script type="text/javascript">
var widjet = new IVOLTWidjet({
yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
defaultCity: 'Омск',
link: 'forpvz',
onReady: startWidget
});
function startWidget() {
alert('Виджет загружен');
}
</script>
Создание обработчика данного события можно увидеть в примере example3-5-1.html
Расчет доставки (onCalculate)
Событие срабатывает, когда виджет получает данные о стоимости и сроках доставки.
Событие передает в функцию-обработчик объект вида:
{"deliveries": <Объект доставок>, "city": <Код города из базы voltmarket>, "cityName": <Название города>}
Пример такого объекта в формате JSON:
{
"city": "907",
"cityName": "Ростов-на-Дону",
"deliveries": {
"delivery_voltmarket": {
"id": "delivery_voltmarket",
"profiles": [
{
"id": "courier",
"name": "ВольтМаркет: Курьер",
"price": "Бесплатно",
"term": "11 Февраля"
},
{
"id": "pickup",
"name": "ВольтМаркет: Самовывоз",
"price": "Бесплатно",
"term": "Сегодня"
}
]
},
"sdek": {
"id": "sdek",
"profiles": [
{
"id": "pickup",
"name": "СДЭК: самовывоз",
"price": "Бесплатно",
"term": "2-3 дня"
}
]
}
}
}
Для создания обработчика можно использовать следующий код:
<script type="text/javascript">
var widjet = new IVOLTWidjet({
yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
defaultCity: 'auto',
link: 'forpvz',
onCalculate: onCalculateHandler
});
function onCalculateHandler(wat)
{
console.log('Расчет доставки ', wat);
var str = 'Доставка в город '+ wat.cityName + "\n";
if(typeof wat.deliveries === 'object') {
for(var d in wat.deliveries) {
if(wat.deliveries.hasOwnProperty(d)) {
str += "\n" + 'id: ' + wat.deliveries[d].id + "\n";
for(var p in wat.deliveries[d].profiles) {
var profile = wat.deliveries[d].profiles[p];
str += 'profile: ' + profile.id + "\n";
str += 'name: ' + profile.name + "\n";
str += 'price: ' + profile.price + "\n";
str += 'term: ' + profile.term + "\n\n";
}
}
}
}
alert(str);
}
</script>
В данном примере при каждом расчете доставки будет выводиться сообщение о всех доступных профилях доставки, а также в консоль браузера будет выводиться текст “Расчет доставки” и содержимое объекта с параметрами доставки.
Пример подписки можно посмотреть в файле example3-5-2.html
Выбор ПВЗ (onChoosePVZ)
Событие возникает, когда покупатель выбирает ПВЗ кнопкой «Выбрать» в подробном описании ПВЗ. Событие передает в функцию-обработчик объект, пример которого показн ниже в формате JSON:
{
"id": "volt_17",
"city": "907",
"cityName": "Ростов-на-Дону",
"price": "Бесплатно",
"term": "Сегодня",
"deliveryCode": "delivery_voltmarket",
"deliveryId": "delivery_voltmarket:pickup",
"deliveryName": "ВольтМаркет: Самовывоз",
"deliveryProfile": "pickup",
"PVZ": {
"Name": "ВольтМаркет-РНД",
"WorkTime": "Пн 08:00-17:00; Вт-Пт 09:00-18:00; Сб-Вс выходные",
"Address": "г. Ростов-на-Дону, Индустриальная улица 9",
"Phone": "8 863 303-42-53",
"Note": "",
"cX": "39.811568",
"cY": "47.280940"
}
}
Для формирования обработчика этого события можно использовать следующий код:
<script type="text/javascript">
var widjet = new IVOLTWidjet({
yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
defaultCity: 'auto',
link: 'forpvz'
});
widjet.binders.add(choosePVZ, 'onChoosePVZ');
function choosePVZ(wat) {
alert('Доставка в город ' + wat.cityName +
"\nдо ПВЗ с кодом: " + wat.id + ', цена ' + wat.price
);
console.log('Выбран ПВЗ ', wat);
}
</script>
В данном примере при выборе ПВЗ (кнопка выбора ПВЗ должна отображаться, т.е. параметр choose = true) выводится сообщение, в котором указан город, код пункта выдачи заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.
Пример создания обработчика данного события можно посмотреть в файле example3-5-3.html
Выбор курьерской доставки (onChooseCourier)
Событие возникает, когда покупатель выбирает доставку курьером для определённого города.
Событие передает в функцию-обработчик объект, пример которого приведен ниже в формате JSON:
{
"city": "Ростов-на-Дону",
"deliveryCode": "delivery_voltmarket",
"deliveryId": "delivery_voltmarket:courier",
"deliveryName": "ВольтМаркет: Курьер",
"deliveryProfile": "courier",
"price": "Бесплатно",
"term": "11 Февраля"
}
Ниже указан пример создания обработчика для этого события. В примере выводится сообщение, в котором указан город, срок доставки заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.
<script type="text/javascript">
var widjet = new IVOLTWidjet({
yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
defaultCity: 'auto',
link: 'forpvz',
onChooseCourier: onChooseCourier
});
function onChooseCourier(wat) {
alert('Выбрана доставка курьером в город ' + wat.cityName + "\n" +
'цена ' + wat.price + "\n" +
'срок ' + wat.term
);
console.log('Выбрана доставка курьером ', wat);
}
</script>
Весь код примера создания обработчика данного события можно посмотреть в файле example3-5-4.html