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

По умолчанию форма поиска партнёрской программы Авиасейлс может быть дополнена вкладкой поиска отелей от партнёрской программы Hotellook. Подробнее об этом написано в статье Поисковая форма Aviasales и 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="https://c117.travelpayouts.com/content?promo_id=3873&shmarker=iddqd&location=USA&locale=en&bg_color=FFFFFF&font_color=333333&button_color=00a200&button_font_color=ffffff&button_text=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&powered_by=true" charset="utf-8" async="true"></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="//c91.travelpayouts.com/content?promo_id=4770&shmarker=78606&locale=en&currency=USD&layout=default&mode=train&departure-date=&arrival-date=&theme=white" 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://jsfiddle.net/jrbe7p92/

Разбор кода

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

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

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 -->

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос