How to configure the tabs
By default, widget tabs is equals to the search page but you can change aspect, position, hide/show activities and duplicate tab activities with different configurations.
Define tabs to appear in widget
The attribute data-search-widget can hold tabs you want to show and respective order, like this:
<div data-search-widget="lodge,flights,packages"></div>
List of activities available:
lodgeinsuranceflightsservicespackagesrentacartransfers
Create a duplicated tab
It's simple only need to repeat activity in widget declaration.
<div data-search-widget="lodge,flights,packages,lodge"></div>
Change second lodge tab template
<!-- tab index = 0 , 1 , 2 , 3 -->
<div data-search-widget="lodge,flights,packages,lodge"></div>
Create a configuration group for tab index 3 (second lodge tab). Configuration group is represented with attribute data-tab-target="3" and respective tab index value.
<!-- tab index = 0 , 1 , 2 , 3 -->
<div data-search-widget="lodge,flights,packages,lodge">
<div data-tab-target="3"></div>
</div>
Insert all configurations (modified templates and tab parameters) inside the element <div data-tab-target="3"></div>.
Example: Create a Lisbon Hotels tab
Widget base definition:
<!-- tab index = 0 , 1 , 2 , 3 -->
<div data-search-widget="lodge,flights,packages,lodge"></div>
Change the second lodge tab title
First we need the corresponding template, for this open page of all tabs templates, and find the search-lodge-tab-head-template, this is the template we want. Copy template source, past inside the element <div data-tab-target="3"> and change the title to 'Lisbon Hotels'.
<!-- tab index = 0 , 1 , 2 , 3 -->
<div data-search-widget="lodge,flights,packages,lodge">
<div data-tab-target="3">
<!-- template lodge header -->
<script
type="text/template"
data-mvc-template="search-lodge-tab-head-template"></script>
</div>
</div>
Configure some parameters
It's the same for all search activities, find JSON Object and replace all values you want.
List of JSON Objects for each search activity:
Lodge JSON Object:
{
"geoTo": "",
"geoToValue": "",
"dateFrom": "",
"dateTo": "",
"infrastructureName": "",
"classification": "",
"foodPlan": "",
"immediateAvailability": false,
"paxSelection": [
{
"children": [],
"adults": "1"
}
]
}
For this example, we want to change the geo area of the lodge search form and rooms configurations.
Inside group configurations index 3 insert part of JSON Object we want to replace. In this case change geoTo to Lisbon, geoToValue to 44599 (it's a id of Lisbon area) and change paxSelection to add two rooms, in the first add one adult and second add two adults and one infant.
<!-- tab index = 0 , 1 , 2 , 3 -->
<div data-search-widget="lodge,flights,packages,lodge">
<div data-tab-target="3">
<!-- template lodge header -->
<script
type="text/template"
data-mvc-template="search-lodge-tab-head-template"></script>
<!-- lodge form parameters -->
<script type="text/json" data-mvc-json="parameters">
{ "geoTo": "Lisbon", "geoToValue": "44599",
"paxSelection":[
{"adults": "1", "children": []},
{"adults": "2", "children": ["0"]}
]
}
</script>
</div>
</div>
Apply some template changes
Change form title "Hotels Search" to "Lisbon Hotels Search" and hide 'To' field because it is always 'Lisbon':
<!-- tab index = 0 , 1 , 2 , 3 -->
<div data-search-widget="lodge,flights,packages,lodge">
<div data-tab-target="3">
<!-- template lodge header -->
<script
type="text/template"
data-mvc-template="search-lodge-tab-head-template"></script>
<!-- lodge form parameters -->
<script type="text/json" data-mvc-json="parameters">
{ "geoTo": "Lisbon", "geoToValue": "44599",
"paxSelection":[
{"adults": "1", "children": []},
{"adults": "2", "children": ["0"]}
]
}
</script>
<!-- template lodge form -->
<script type="text/template" data-mvc-template="search-lodge-tab-body-template"></script>
</div>
</div>
Note: More information about change templates here.