Permitirá realizar disponibilidades en base a unos criterios: hotel / destino / temática, huéspedes, fecha de entrada y salida, y descuentos.


Hay que tener en cuenta que el código de sistema del motor puede ser B2C, que a su vez se divide en HPH (escritorio/tablet) y MPH (móvil), B2B y CCH. Cuando la web tenga un componente de login B2B/Call Center, únicamente se usará este código de sistema (B2B o CCH) independientemente del dispositivo por el que acceda el usuario. Si la web no tiene componente de login B2B/Call Center, el motor será B2C, por lo que habrá que pasarle al motor como parámetro el código de sistema correspondiente al dispositivo, HPH para escritorio y tablet, y MPH para móvil.


Cuando en la web exista el componente de login B2B/Call Center, el motor recuperará automáticamente el sistema configurado en dicho componente. Se puede ver en el ejemplo de HTML comentado.


Cuando system es MPH (móvil) la visualización del motor es a pantalla completa y puede mostrarse/ocultarse mediante la función pasada por el parámetro toggleDisplay. La ‘X’ del motor lo ocultará y en la parte web deberá haber la lógica que vuelva a mostrarlo por ejemplo haciendo click en un botón.


Parámetros*

Principales

Parámetro

Descripción

Ejemplo

webSessionId*

Identificador único de sesión web. Se usará para mantener la sesión del usuario entre componentes y páginas.

01CDA38719E74937A2F275757ABA34EE

view

Valor fijo “Searcher”

Searcher

bookingEngine

Código de motor

2

currency

Divisa

EUR

language*

Idioma

es

system*

Código de sistema (HPH o MPH)

HPH

availabilityUrl

Página del proceso de reserva

/bet0.html

container

Id de la etiqueta HTML que será el contenedor del componente

app-container

tracking*

Objeto con información de tracking


toggleDisplay

Función JS que solo se llamará cuando 'system' sea 'MPH' para mostrar/ocultar el motor

toggleDisplay

searcherBehaviour

Objeto opcional con el comportamiento del buscador al cargar


navigation*

Objeto con información de navegación


searcherDefaultValues*

Objeto opcional con los valores por defecto del buscador



Objeto tracking

Parámetro

Descripción

Ejemplo

gtm*

Identificador de Google Tag Manager

GTM-TEST


Objeto searcherBehaviour 

Parámetro

Descripción

Ejemplo

openCalendar

Abre automáticamente el calendario del motor al cargar

true


Objeto navigation

Parámetro

Descripción

Ejemplo

ipAddress*

Ip del usuario

172.21.34.74

countryCode*

País

ES

domain*

Dominio de la web

demo.new.hotetec.com

referrer*

De donde se llega a la web

https://www.otraweb.com

landingPage*

Primera página a la que se accede

https://demo.new.hotetec.com

userAgent*

User-Agent del navegador

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44

device*

Dispositivo (desktop, tablet, mobile)

desktop

metaSearcherCode*

Código de 3 letras que indica el sistema del que viene la petición

TVG

utm*

Array de objetos con los utm necesarios.

El formato de cada objeto será:
{“code”: code, “value”: value}

[

                {"code": "utm_campaign", "value": ["blogpost"]},

                {"code": "utm_medium", "value": ["social"]},

                {"code": "utm_source", "value": ["facebook"]}

            ]



Objeto searcherDefaultValues

Parámetro

Descripción

Ejemplo

areaCode*

Código de zona

ESBAL03

hotelCode*

Código de hotel

49426

thematicCode*

Código de temática

BEACH

dateFrom*

Fecha de entrada

2022-07-23T00:00:00Z

dateTo*

Fecha de salida

2022-07-26T00:00:00Z

fareCode*

Código de tarifa

30125

roomCode*

Código de habitación

DBL#STD

mealPlanCode*

Código de régimen

BB

occupancyCode*

Ocupación. Formato O@Adultos-Niños-0. La ‘O’ del principio y el ‘0’ del final son fijos. Solo es posible indicar una habitación

O@3-1-0

promotionalCode*

Código promocional por defecto

BLACK_FRIDAY_23


* Será necesario sustituir los parámetros que no son fijos por los valores necesarios en cada momento en función del tipo de búsqueda a realizar.


Ejemplo del HTML comentado con información necesaria


