Utilización de los widgets

Para utilizar los widgets es necesario colocar una capa vacía en su plantilla HTML, con una CLASS concreta. Esta será la capa contenedora donde se renderizará el widget. Puede haber más de una capa en la misma página con configuraciones de widget distintos.

<div class="bookingWidget"></div>

Luego es necesario cargar el javascript y los css del plugin.

Entorno Descripción Url
Pre/Staging Javascript //bookingwidgets-staging.sandos.com/js/main.js
Pre/Staging Css //bookingwidgets-staging.sandos.com/css/main.css
Prod/Live Javascript //bookingwidgets.sandos.com/js/main.js
Prod/Live Css //bookingwidgets.sandos.com/css/main.css

Importante: si se utilizan los widgets conjúntamente con el bookingform, es importante que primero se cargue el javascript del bookingform, y luego el del bookingwidget.

Es aconsejable añadir un hash del fichero en la carga del CSS o Javascript para que no haya problems de caché con el navegador. Ejemplo:

<script type="text/javascript" src="//bookingwidgets.sandos.com/js/main.js?f7d9906c619276441b63"></script>

Es posible pasar parámetros al widget a través del dataset del div. Ejemplo:

<div 
    class="bookingWidget" 
    data-widget="2" 
    data-lang="en" 
    data-coupon="true" 
    data-theme="t2017_eco"
    data-hotelcode="GRECO" 
    data-chain="SANDOS" 
    data-session="fxvb6wle59kqgl4oopvn4fsmijz18b5p"
    data-origin="BOOKING">
</div>

Parámetros permitidos:

Parámetro Descripción Valor por defecto
widgetTipo de widget. Actualmente sólo hay 2. Es un número: 1, 2, 3...1
themeThema visual. Actualmente hay: t2017_eco, t2017_beach, t2017_lifestylet2017_eco
langCódigo de idioma (es, en)es
couponBooleano que indica si mostrar o no el campo de código promocional.false
hotelcodeCódigo de hotelnull
chainCódigo de cadena (SANDOS|MARCONFORT)SANDOS
sessionId de sesión única por usuario.null
originCódigo del orígen de la venta.BOOKING

Widgets disponibles

Número Descripción
1 Formulario de disponibilidad se piden fechas y código de promoción.
2 Formulario de disponibilidad donde hay los distintos tipos de búsqueda. Sólo Hotel, Hotel + Vuelo, Hotel + Tren. Se piden fechas y promo code. Muestra el precio desde del hotel.
3 Formulario de disponibilidad donde hay los distintos tipos de búsqueda. Sólo Hotel, Hotel + Vuelo, Hotel + Tren. Se piden fechas y promo code. Muestra el precio desde del hotel. Formato horizontal.

Carga asíncrona

Es posible renderizar un widget de forma asíncrona dentro de cualquier contenedor. Para ello, es necesario llamar al siguiente método:

window.loadWidget(classNameCoontainer, widgetType, visualTheme, language, hotelCode, chainCode, sessionId, origin, cuponActive)

Un ejemplo concreto:

<button onClick="window.loadWidget('container', '1', 't2017_eco', 'es', 'GRECO', 'SANDOS', 'fxvb6wle59kqgl4oopvn4fsmijz18b5p', 'BOOKING', 'true')">Load</button>
<h1>Widget 2 con theme t2017_eco</h1>