Поисковая форма Aviasales (старая версия)

Общая информация

На партнёрской платформе Travelpayouts представлены различные инструменты. В этой статье рассказывается о настройке и размещении поисковых форм для авиабилетов.

Для создания формы поиска авиабилетов воспользуйтесь специальным конструктором. Для этого войдите в Личный кабинет партнера, перейдите в раздел Программы, выберите бренд Aviasales, откройте вкладку Инструменты и кликните по ссылке Поисковые формы.

В открывшемся разделе нажмите кнопку Создать новую форму для создания и Редактировать для редактирования формы.

В открывшемся окне настройте внешний вид и содержимое формы поиска.

mceclip1.png

Если вам требуется форма поиска фиксированной ширины, установите требуемое значение в поле Ширина. Чтобы сделать форму поиска адаптивной (т. е. автоматически подстраивающейся под размер страницы), установите галку в чекбокс Ширина 100%.

mceclip3.png

  • Цветовая схема — выбор схемы оформления формы.
  • Тип модуля — виды поиска в форме (только авиа, только отели, оба вида поиска).
  • Показать логотип — показать/скрыть логотип Aviasales.
  • Радиус скругления, px — радиус скругления углов формы поиска.
  • Вкладка по умолчанию — какая вкладка (Авиабилеты или Отели) будет открыта в форме по умолчанию.

mceclip4.png

  • Имя формы — название формы, которое отображается в списке форм.
  • Город вылета по умолчанию — город вылета, который отображается в форме поиска при заходе пользователя на страницу с формой (влияет только на авиа-форму).
  • Город прилёта по умолчанию — город прилёта, который отображается в форме поиска при заходе пользователя на страницу с формой (влияет только на авиа-форму).
  • Дата вылета (авиа) — дата, установленная по умолчанию в одноименное поле формы поиска авиабилетов.
  • Дата обратного вылета (авиа) — дата возвращения, установленная по умолчанию в одноименное поле формы поиска авиабилетов.
  • Город/Отель по умолчанию — город или отель, которые будут указаны в форме поиска отелей при заходе пользователя на страницу с формой.
  • Дата прибытия (отели) — дата, установленная по умолчанию в одноименное поле формы поиска отелей.
  • Дата выезда (отели) — дата выселения из отеля, установленная по умолчанию в одноименное поле формы поиска отелей.
  • Язык — язык формы.
  • Валюта — валюта, в которой отображается стоимость билетов в результатах поиска.
  • Авиабилеты. Домен — домен, который используется для поиска авиабилетов.
  • Отели. Домен — домен, который используется для поиска отелей.
  • Дополнительный маркер (Sub ID) — с помощью дополнительного маркера в статистике удобно разделять потоки посетителей из разных источников.
  • Открывать в — выбор способа открытия результатов поиска.
  • Включить чекбокс «Показать отели» — если включено, то пока идет поиск билетов, пользователю отображается окно с прогресс-баром поиска и дополнительной информацией об отелях и ссылкой на их поиск.
  • Добавить реферальную ссылку — добавляет под формой поиска ссылку Поиск от Aviasales. Подробнее в статье Реферальная программа.
  • Код для размещения на сайте — код формы, который необходимо разместить на странице сайта.

Обратите внимание! Код формы поиска уже содержит ваш партнёрский маркер в зашифрованном виде, дополнительно ничего добавлять не надо.

В большинстве случаев достаточно настроек, приведённых на странице. Для более тонкой настройки доступно изменение значений полей формы поиска непосредственно в её коде. Более подробную информацию об этом смотрите в статье Расширенный код поисковой формы.

Чтобы отслеживать соотношение прибыльных кликов к общему числу переходов при размещении форм на разных сайтах или страницах, добавьте уникальный Sub ID — и он отобразится в Статистике в Личном кабинете.

Если вам требуется уникальная форма, свёрстанная полностью в вашем дизайне, используйте HTML-код. Для настройки требуются знания HTML и CSS. Информация об HTML-коде формы поиска находится здесь.

Расширенный код поисковой формы Авиасейлс

Чтобы получить расширенный код формы поиска Авиасейлс и иметь возможность отредактировать её содержимое вне личного кабинета, снимите галку Компактный код для вставки в настройках формы поиска.

mceclip5.png

Код формы примет вид:

