Modificado en: Vie, 15 Mar, 2024 a 11:59 A. M.
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
