How to add a tab to the search form

By default, the Aviasales affiliate program search form may be accompanied by a tab for hotel search by Hotellook affiliate program. To learn more about it, see the article entitled Search form.

This article is devoted to the process of adding another tab and placing the widget of any Travelpayouts affiliate network advertising customer.

Preparing the search form

First of all, you need to get a full search form code. To get the code, deselect Short code in the form settings (for more information, see article entitled Editing search form code).

Example of search form code:

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

Place the resulting code on your website and check the correctness of the search form display. 

Additional tab

Now, let us proceed to adding the code of a new tab. After the closing tag </script> of the search form, add the following code (see a detailed description of the code mechanism and possible amendments to it below):

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

Pay attention to block:

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

It contains a code of widget you need to place in the additional tab. At that, it may contain not only the widget but also a banner or text. The main thing: the block needs to be placed between the tags <div class="widget-block"> ... </div>.

To change the text on the new tab, find the following section of code:

$('.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>');

You can set any tab name between the tags <span> Bus </span> (instead of Bus used in the example).

Link to code example: https://jsfiddle.net/jrbe7p92/.

Code analysis

This section will help you understand the mechanism of the code. It is useful if you need to change the work logics or add another tab.

Let us consider the parts of code.

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');
});

One needs to activate Flights tab (mewtwo-flights) on a click and show the plane ticket search form. Hotels (mewtwo-hotels) tab and additional tab (widget-block) are not active, and their content is hidden.

$('.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');
});

One needs to activate Hotels (mewtwo-hotels) tab on a click and show the hotel search form. Flights (mewtwo-flights) tab and additional tab (widget-block) are not active, and their content is hidden.

$('.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');
});
};

One needs to activate an additional tab (widget-block) and show its content. Flights (mewtwo-flights) tab and Hotels (mewtwo-hotels) tab are not active, and their content is hidden.

If you want to add the fourth tab, you can either get creative or contact the developer. At each stage, add the processing of another tab .mewtwo-tabs-tabs_list__item--count4 and create another step for displaying the content on a tab click. 

To change the design of the additional tab, edit the code in the following block:

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

Was this article helpful?

Have more questions? Submit a request