Примеры работы виджета
Создание инфовиджета
Под инфовиджетом будем понимать виджет, который работает для оповещения клиентов о том, что возможна доставка в определенном городе с выводом информации о пунктах выдачи.
<script type="text/javascript">
var infoWidjet = new IVOLTWidjet ({
defaultCity: 'Москва', // по умолчанию будет показываться Москва
choose: false, // не будем отображать кнопку выбора пункта выдачи
link: 'infowidjet' // привяжем виджет к указанной ссылке
});
</script>
<div id='infowidjet'>Здесь после загрузки появится виджет</div>
Стоит заметить, что в данном примере параметры элемента, в который вписан виджет задан в CSS-стилях. Полный текст данного виджета можно посмотреть в файле example4-1.html
Виджет для карточки товара
В карточке товара поставим виджет, схожий в работе с инфовиджетом: там нельзя выбрать пункт выдачи заказов, нельзя выбрать тип доставки, однако, чтобы не загромождать страницу, он будет показываться во всплывающем окне.
<script type="text/javascript">
var productWidjet = new IVOLTWidjet ({
yandex_key: 'f12960b3-63e7-44cf-998f-e1beeb9a6e33',
defaultCity: 'Екатеринбург', // доставка в Екатеринбург
choose: false, // не будем отображать кнопку выбора ПВЗ
hidedelt: true, // скроем возможность выбора типа доставки
products: [7105], // установим данные о товаре для корректного расчета стоимости доставки
popup: true, // включим режим всплывающего окна
onCalculate: calculated
});
productWidjet.getReady(function () {
productWidjet.calculate();
});
// сделаем так, чтобы при расчете доставки до ПВЗ обновлялась информация в блоке с деталями доставки
function calculated(wat){
var deliveryTxt = 'Доставка в город '+ wat.cityName + "\n";
if(typeof wat.deliveries === 'object') {
for(var d in wat.deliveries) {
if(wat.deliveries.hasOwnProperty(d)) {
deliveryTxt += "\n" + '<div class="delivery" data-id="' + wat.deliveries[d].id + '"' + ">\n";
for(var p in wat.deliveries[d].profiles) {
var profile = wat.deliveries[d].profiles[p];
deliveryTxt += '<div class="delivery-name" data-id="' + profile.id + '">' + profile.name + "</div>\n";
deliveryTxt += '<div class="delivery-price" data-id="' + profile.id + '">' + profile.price + "</div>\n";
deliveryTxt += '<div class="delivery-term" data-id="' + profile.id + '">' + profile.term + "</div>\n";
}
deliveryTxt += "</div>\n";
}
}
}
ipjq('.delivery_block').html(deliveryTxt);
}
</script>
Здесь поставим блок с информацией о доставке:
<div>
<div class="delivery_block">Доставка рассчитывается...</div>
<a href='javascript:void(0)' onclick='productWidjet.open()'>Показать ПВЗ</a>
</div>
Полный код данного примера находится в файле example4-2.html
Виджет для оформления заказа
Главная особенность виджета оформления заказа – это возможность выбора ПВЗ для сохранения данных о выборе, а также стоимости и сроках доставки. Кроме того, в этом примере установим минимальную стоимость доставки равную 500 рублей, если доставка платная. А если стоимость доставки более 500, то округлим ее в большую сторону до сотни.
<script type="text/javascript">
var orderWidjet = new IVOLTWidjet({
yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
popup: true,
defaultCity: 'Казань',
products: [7105], // установим данные о товарах из корзины
onReady : function(){ // на загрузку виджета отобразим информацию о доставке до ПВЗ
ipjq('#linkForWidjet').css('display','inline');
},
onChoosePVZ : function(info){ // при выборе ПВЗ: запишем номер ПВЗ в текстовое поле и доп. информацию
ipjq('[name="chosenPost"]').val(info.id);
ipjq('[name="addresPost"]').val(info.PVZ.Address);
// расчет стоимости доставки
var price = info.price;
if(price !== 'Бесплатно') {
price = (price < 500) ? 500 : Math.ceil(price / 100) * 100;
}
ipjq('[name="pricePost"]').val(price);
ipjq('[name="timePost"]').val(info.term);
orderWidjet.close(); // закроем виджет
}
});
</script>
<p> <a href='javascript:void(0)' onclick='orderWidjet.open()'>Выбрать ПВЗ</a> </p>
<div id="linkForWidjet" style="display: none;">
<p>Выбран пункт выдачи заказов: <input type='text' name='chosenPost' value=''/></p>
<p>Адрес пункта: <input type='text' name='addresPost' value=''/></p>
<p>Стоимость доставки: <input type='text' name='pricePost' value=''/></p>
<p>Примерные сроки доставки: <input type='text' name='timePost' value=''/></p>
</div>
Полный код этого примера находится в файле example4-3.html
Виджет для витрины
Рассмотрим витрину сайта, где можно добавлять товары в корзину и необходимо обновлять информацию об итоговой стоимости доставки.
<script type="text/javascript">
var sectionWidjet = new IVOLTWidjet ({
yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
link: "forpvz",
defaultCity: 'Казань', // будем считать, что клиент из Казани
onCalculate: calculated
});
// сделаем так, чтобы при расчете доставки обновлялась информация в блоке с деталями доставки
function calculated(wat){
if(typeof wat.deliveries === 'object') {
for(var d in wat.deliveries) {
if(wat.deliveries.hasOwnProperty(d)) {
for(var p in wat.deliveries[d].profiles) {
var profile = wat.deliveries[d].profiles[p];
if(profile.id === 'pickup') {
ipjq('#delPricePVZ').html((profile.price !== 'Бесплатно' ? profile.price + ' руб.' : profile.price));
}
else {
ipjq('#delPriceCourier').html((profile.price !== 'Бесплатно' ? profile.price + ' руб.' : profile.price));
}
}
}
}
}
}
// напишем обработчик для добавления товара в корзину.
function goodAdded(id){
id = parseInt(id);
if(id > 0) {
sectionWidjet.products.add(id);
return true;
}
return false;
}
</script>
<div>Стоимость доставки вашей корзины на ПВЗ: <span id='delPricePVZ'>рассчитывается…</span></div>
<div>Стоимость доставки вашей корзины курьером: <span id='delPriceCourier'>рассчитывается…</span></div>
<div style="display: flex; justify-content: center; align-items: center;">
<div class="block">
<p>Однофазный стабилизатор напряжения Энергия Voltron 10000 (HP)</p>
<span>Цена - 20 750 руб.</span><br/>
<button onclick="goodAdded(7105)" >В корзину</button>
</div>
<div class="block">
<p>Однофазный стабилизатор напряжения Энергия Voltron 15000 (HP)</p>
<span>Цена - 35 650 руб.</span><br/>
<button onclick="goodAdded(7106)" >В корзину</button>
</div>
<div class="block">
<p>Однофазный стабилизатор напряжения Энергия Voltron 20000 (HP)</p>
<span>Цена - 46 200</span><br/>
<button onclick="goodAdded(7107)" >В корзину</button>
</div>
</div>
<div id="forpvz"></div>
Рассмотрим витрину сайта, где можно добавлять товары в корзину и необходимо обновлять информацию об итоговой стоимости доставки.