Room Types Gadget

Default Values

autoTickedNights:     true,
bookingButtonMode:    true,
colourScheme:         { primary:'#10a204',
collapseRooms:        false,
dayOffset:            0,
defaultAdults:        2,
defaultChildren:      0,
defaultCurrency:      'AUD',
defaultDate:          null,
defaultDaysOut:       3,
defaultGridColumns:   10,
defaultNights:        3,
defaultProperty:      null,
defaultPromotionCode: null,
demoMode:             false,
errorUrl:             win.location.href,
gridLabel:            'Room Rates',
hotelID:              null,
inSiteCheck:          null,
layout:               'horz',
maxAdults:            10,
maxChildren:          9,
maxImages:            6,
maxNights:            62,
minNights:            1,
minNightsFilter:      2,
multiPropsExpanded:   false,
multiPropsInfoLink:   false,
multiPropsOneGrid:    false,
newWindow:            false,
privateApartment:     false,
promoteSpecials:      false,
ratePlanFilter:       false,
returnUrl:            win.location.href,
separateGrid:         null,
showCurrency:         true,
showGrid:             true,
showImage:            false,
showInclusions:       true,
showPromotionCode:    true,
showPropertyDetails:  false,
showMaxGuests: true,
showRoomImages:       true,
showRoomTypeDetails:  false,
specialsOnly:         false,
specificRatePlan:     null,
useAnalytics:         false,
webID:                27281,
groupShowAll:      false

This gadget display the room types for one or more properties. Please note the demonstration version below:

There are a whole bunch of options you can implement - there is the list with their defaults in the right-hand sidebar.

The code that kicked off this gadget looks like:

autoTickedNights [bool]

Set to true to have the gadget use the legacy behaviour - pre-ticked nights. Set to false to have the gadget leave all nights unticked. It is then up to the user to choose their desired nights. This option also removes the night drop-down in the tools at the top.

bookingButtonMode [bool]

Set to true to enable booking button mode. This lets users choose a check-in and date then sends them the ResOnline booking button information page.

colourScheme [obj]

Set the hex values in this object to change the gadget's colour scheme.

collapseRooms [bool]

Display a header for each different room type that can be expanded to reveal the rate plans that belong to each room type

dayOffset [int]

The minimum days out from today that a customer can select to book.

defaultAdults [int]

The default number of adult guests selected.

defaultChildren [int]

The default number of children selected.

defaultCurrency [str]

A string of the ISO code for the currency you would like the gadget to default to. The gadget currently supports the following ISO codes:

[ 'Australian Dollar',          'AUD' ]
[ 'Canadian Dollar',            'CAD' ]
[ 'Chinese Yuan',               'CNY' ]
[ 'Euro',                       'EUR' ]
[ 'Fiji Dollar',                'FJD' ]
[ 'Ghana Cedis',                'GHS' ]
[ 'Hong Kong Dollar',           'HKD' ]
[ 'Indonesian Rupiah',          'IDR' ]
[ 'Japanese Yen',               'JPY' ]
[ 'Malaysian Ringgit',          'MYR' ]
[ 'Mauritian Rupee',            'MUR' ]
[ 'New Zealand Dollar',         'NZD' ]
[ 'Phillipine Peso',            'PHP' ]
[ 'Pound Sterling',             'GBP' ]
[ 'Russian Ruble',              'RUB' ]
[ 'Singapore Dollar',           'SGD' ]
[ 'South Africa Rand',          'ZAR' ]
[ 'South Korean Won',           'KRW' ]
[ 'Thai Baht',                  'THB' ]
[ 'US Dollar',                  'USD' ]

defaultDate [str]

Sets the default landing date of the gadget. String format is: 'yyyy-mm-dd'.

defaultDaysOut [int]

The default date from today when a customer first lands on the page.

defaultGridColumns [int]

The number of columns in the price grid. This will not limit a customer from choosing a greater night's stay.

defaultNights [int]

The default nights that a customer will have in the nights drop-down.

defaultProperty [hotelID]

If a multi-property grid that isn't in multiPropsOneGrid mode, this setting will cause the gadget to load the default immediately, instead of waiting for choice from a customer.

defaultPromotionCode [str]

Sets the Promo Code Field to the value specified.

demoMode [bool]

Sets the gadget into demo mode, as per the one on this page. Stops the booking buttons from proceeding to the secure payment page, and shows the demo alert.


Set this to an email address, and instead of displaying Sold it will display a mailto: link with the email address supplied and the word 'Enquire' in place of the 'Sold' text.

errorUrl [str]

The url the booking page will push to if there is an error.

gridLabel [str]

Change the text in the top left-hand cell of the grid.

hotelID [hotelID or object]

If passed a single hotelID, the gadget will remain in single property mode. If passed an object with name:id key value pairs, the gadget will go into multi-property mode. See the example below:

// Single property
hotelID: 34604
// Multi property
hotelID: {
    'Shangri-La Hotel':34604,
    'The Como Melbourne':34048

inSiteCheck [str]

If set to a string of the URL you wish to push customers to, the gadget will go into a checker mode (most useful for a site-wide checker gadget that points to a page with a full gadget). Pass it the URL you wish it to push to. NOTE: if you want customers to have their changes in the checker passed to the full gadget, you need to initialise the two gadgets in the same way, ie: $('myGadget').roomTypesGadget();

layout [str]

Most useful to pass it a 'vert' value for a checker (see inSiteCheck) gadget that has to fit vertically in a sidebar.

maxAdults [int]

Set it to the maximum number of adults that your customers can book at your property.

maxChildren [int]

Set it to the maximum number of children that your customers can book.

maxImages [int]

If showImage is on, this limits the number of thumbnails the gadget displays.

maxNights [int]

Set to limit the highest number number of nights and columns the gadget will attempt to display.

minNights [int]

Set it to the minimum number of nights that your customers can book.

minNightsFilter [int]

If the ratePlanFilter is on, this will cause min nights room types that are 'x' distant from the customers selected nights to be shown.

multiPropsExpanded [bool]

If you have a multi-property gadget, and wish to expand all the room types at once, enable this setting.

multiPropsInfoLink [bool]

If you have a multi-property gadget, and would like users to be able to get more information about the property from ResOnline, set to true.

multiPropsOneGrid [bool]

If you have a multi-property gadget, and wish to show all the properties in the grid at once, enable this setting.

newWindow [bool]

If you would prefer the booking click to cause a new window/tab, enable this setting.

privateApartment [bool]

If true, enables the gadget to look up data for private apartments. This is required if your property's classification is only private apartment.

promoteSpecials [bool]

Set to true if you want the and special deals to be promoted at the top of the table.

ratePlanFilter [bool]

If enabled, the gadget will attempt to hide room types that aren't suitable to a customer's request.

separateGrid [str]

If you pass this a valid CSS selector, the gadget will put the grid into the dom element you specify.

showCurrency [bool]

Set to false if you wish to hide the currency chooser.

showGrid [bool]

If set to false, the gadget won't show a grid immediately, but will wait for customer input.

showImage [bool]

If you wish to show some thumbnails of the property, enable this setting.

showInclusions [bool]

Set to false if you wish to not show the inclusions hover.

showPromotionCode [bool]

Set to false if you wish to hide the Promo Code input field, defaults to false.

showPropertyDetails [str || obj]

If you want the gadget to insert the property information (single property gadget only) into your page, pass it either: just a selector for a div on your page ('#propDetails'), or, an object that contains: { header:'#propHeader', body:'#propDetails' }

showMaxGuests [bool]

Set to false if you don't want to show Maxiumum guests column in the grid.

showRoomImages [bool]

Set to false if you don't want to show room types images in the grid.

showRoomTypeDetails [str]

Pass a selector (eg: '#roomTypesDetails') to make the gadget show descriptions for the room types.

specialsOnly [bool]

If you want the gadget to enable a "specials only" filter to only show your specials. This option requires that the "ratePlanFilter" option be set to true also.

specificRatePlan [array]

If you would like to only show arbitrary rate plans, pass an array of room type ID's.

useAnalytics [str]

If you want the gadget to tell your Google Analytics about customer behaviour, pass your 'UA-XXX-XXXX' account ID here.

webID [int]

If you have an affiliate ID, you must place this here.

groupShowAll [bool]

If you have a multi-property gadget, and wish to show all the properties in the grid when choose "All" option on the property drop-down in the tools at the top, enable this setting.