Permitirá consultar el listado de reservas y modificar, cuando sea posible, estas reservas.


Se pueden pasar los parámetros email y reference al componente para cargar automáticamente esa reserva. Esta funcionalidad se utiliza para, por ejemplo, un enlace autogenerado en el bono de reserva del cliente. De esta forma cogemos los parámetros de la URL y se los pasamos al componente.


El contenedor definido en container es quien determina el width del componente.


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

bookingEngine

Código de motor

2

system

Código de sistema (HPH o MPH)

HPH

language

Idioma

es

email

Email de la reserva

[email protected]

reference

Referencia de la reserva (localizador)

DEMOHTT230524KHWSWW

component

Valor fijo “customer-booking-list”

customer-booking-list

container

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

bookingsList


* 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>
    // Si se quiere recoger el 'email' y 'reference' de los parámetros de la URL. Si se pasan al componente se cargará automáticamente la reserva en el componente.
    var bookingsListQuery = window.location.search;
    if (bookingsListQuery !== '' && bookingsListQuery.indexOf('=') == -1) {
        bookingsListQuery = decodeURIComponent(bookingsListQuery);
}
    const bookingsListUrlParams = new URLSearchParams(bookingsListQuery);
    var email, reference;
    if (bookingsListUrlParams.has("email") && bookingsListUrlParams.has("reference")) {
        email = bookingsListUrlParams.get("email");
        reference = bookingsListUrlParams.get("reference");
}

    // Parámetros componente
    var genericManifestAndVendorsLoaded = genericManifestAndVendorsLoaded || false;
    var clientComponents = clientComponents || [];
    var firstClientComponent = clientComponents.length;
clientComponents.push({
        webSessionId: "01CDA38719E74937A2F275757ABA34EE",
        bookingEngine: "2",
        system: "HPH",
        language: "es",
email: email,
reference: reference,
        component: "customer-booking-list",
        container: "bookingsList"
});

    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);
};
}

    if (firstClientComponent == 0) {
        document.addEventListener('DOMContentLoaded', function () {
            window.parameters = window.parameters || {};
            window.parameters.clientComponents = clientComponents;
});
        window.gethTtScript("https://hotel.new.hotetec.com/components/customer/js/main.js");
}
    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="bookingsList"></div>