<script charset="utf-8" type="text/javascript">
   window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
   window.TP_FORM_SETTINGS["0fcc950b8759491dfa491f3a878ad2fa"] = {
"handle": "0fcc950b8759491dfa491f3a878ad2fa",
"widget_name": "Test form",
"border_radius": "2",
"additional_marker": null,
"width": 940,
"show_logo": true,
"show_hotels": true,
"form_type": "avia_hotel",
"locale": "en_us",
"currency": "usd",
"sizes": "default",
"search_target": "_blank",
"active_tab": "avia",
"search_host": "search.jetradar.com",
"hotels_host": "search.hotellook.com",
"hotel": "",
"hotel_alt": null,
"avia_alt": null,
"retargeting": true,
"trip_class": "economy",
"depart_date": null,
"return_date": null,
"check_in_date": null,
"check_out_date": null,
"no_track": false,
"powered_by": true,
"source_id": 170736,
"id": 276955,
"marker": XXXXX,
"origin": {
"name": ""
},
"destination": {
"name": ""
},
"color_scheme": {
"name": "white_blue",
"icons": "icons_blue",
"background": "#ffffff",
"color": "#000000",
"border_color": "#c1c1c1",
"button": "#1b9ed9",
"button_text_color": "#ffffff",
"input_border": "#ffffff"
},
"hotels_type": "hotellook_host",
"best_offer": {
"locale": "en_us",
"currency": "usd",
"marker": 11501,
"search_host": "search.jetradar.com",
"offers_switch": false,
"api_url": "//minprices-jetradar.aviasales.ru/minimal_prices/offers.json",
"routes": []
},
"hotel_logo_host": null,
"search_logo_host": null,
"hotel_marker_format": null,
"hotelscombined_marker": null,
"sources": [
{
"id": 498,
"name": "Personal"
}
],
"responsive": false,
"height": 245
};
</script>
<script charset="utf-8" src="//www.travelpayouts.com/widgets/0fcc950b8759491dfa491f3a878ad2fa.js?v=2259" async></script>

Параметры формы поиска

  • handle — уникальный id формы (изменять нельзя!).
  • widget_name — название формы.
  • border_radius — радиус скругления границ.
  • additional_marker — дополнительный маркер (Sub ID).
  • width — ширина формы.
  • show_logo — если true, отображать логотип Aviasales/Hotellook.
  • show_hotels — если true, отображать вкладку поиска отелей.
  • form_type — тип формы:
    • avia — отображается только форма поиска авиабилетов;
    • hotel — отображается только форма поиска отелей;
    • avia_hotel — комбинированная форма с двумя вкладками, для авиабилетов и отелей.
  • locale — язык формы (нельзя изменить без пересохранения формы в личном кабинете, так как переводы прописываются в js-код формы).
  • multi_city — если true, активирует возможность создания сложного маршрута.
  • currency — валюта, в которой выводится цена билетов и отелей.
  • sizes — размер формы (не используется).
  • search_target — как открывать поиск (_blank — в новой вкладке, _self — в этом же окне).
  • search_in_iframe — true — открыть результат поиска на странице со встроенным White Label, false — стандартное поведение, результат поиска открывается на домене/странице, указанном в поле search_host.
  • active_tab — имя вкладки, активной по умолчанию.
  • search_host — сайт, на котором открывается результат поиска авиабилетов (здесь может быть указан ваш White Label). Обратите внимание! Чтобы результат поиска открылся на странице сайта со встроенным iframe-кодом White Label, необходимо создать и настроить White Label, разместить его iframe-код на требуемой странице и указать адрес этой страницы в данном поле. Подробнее в этой статье.
  • hotels_host — сайт, на котором открывается результат поиска отелей (здесь также может быть указан ваш White Label или ссылка на страницу с iframe-кодом White Label).
  • hotel — информация об отеле, выбранном по умолчанию.
    • name — название города, нахождения отеля;
    • location — название локации, нахождения отеля;
    • hotels_count — количество отелей в указанном городе;
    • search_id — служебный параметр;
    • search_type — тип поиска (по названию отеля, по названию города);
    • country_name — название страны, нахождения отеля.
  • trip_class — класс перелета по умолчанию.
  • depart_date — дата вылета, которая будет указана в форме поиска по умолчанию.
  • return_date — дата возвращения, которая будет указана в форме поиска по умолчанию.
  • check_in_date — дата заселения, которая будет указана в форме поиска по умолчанию.
  • check_out_date — дата выселения, которая будет указана в форме поиска по умолчанию.
  • powered_by — добавляет под формой поиска ссылку Поиск от Aviasales. Подробнее в статье Реферальная программа.
  • id — служебный параметр.
  • marker — партнёрский маркер.
  • origin — город отправления.
    • name — название города;
    • iata — IATA-код города (IATA-код указывается буквами верхнего регистра, например MOW).
  • destination — город назначения.
    • name — название города назначения;
    • iata — IATA-код города (IATA-код указывается буквами верхнего регистра, например MOW).
  • color_scheme — цветовое оформление формы.
  • hotels_type — служебный параметр.
  • best_offer — настройки блока Лучшее предложение (в данный момент не используется).
  • hotel_logo_host — куда ведёт ссылка из отельного логотипа.
  • search_logo_host — куда ведёт ссылка из авиа-логотипа.
  • hotel_marker_format — служебный параметр.
  • hotelscombined_marker — служебный параметр.
  • responsive — является ли форма респонсивной (подстраивается ли под разрешение экрана).
  • height — высота форма поиски.