<script>
    // Función JS que solo se llamará cuando 'system' sea 'MPH' para mostrar/ocultar el motor
    function toggleDisplay(){
        // Mostrar u ocultar el motor
    }

    // Variable que solo existirá cuando haya un componente de login B2B/Callcenter en la misma página
    var searcherSystemCode = localStorage.getItem('systemCode');
    // Según el dispositivo habrá que usar: HPH - Escritorio/Tablet o MPH - Móvil.
    var system = "HPH";
    // Este código se usará siempre y cuando no haya un login B2B/Callcenter en la misma página, en ese caso se cogerá de la variable anterior (que se genera automáticamente en ese componente)
    if (searcherSystemCode != null && searcherSystemCode != "") {
       system = searcherSystemCode;
    }

    var bookingEngine = "2";
    localStorage.setItem('bookingEngine', bookingEngine);

    // Parámetros componente
    window.parameters = window.parameters || {};
    window.parameters.bookingEngine = {
        webSessionId: "01CDA38719E74937A2F275757ABA34EE",
        view: "Searcher",
        bookingEngine: bookingEngine,
        currency: "EUR",
        language: "es",
        system: system,
        availabilityUrl: "disponibilidad-proceso-completo.html", // IMPORTANTE! En entorno productivo debería ser una ruta absoluta o relativa, como "/disponibilidad-proceso-completo.html". Ahora está así para que funcione correctamente en estos ejemplos 
        container: "app-container",
        tracking: {
            gtm: "GTM-TEST"
        },
        toggleDisplay: toggleDisplay, // Función JS que solo se llamará cuando 'system' sea 'MPH' para mostrar/ocultar el motor
        searcherBehaviour: {
            openCalendar: true
        },
        navigation: {
            ipAddress: "172.21.34.74",
            countryCode: "ES",
            domain: "zafiro.new.hotetec.com",
            referrer: "https://www.otraweb.com",
            landingPage: "https://zafiro.new.hotetec.com",
            userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44",
            device: "desktop",
            metaSearcherCode: "TVG",
            utm: [
                {"code": "utm_campaign", "value": ["blogpost"]},
                {"code": "utm_medium", "value": ["social"]},
                {"code": "utm_source", "value": ["facebook"]}
            ]
        },
        searcherDefaultValues: {
            areaCode: "",
            hotelCode: "49426",
            thematicCode: "",
            dateFrom: "2022-07-23T00:00:00Z",
            dateTo: "2022-07-26T00:00:00Z",
            fareCode: "",
            roomCode: "",
            mealPlanCode: "",
            occupancyCode: "O@3-1-0",
            promotionalCode: ""
        }
    };

    if(typeof gethTtScript != 'function'){
        window.gethTtScript = function(source){
            var script = document.createElement('script');
            var prior = document.getElementsByTagName('script')[0];
            script.async = 1;
            script.src = source;
            prior.parentNode.insertBefore(script, prior);
        };
    }


    var genericManifestAndVendorsLoaded = genericManifestAndVendorsLoaded || false;
    if (!genericManifestAndVendorsLoaded) {
        window.gethTtScript("https://hotel.new.hotetec.com/components/js/vendors.js");
        window.gethTtScript("https://hotel.new.hotetec.com/components/js/manifest.js");
        genericManifestAndVendorsLoaded = true;
    }
</script>

<div id="app-container">

   <script> window.gethTtScript("https://hotel.new.hotetec.com/components/booking-engine/js/main.js");

   </script>



</div>

<style>
    /* Contenedor del motor */
    #app-container {
        display: flex;
        justify-content: center;
        padding: 24px;
    }
</style>


Evento - Modificar valores del motor

Es posible modificar los valores del motor mediante un evento de JavaScript, de esta forma podemos hacer que haciendo click en un botón o enlace se actualice el buscador con los parámetros que deseemos.


const searcherValues = {
      areaCode: '',
      hotelCode: '45501',
      thematicCode: '',
      occupancyCode: 'O@2-0-0',
      dateFrom: '2022-12-20T00:00:00Z',
      dateTo: '2022-12-22T00:00:00Z',
      fareCode: '',
      roomCode: '',
      mealPlanCode: '',
      occupancyCode: 'O@3-1-0',
      promotionalCode: "BLACK_FRIDAY_23"
};
   window.dispatchEvent(new CustomEvent("eventSearcherValues", {detail: searcherValues}));


Evento - Abrir el motor con autoposicionamiento en el viewport

Con el siguiente evento de JavaScript puede abrirse el motor y además hacer que se autoposicione en el viewport. Es posible usar este evento justo después del anterior (Modificar valores del motor) para que después de actualizar los valores del motor, se abra automáticamente. Por ejemplo con los precios desde.


const searcherBehaviour = {
      openCalendar: true,
      scrollIntoView: true,
      scrollTopOffset: 0 // Se puede modificar para que se vea exactamente con el offset que se quiera 
};
   window.dispatchEvent(new CustomEvent("eventSearcherBehaviour", {detail: searcherBehaviour}));



Opción cuando el motor no sea visible en el viewport de la página

De forma manual, se podría hacer que cuando el motor de búsqueda no sea visible en el viewport de la página, mostrar un botón que al hacer click por JS haga un click en el input del motor, y de esta forma automáticamente se abrirá y se auto posicionará en el viewport.



Recoger código promocional de la URL y añadirlo al motor


Es posible añadir en el motor antes de realizar una búsqueda un código promocional. Este código promocional puede añadirse por ejemplo desde la URL principal y se puede añadir en el motor:



const urlParams = new URLSearchParams(window.location.search);

var promotionalCode = urlParams.get('promoCode');


  • 'promoCode': es el nombre del parámetro que usamos internamente, pero en una web fuera del entorno de Hotetec podría utilizarse el nombre de parámetro que se prefiera
  • var promotionalCode: aquí está guardado el código promocional que deberá pasarse al motor