| Dev Studio

Search Bar Widget - Configuration Options

The Search Bar widget allows site owners to display a full search bar including sections for hotel selection, date selection, occupancy, special codes, rates, and a search button. Each section is optional and can be included or hidden via configuration.

The hotel list section can be used to display a list of hotels for selection based on hotel names and IDs passed into the widget using the “hotelList” configuration parameter.

When the Date Selection area is clicked, it opens a live embedded calendar availability widget. The calendar widget can be independently configured using the same calendar configuration options supported by the Calendar Widget (http://developer.sabre.com/shs-widgets/calendar). The widget may also be configured to always display the calendar underneath the search bar, rather than expanding it on selection.

The Occupancy Selection area allows users enter the number of adults, number of children, child ages (if applicable) and number of rooms. When a user adds more than one room, occupancy selection for each room added is provided.

The “Add a Code” section allows users to enter promotion, group, and/or agency/IATA codes. The widget is flexible enough to allow any type code field to be collected, but SynXis specifically supports “promo” for Promotional and Corporate codes, “group” for Group Codes, and “agency” for agency/IATA codes.

The “Rates” section allows users to select from a specific list of Rate codes or Rate Filter codes configured by hoteliers. An array of rate names and codes to display for collection can be configured using the “rates” configuration.

The Search Button supports an on-search callback method and on-submit Event. The selections the user made on the search bar are passed to the callback method and event as a data object. The Search button will be disabled until all required data (dates, etc…) are selected by the guest.

A default on-search callback is provided that automatically redirects the user to the SynXis Booking Engine with the selected criteria.

Configuration Options

Note: The Search Bar Widget is actually a compound widget that uses other widgets internally, specifically the Best Price and Calendar Widgets. Links to the Calendar and Best Price JavaScript files are required in the HEAD section. The configuration options for those internal widgets can be set using the "calendar-props" and "best-price-props" parameters. See the Configuration tab for those widgets respectively for details on the properties supported for each.

Property	Type	Required	Default	Description
api	string	yes	-	Api Key
chain	string	yes	-	SynXis CRS Chain ID
hotel	string	yes	-	SynXis CRS Hotel ID
currency	string	yes	-	ISO Currency Code. Only products setup in SynXis CR with pricing in this currency will be considered in the price calculation.
locale	string	-	(browser locale)	Locale to use for number/currency format. Defaults to the guest's browser locale. ISO Code, e.g. "en-US"
env	enum	-	ccrs	The SHS environment from which to pull pricing: ccrs - CCRS Environment cuat - CUAT Environment
adults	number	-	1	The number of adults to preselect in the adults dropdown.
adults-min	number	-	1	Minimum number of adults that can be selected per room.
adults-max	number	-	4	Maximum number of adults that can be selected per room.
child	number	-	0	The number of children to preselect in the child dropdown.
child-min	number	-	0	Minimum number of children that can be selected per room.
child-max	number	-	3	Maximum number of children that can be selected per room.
rooms	number	-	1	The number of rooms preselected.
rooms-max	number	-	3	Maximum number of rooms that can be selected
start-date	string	-	-	An arrival date to preselect.
end-date	string	-	-	A departure date to preselect.
date-format	string	-	'DD MMM YYYY'	Date format to use for selected dates display. Format string should be compatible with the dayjs npm module: https://day.js.org/docs/en/display/format
best-price-props	JSON object	-	{}	A JSON Object (string) with configuration parameters to use for the Best Price Widget configuration that is displayed when isToggle=true. See the Best Price Widget Configuration page for supported values. Note that configuration options in the JSON string must be converted to Camel Case (e.g. "length-of-stay" must be specified as "lengthOfStay"). Example: best-price-props='{"lengthOfStay":2}'
calendar-props	JSON object	-	{}	A JSON Object (string) with configuration parameters to use for the Calendar Widget configuration that is used when the Calendar is displayed. See the Calendar Widget Configuration page for supported values. Note that configuration options in the JSON string must be converted to Camel Case (e.g. "length-of-stay" must be specified as "lengthOfStay"). Example: calendar-props='{"lengthOfStay":2}'
sections	JSON array of enum values	-	["dates", "occupancy", "codes", "submit"]'	JSON string representing an array of sections to display in the search bar, e.g. sections='["dates", "occupancy", "codes", "submit"]' hotels - Display a hotel select list. dates - Display the Date Selection section. occupancy - Display occupancy selectors codes - Display Special Codes section rates - Display Rate Filters section submit - Display Submit Button
calendar-visible	bool	-	-	Always show calendar visible underneath the search bar, rather than as a drawer that expands.
close-dropdowns-on-click-outside	bool	-	true	if true, auto-close drawers when a user clicks outside them.
is-toggle	bool	-	false	If true, the initial display of the search bar will be a Best Price Widget. When the button on the best price widget is clicked, then a full Search Bar will expand beneath the Best Price widget.
special-codes	JSON array of JSON objects	-	'[{"code": "promo", "name": "Promotion"},{"code": "group": "name": "Group"}]'	A JSON string containing objects that represent what Special Code fields to display. Each object should contain a "code" and a "name" field. The "code" field is the parameter name that will be used in the redirect URL. The "name" field is the display label for the textbox. SBE supports the codes listed below. Other codes may be added, will not be added to auto-generated SBE URL's unless the URL generation method is overridden. promo - used for both promo and corporate codes group - used for group codes agency - used for Agency/IATA codes
hotel-list	JSON array of JSON objects	-	-	A JSON string containing objects that represent hotels in the Hotel List dropdown. Each object should contain a "name" field and a "value" field. The "name" should contain the text displayed in the select dropdown (Hotel Name). The "value" should be the SynXis hotel id. Required if the "hotels" section is included in the segments parameter. The hotel id specified in the "hotel" parameter will be selected by default. e.g. '[{"name": "Barcelona Inn", "value": "45123"}, {"name": "Valley View Lodge", "value": "23434"}]'
rates	[{name: string, value: string},...]	-	-	A JSON string containing objects that represent rates in a rate selection menu if the "rates" segment is included. Each object should contain a "name" field and a "value" field. The "name" should contain the text displayed on the select dropdown (Rate Name). The "value" should be the SynXis rate code to filter by. Required if "rates" is used in the segments parameter. The rate specified in the "selected-rate" parameter (if included) will be selected by default.
selected-rate	string	-	-	If the "rates" section is used, the selected-rate parameter may include the rate code ("value" from the "rates" list) for a rate to be preselected on the widget. If omitted, no preselection will be made.
sbe-redirect	bool	-	true	If true, clicking on the best-price widget will redirect the guest to the SynXis Booking Engine using the same stay parameters set in the widget configuration. If false, the widget will not be clickable.
sbe-extra-params	JSON Array	-		A JSON Array of JSON objects containing name/value pairs to add as additional parameters to the SBE Redirect URL. e.g. '[{"name":"level","value":"chain"}]' Note in this example &level=chain will be added to the redirect URL.
sbe-custom-url	domain name	-	-	If the hotel uses a white label URL with SBE, the white label domain (including https://, but not including path info) should be specified here.
on-search	string	-	-	Name of global function triggered when the user clicks the Search button. A data object containing the selections users made on the search-bar is passed to the callback function as a single argument. Key/Value pairs included in the data object are: chain - chain code from the "chain" parameter hotel - the hotel id for the selected hotel in the hotel list if hotel list is shown or the value from the "hotel" parameter if hotel list is not shown. startDate - The selected start date in the calendar. endDate - The selected end date in the calendar. rooms - an Array of Objects containing the adult/child counts selected for each room. codes - an Object containing key/value pairs for each "code type" passed in the special-codes parameter. The key is the "code" from the configuration, and the value is the text entered by the user. e.g. {"promo": "enteredPromoCode", "group": "enteredGroupCode"} selectedRate - the configured "value" for the rate selected, if the "rates" segment is included and the user selected a rate.
labels	object	-	defaultLabels	Object containing label keys and values to override default labels. See Labels section below for JSON example containing all default label keys and values.

Default Labels

The following JSON String is a list of all labels used by the Search Bar Widget. Any or all of these may be translated or overridden using the “labels” parameter in the widget definition. Please note that updates for labels within the Calendar and Best Rate Widgets that are used internally by the Search Bar widget, can be altered in the "labels" section of the corresponding "calendar-props" and "best-price-props" parameters.

{
    "shs.widgets.searchbar.add": "Add",
    "shs.widgets.searchbar.remove": "Remove",
    "shs.widgets.searchbar.perNight": "/ per night",
    "shs.widgets.searchbar.pricesStarting": "Prices starting",
    "shs.widgets.searchbar.search": "Search",
    "shs.widgets.searchbar.withoutTax": "Excluding taxes and fees",
    "shs.widgets.searchbar.withTax": "Including taxes and fees",
    "shs.widgets.searchbar.showAvailability": "Show availability",
    "shs.widgets.searchbar.hideAvailability": "Hide availability",
    "shs.widgets.searchbar.selectDates": "Select dates",
    "shs.widgets.searchbar.selectRate": "Special rate",
    "shs.widgets.searchbar.selectHotel": "Select hotel",
    "shs.widgets.searchbar.checkOurHotel": "Check our hotels",
    "shs.widgets.searchbar.checkIn": "Check In",
    "shs.widgets.searchbar.checkOut": "Check Out",
    "shs.widgets.searchbar.separator": " / ",
    "shs.widgets.searchbar.selectRoomsAndGuests": "Select Rooms & Guests",
    "shs.widgets.searchbar.adults": "Adults",
    "shs.widgets.searchbar.children": "Children",
    "shs.widgets.searchbar.adult": "Adult",
    "shs.widgets.searchbar.child": "Child",
    "shs.widgets.searchbar.rooms": "Rooms",
    "shs.widgets.searchbar.room": "Room",
    "shs.widgets.searchbar.addACode": "Add a Code",
    "shs.widgets.searchbar.addRoom": "Add a Room",
    "shs.widgets.searchbar.removeRoom": "Remove",
    "shs.widgets.searchbar.promotionCode": "Promotion Code",
    "shs.widgets.searchbar.groupCode": "Group Code",
    "shs.widgets.searchbar.iataCode": "IATA Number",
    "shs.widgets.searchbar.codeApplied": "Code applied",
    "error.InvalidPromoOrCorporateCode": "Promotion code you entered is invalid",
    "error.InvalidGroupCode": "Group code you entered is invalid"
}

Events

The Search Bar widget supports one event fired when the search button is clicked, and data submitted. A “detail” object is included in the event data containing the same data object passed into the on-submit callback method.

Event Name: sabre-shs-widgets-search-bar__on-submit

window.addEventListener('sabre-shs-widgets-search-bar__on-submit', data => console.log(data.detail));