Обратите внимание! При работе с расширенным кодом формы все изменения необходимо вносить непосредственно в том месте, где данный код встроен. В случае с компактным кодом достаточно один раз встроить код формы на страницу, после чего все изменения, вносимые на сайте travelpayouts.com, будут автоматически отображаться в форме поиска.

Как задать даты в расширенной форме поиска

В этом разделе приводится пример настройки расширенной формы поиска авиабилетов, чтобы в ней были предустановлены дата отправления и возвращения.

В компактной форме поиска дата отправления обычно равна текущей дате (если вы не изменили это в настройках). В то же время, в расширенной форме поиска поля дат по умолчанию пусты. Исправить это можно, заменив переменные depart_date и return_date на следующий код:

 "depart_date": new Date().toISOString().slice(0, 10),
 "return_date": new Date(new Date().getTime()+(7*24*60*60*1000)).toISOString().slice(0, 10),

В этом случае дата отправления будет по умолчанию равна текущей дате. А дата возвращения — плюс семь дней.

Как добавить вкладку в форму поиска

По умолчанию форма поиска партнёрской программы Авиасейлс может быть дополнена вкладкой поиска отелей от партнёрской программы Hotellook.

Здесь рассказывается о том, как добавить ещё одну вкладку и разместить на ней виджет любого тревел-бренда партнёрской платформы Travelpayouts.

Подготовка формы поиска

Для начала вам нужно получить полный код формы поиска. Для этого снимите галку Компактный код для вставки в настройках формы (подробнее см. в статье Редактирование кода поисковой формы).

Пример кода формы поиска:

<script charset="utf-8" type="text/javascript">
window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
window.TP_FORM_SETTINGS["985437b11bec577746af671c9c8d812c"] = {
"handle": "985437b11bec577746af671c9c8d812c",
"widget_name": "Для доп вкладки",
"border_radius": "2",
"additional_marker": null,
"width": 620,
"show_logo": true,
"show_hotels": true,
"form_type": "avia_hotel",
"locale": "en",
"currency": "usd",
"sizes": "default",
"search_target": "_blank",
"active_tab": "avia",
"search_host": "search.jetradar.com",
"hotels_host": "search.hotellook.com",
"hotel": "",
"hotel_alt": "Hotellook offers great deals and discounts on hotels worldwide",
"avia_alt": null,
"retargeting": true,
"trip_class": "economy",
"depart_date": null,
"return_date": null,
"check_in_date": null,
"check_out_date": null,
"no_track": false,
"powered_by": true,
"source_id": null,
"id": 239793,
"marker": 78606,
"origin": {
"name": ""
},
"destination": {
"name": ""
},
"color_scheme": {
"name": "white_blue",
"icons": "icons_blue",
"background": "#ffffff",
"color": "#000000",
"border_color": "#c1c1c1",
"button": "#1b9ed9",
"button_text_color": "#ffffff",
"input_border": "#ffffff"
},
"hotels_type": "hotellook_host",
"best_offer": {
"locale": "en",
"currency": "usd",
"marker": 78606,
"search_host": "search.jetradar.com",
"offers_switch": false,
"api_url": "//minprices-jetradar.aviasales.ru/minimal_prices/offers.json",
"routes": []
},
"hotel_logo_host": null,
"search_logo_host": "jetradar.com",
"hotel_marker_format": null,
"responsive": false,
"height": 305
};
</script>
<script charset="utf-8" src="//www.travelpayouts.com/widgets/985437b11bec577746af671c9c8d812c.js?v=2103" async></script>

Разместите полученный код на вашем сайте и проверьте, что форма поиска отображается корректно.

Добавление дополнительной вкладки

Теперь перейдём к добавлению кода новой вкладки. Сразу после закрывающего тега </script> формы поиска, добавьте следующий код (ниже мы детально рассмотрим, как он работает и что можно изменить):

<script charset="utf-8" src="//www.travelpayouts.com/widgets/7d691de1732eecbd8b36df155619492e.js?v=2083" async></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>


<!-- START widget for a tab-->

<div class="widget-block"><script src="//tp.media/content?promo_id=4578&shmarker=11501&campaign_id=130&trs=1607&locale=en&powered_by=true&border_radius=5&plain=false&show_logo=true&color_background=%23f5d361&color_button=%235a9854" charset="utf-8"></script></div>
<!-- END widget for a tab-->

<!-- START script for adding a tab with an advertiser -->

<script>
window.onload = function() {
$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a class="widget-click"><span> Bus </span</a></li>');
$('.widget-block').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
});

$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').addClass('mewtwo-tabs-tabs_list__item--active');
});

$('.widget-click').click(function(e){
e.preventDefault();
$('.widget-block').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};
</script> 

<!-- END script for adding a tab with an advertiser -->

<!-- START style settings for a new tab -->

<style>
.widget-block{
display: none;
}

.mewtwo-widget section.remove-w{
display: none !important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item span {
color: #000000 !important;
LINE-HEIGHT: 50px !important;
width: 100%!important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item:last-child {
width: 100px !important;
text-align: center !important;
}
</style>

<!-- END style settings for a new tab -->

Обратите внимание на блок:

<!-- START widget for a tab-->
<div class="widget-block"><script src="//tp.media/content?promo_id=4578&shmarker=11501&campaign_id=130&trs=1607&locale=en&powered_by=true&border_radius=5&plain=false&show_logo=true&color_background=%23f5d361&color_button=%235a9854" charset="utf-8"></script></div>
<!-- END widget for a tab-->

В нём размещается код виджета, который вы хотите выводить на дополнительной вкладке. При этом там может быть не только виджет, но и баннер или какой-то текст. Главное, чтобы он находился внутри тегов <div class=«widget-block»> … </div>.

Чтобы изменить текст на новой вкладке, найдите в коде следующий участок:

$('.mewtwo-tabs_list').append('<li class=«mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item-count3 mewtwo-tabs-tabs_list__item»><a class=«widget-click»><span> Bus </span></a></li>');

Между тегами <span> Bus </span> вы можете указать любое название для вкладки (вместо Bus из примера).

Пример кода можно посмотреть по ссылке: https://codepen.io/barcovsky/pen/poaXZKY.

Разбор кода

Этот раздел предназначен для лучшего понимания того, что происходит в коде. Он будет полезен, если вы захотите изменить логику работы или добавить ещё одну вкладку.

Рассмотрим код по частям.

window.onload = function() {
$('.widget-block').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
});

При клике на вкладку Flights (mewtwo-flights) сделать её активной и отобразить форму поиска авиабилетов. Вкладка Hotels (mewtwo-hotels) и дополнительная (widget-block) неактивны и их содержимое скрыто.

$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').addClass('mewtwo-tabs-tabs_list__item--active');
});

При клике на вкладку Hotels (mewtwo-hotels) сделать её активной и отобразить форму поиска отелей. Вкладка Flights (mewtwo-flights) и дополнительная (widget-block) неактивны и их содержимое скрыто.

$('.widget-click').click(function(e){
e.preventDefault();
$('.widget-block').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};

При клике на дополнительную вкладку (widget-block) сделать её активной и показать содержимое. Вкладка Flights (mewtwo-flights) и Hotels (mewtwo-hotels) неактивны и их содержимое скрыто.

Если вы захотите добавить четвёртую вкладку, вам нужно будет проявить смекалку или обратиться к разработчику. В каждый этап добавьте обработку ещё одной вкладки .mewtwo-tabs-tabs_list__item-count4 и создать ещё один шаг по отображению содержимого при клике на эту вкладку.

Чтобы изменить оформление дополнительной вкладки, отредактируйте код в блоке:

<!-- START style settings for a new tab -->

<style>
.widget-block{
display: none;
}

.mewtwo-widget section.remove-w{
display: none !important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item span {
color: #000000 !important;
LINE-HEIGHT: 50px !important;
width: 100%!important;
}

.mewtwo-widget--7d691de1732eecbd8b36df155619492e .mewtwo-tabs-tabs_list__item:last-child {
width: 100px !important;
text-align: center !important;
}

</style>

<!-- END style settings for a new tab -->