Skip to main content

Search Bar Widget

1.0.0
Widget
Try Now

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

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

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.

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.

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