Documentation

Create a div element with the specied id "bookingForm"

<div id="bookingForm"></div>

The div can establish parameters that make the form display differently

<div id="bookingForm" data-chain="MARCONFORT" data-lang="es" data-origin="CORP" data-hotelcode="GRECO"></div>

Accepted parameters

Parameter	Description	Accepted values	Default value
chain	Chain code	SANDOS, MARCONFORT	SANDOS
lang	Language code	es, en	es
origin	Booking origin	Code that indicates the booking origin, as created in Sandos Backoffice	BOOKING
hotelcode	Dingus hotel code	MONACO, PAPAGAYO,...	null
theme	Theme name	sandos, marconfort, eco, beach, lifestyle	sandos
formmode	Form display mode	splash, embedded, topbar	splash
disable-open-destinations	If set to true, the destination is fixed and cannot be changed	true/false	false
old-version	Allows to show the old booking search button	null/"true"/"false"	null
old version = null	Form has A/B testing mode, with two buttons but only one shown
old version = "true"	Form has old version, without the guest selector
old version = "false"	Form has new version, with the guest selector
force-booking-visible	Allows to show the booking form, event in mobile device	bool	false

Environment URLS

Link the below pages in your page.

Url	Description	Environment
http://bookingform-staging.sandos.com/js/main.js	Javascript	pre
http://bookingform-staging.sandos.com/css/main.css	Hoja de estilos	pre
https://bookingform.sandos.com/js/main.js	Hoja de estilos	prod (TBD)
https://bookingform.sandos.com/js/main.css	Javascript	prod (TBD)

Form visibility

Booking Form - Mobile

In mobile, by default the component loads but remains hidden in the page.

To keep it always visible for mobile, you need to set the force-booking-visible = true property
To be in charge of when to show it or hide it, you need to:
1. Send a bookingFormTrigger event to change the visibility form hidden to visible or viceversa
2. Listen to the toggle event on the element with id="sandos-show-book-button" on your page.

Note By combining those events, you could then show a "book now" button that hides to show the form, or that is visible when the form is hidden

Booking Form - Desktop

In desktop, by default the component is displayed immediately after is is loaded in the page However, it is still possible to change this behaviour by sending the toggle event to the component to change the visibility.

Note No toggle event will be sent to the element with id="sandos-show-book-button"

Booking widgets - Desktop

When the page loads, it looks for elements which have the class bookingWidget. All elements which are in the page will have the widget available, and it will be always visible. Only one can be displayed at every moment, so the customer page needs to load only one at a time.

If you want to add widgets to the page dynamically (after it is first loaded), you will need to call our "async" action: loadWidgetAsync({
containerClass: 'parent-where-the-widget-will-load',
checkIn, checkOut,
chain, hotelCode, promoCode,
theme, language, origin
})

Detail on how to send and to receive the form events

To toggle the form visibility:
$('.bookingFormTrigger').click();
To toggle the form mode between splash / embedded / topbar:
$('.bookingModeTrigger').trigger('toggleFormMode', newFormMode);
To receive the event on the id="sandos-show-book-button" element (on your page):
1 Add the listener to the button with the ID
<button id="sandos-show-book-button" onclick="listenToFormEvent()">
2 Add your logic in the "listenToFormEvent" function

A/B testing switching

New version to current version

$('.bookingform-search-old').show(); $('.bookingform-search').hide(); $('.distribution-wrapper').css('visibility', 'hidden');

Current version to new version

$('.bookingform-search').show(); $('.bookingform-search-old').hide(); $('.distribution-wrapper').css('visibility', 'visible');

A/B testing switching for async widgets

New version to current version

jQuery(document).ready(function () { const triggerElem = jQuery('#sandos-widget-loaded'); if (triggerElem) { triggerElem.on('widget-loaded', function (event, widgetClass) { // Note: With "widgetClass" you can identify which widget is loading jQuery('.bookingform-search-old').show(); jQuery('.bookingform-search').hide(); jQuery('.distribution-wrapper').css('visibility', 'hidden'); }); } });

Current version to new version for async widgets

jQuery(document).ready(function () { const triggerElem = jQuery('#sandos-widget-loaded'); if (triggerElem) { triggerElem.on('widget-loaded', function (event, widgetClass) { // Note: With "widgetClass" you can identify which widget is loading jQuery('.bookingform-search-old').hide(); jQuery('.bookingform-search').show(); jQuery('.distribution-wrapper').css('visibility', 'visible'); }); } });