Для добавления функции поиска и оформления авиабилетов на вашем ресурсе необходимо выполнить следующие шаги:
<div id="__biletix__wl__"></div>
<script id="__biletix__wl__script" type="text/javascript" src="https://ps.biletix.ru/static/wl/build/biletix_wl.min.js" async></script>
¶ Если необходимо результаты поиска показывать на другой страничке, можно добавить параметр data-page-results:
<div id="__biletix__wl__" data-page-results="/search_results/"></div>
¶ По умолчанию в дополнительных услугах выбран отказ от услуги. Если необходимо включить предвыбор рекомендованных услуг, то в data-config добавляется параметр refusingServices: false:
<div id="__biletix__wl__" data-config='{ refusingServices: false }'></div>
Также доступны следующие параметры data-config:
currencyCode: "RUR" - код валюты ("RUR", "USD", "EUR")
showReverseRouteSwitch: true - показать переключатель, который может менять пункты отправления местами
preselectServices: true - для каждой доп.услуги выбран какой-либо вариант (полная услуга/минимальная/отказ)
refusingServices: true - в допуслугах предвыбран отказ от услуг
currencyAndLangSelectorShow: true - показать переключатель валют/языка (вверху справа относительно формы поиска)
refusingServicesList: ["insurance"] - возможность отключить предвыбор определённых групп допуслуг
genderPreselected: false - параметр для отключения предвыбора пола и отключения автоопределения пола
¶ Решение использует систему «плагинов». Например, чтобы подключить пиксел Adara, необходимо добавить соответствующее расширение в параметр data-plugins:
<div id="__biletix__wl__" data-plugins="adara"></div>
¶ В параметрах from и to можно указать наименования пунктов отправления и прибытия, которые будут показаны перед поиском (пункты по умолчанию), либо указать что они должны быть пустыми (если параметры отсутствуют, то выводятся пункты Москва - Санкт-Петербург):
<div id="__biletix__wl__" from="Минск" to="Новосибирск"></div>
// пример:
window.addEventListener("wl:payForm:willAppear", function(e)
{
console.log("На экране появилась форма оплаты.");
});
wl:searchForm:didAppear wl:searchResults:willAppear wl:searchResults:didAppear wl:selectedVariant:willAppear wl:selectedVariant:didAppear wl:payForm:willAppear wl:payForm:didAppear wl:booking:end wl:earlyBooking:end wl:createOrder:end wl:setPaymentMethod:end wl:ticket:begin wl:ticket:end wl:getOrderStatus:end wl:cancelOrder:end
1. Получить доступные значения для фильтрации
window.addEventListener("wl:filter:willAppear", function(e)
{
/*
Событие будет вызывано после получения результатов поиска, в e.detail лежит словарь:
{
"ak_list": [ // список доступных авиакомпаний
{
"ak_id": "SU", // IATA код авиакомпании
"ak_name": 'ОАО "Аэрофлот"',
"logo": "R0lGODlhGwAXAOY..." // логотип в формате png, закодированный в base64: <img src="data:image/png;base64,LOGO"...
},
...],
"transfers_count_list": [0, 1, 2], // количество пересадок
"max_waytime": 12, // максимальное время в пути
"min_waytime": 2 // минимальное время в пути
}
*/
});
2. Применить фильтрацию
var filter =
{
"ak_id": "...", // IATA код авиакомпании
"tc": ..., // количество пересадок
"time":
{
"duration": { "min": ..., "max": ... }, // длительность перелета
"departureFrom": { "min": ..., "max": ... }, // время отправления
"departureTo": { "min": ..., "max": ... } // время прибытия
}
};
// фильтрацию так же можно применять по любому из параметров отдельно, например только по АК:
// filter = { "ak_id": "S7" };
window.dispatchEvent(new CustomEvent("wl:filters:willFilter", { detail: filter }));
Имеется возможность сформировать url для GET-запроса и открыть его в новой вкладке.
Для этого достаточно сформировать url вида:
Описание параметров:
Код примера (демо):
var serialize = function(obj)
{
var str = [];
for(var p in obj)
if (obj.hasOwnProperty(p))
{
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
};
function OpenInNewTab(url)
{
var win = window.open(url, '_blank');
win.focus();
}
jQuery(function($)
{
setTimeout(function()
{
var biletixWlSearchForm = $("#biletix__wl__search_form");
$("#newTabButton").on("click", function() {
// объект с параметрами поиска
var formData = {from: "VAR", to: "MOW", dep_date: "2015-09-25", ret_date: "2016-03-25",
adults: 1, children: 0, infants: 0, selected_class: "E", only_direct: "N", oneway: true};
// изменяем некоторые параметры
formData.from = biletixWlSearchForm.find(".city_input")[0].value;
formData.to = biletixWlSearchForm.find(".city_input")[1].value;
formData.dep_date = biletixWlSearchForm.find(".biletix__wl__search_form__date input")[0].value.split(".").reverse().join("-");
formData.ret_date = biletixWlSearchForm.find(".biletix__wl__search_form__date input")[1].value.split(".").reverse().join("-");
// формируем url и открываем его в новой вкладке
var url = "/demo/wl/#/search/?" + serialize(formData);
OpenInNewTab(url);
});
}, 2000);
});
Диплинк имеет вид:
Описание параметров:
Имеется возможность сделать произвольную форму поиска, которая будет отправлять запрос к WL.
Обращаем Ваше внимание, что в этом случае пункты отправления и назначения необходимо передавать в виде кодов ИАТА аэропортов.
Код примера (демо):
var serialize = function(obj)
{
var str = [];
for(var p in obj)
if (obj.hasOwnProperty(p))
{
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
};
function OpenInNewTab(url)
{
var win = window.open(url, '_blank');
win.focus();
}
jQuery(function($)
{
setTimeout(function()
{
var searchForm = $("#search_form");
$("#newTabButton").on("click", function() {
// объект с параметрами поиска
var formData = {from: "VAR", to: "MOW", dep_date: "2015-09-25", ret_date: "2016-03-25",
adults: 1, children: 0, infants: 0, selected_class: "E", only_direct: "N", oneway: true};
// изменяем некоторые параметры
formData.from = searchForm.find(".city_input")[0].value;
formData.to = searchForm.find(".city_input")[1].value;
formData.dep_date = searchForm.find(".search_date")[0].value;
formData.ret_date = searchForm.find(".search_date")[1].value;
formData.oneway = formData.ret_date == "";
// формируем url и открываем его в новой вкладке
var url = "/demo/wl/#/search/?" + serialize(formData);
OpenInNewTab(url);
});
}, 2000);
});
Имеется возможность продлять сессию на шаге ввода данных пассажиров.
При этом не проводится повторный поиск вариантов (если сессия не устарела, время её жизни — около 15 минут).
Как это работает: