Поисковая форма 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),

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

Как создать форму поиска авиабилетов (новая версия)

По просьбам партнеров мы создали новый шаблон формы поиска авиабилетов. Используя этот шаблон, можно создать полностью уникальную форму для своего сайта.

Данная форма поддерживает jQuery 1.х и 2.х.

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

Скачать архив с шаблоном.

Что входит в архив с шаблоном:

  • images — папка с иконками, используемыми в форме поиска;
  • few_forms.html — файл-шаблон, в котором расположен код с примерами различных видов форм поиска;
  • jquery.js — файл, необходимый для работы шаблона;
  • jquery.twidget.js — файл с JS-кодом формы поиска. В этом же файле расположен пример кода для локализации полей формы поиска;
  • reset.css, style.css — файлы стилей.

Вызов формы поиска в коде сайта

Для размещения формы поиска на странице сайта используется следующий код:

<div id="twidget" class="twidget-container"> </div>
<script>
$('#twidget').twidget({
locale: 'en',
marker: 1234,
default_origin: 'SVO',
default_destination: 'ekat',
default_hotel_location: 'rio'
});
</script>

где twidget — параметр вызова кода формы поиска.

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

При создании формы поиска в неё могут быть переданы следующие параметры:

  • locale — язык формы поиска, влияет также на язык результата поиска.
  • marker — партнёрский маркер.
  • default_origin — пункт отправления по умолчанию. Допустимо использовать как IATA-код, так и название города. При этом может быть введено неполное название — функция автокомплита подставит требуемый город.
  • default_destination — пункт назначения по умолчанию. Допустимо использовать как IATA-код, так и название города.
  • default_hotel_location (для вкладки поиска отелей) — город по умолчанию в форме поиска отелей.
  • type — тип формы поиска:
    • avia — только авиабилеты;
    • hotel — только отели;
    • avia_hotel — комбинированная форма (для переключения используются вкладки, значение по умолчанию).
  • open_in_new_tab — открывать результат поиска в новой вкладке (по умолчанию true).

Пример реализации формы поиска

На Github создан проект, в котором находятся примеры форм поиска: https://github.com/tp-search-form. Для каждого репозитория создана страница-пример. Вы можете изменять любые параметры и видеть результат этих изменений. Примеры форм поиска:

Полезные советы

При использовании формы поиска может возникнуть следующая проблема: при переходе на Aviasales или White Label не будет автоматически запускаться поиск. Чтобы это исправить, нужно закомментировать код container.find('input[name=«with_request»]').remove();. Пример:

/* remove with_request input from jetradar form */ 
if(this.settings.locale == 'en') { 
/* container.find('input[name="with_request"]').remove();*/ 
container.find('input[name="oneway"]').remove(); 
}

jquerytwidget.zip (800 КБ)

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

По умолчанию форма поиска партнёрской программы Авиасейлс может быть дополнена вкладкой поиска отелей от партнёрской программы 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 -->
  1. Справочный центр Travelpayouts
  2. Партнёрские инструменты
  3. Инструменты Aviasales