Introducción

El propósito de este documento es explicar cómo incorporar el buscador de ObeHotel en su página web. El buscador dispone de dos modos de búsqueda de disponibilidad:

Disponibilidad por hotel
Disponibilidad por destinación

La diferencia básica entre los dos modos, es que el modo destinación necesita una capa en su página web para mostrar los distintos hoteles con disponibilidad para las fechas y habitaciones seleccionadas.

Para webmasters con conocimiento de código html tiene la sección “Para Webmasters” donde podrá encontrar la información para crear sus porpios formularios.

Notas de la revisión

En esta nueva versión se han mejorado los distintos aspectos:

Se ha adaptado el buscador para que sea responsivo, esto significa que se adaptará automáticamente en función de las medidas del contenedor donde se inserte el buscador.
Se ha añadido el parámetro “fontsize” para poder definir el tamaño de la letra del buscador.

Buscador por hotel

Diagrama de flujo

Para habilitar el buscador en modo hotel en su página tendrá que añadir el siguiente código html/javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" media="all" href="https://booking.obehotel.com/css/obehotel_search.css" />
<script src="https://booking.obehotel.com/js/obehotel_search.js" ></script>
<div id="obehotel-content-form">
    <div id="obehotel-form-load" class="load"></div>
</div>
<script>
    obehotelSearch.hotel = x;
    obehotelSearch.lang = 'es';
    obehotelSearch.generateSearchForm();
</script>

Si nuestra página ya dispone de jquery podemos eliminar la entrada:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Paso 1: selección fechas y habitaciones

Buscador

Paso 2: al clicar al botón “buscar” el navegador redirige el usuario a la pasarela de ObeHotel con las fechas seleccionadas en el paso anterior

Página hotel

Selector de hotel

Añadir encima del código anterior para mostrar selector de hoteles

<select class="changeSearchHotel" onChange="$('input[name=hotel]').val($('#changeSearchHotel').val());" id="changeSearchHotel">
    <option value="x">HOTEL A</option>
    <option value="y">HOTEL B</option>
    <option value="z">HOTEL C</option>
</select>

En caso que nuestra página disponga de varios hoteles y no deseemos utilizar el buscador por destino, podemos añadir un desplegable encima del buscador para buscar la disponibilidad del hotel que desee el usuario.

Buscador por destino

Diagrama de flujo

Podemos utilizar el buscador para buscar la disponibilidad entre todos los hoteles de una zona, para ello debemos aplicar el código fuente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" media="all" href="https://booking.obehotel.com/css/obehotel_search.css" />
<script src="https://booking.obehotel.com/js/obehotel_search.js" ></script>
<div id="obehotel-content-form">
    <div id="obehotel-form-load" class="load"></div>
</div>
<div id="obehotel-content-results">
    <div id="obehotel-results-load" class="load"></div>
</div>
<script>
    obehotelSearch.destination= x;
    obehotelSearch.lang = 'es';
    obehotelSearch.generateSearchForm();
</script>

Si nuestra página ya dispone de jquery podemos eliminar la entrada:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

La diferencia básica entre el buscador por zona y el de hotel es que este utiliza una capa para presentar los distintos hoteles con disponibilidad en su página web. Dicha capa se identifica con “content-results”.

Paso 1: selección fechas y habitaciones

Buscador

Paso 2: presentación de los hoteles con disponibilidad

Buscador

Paso 3: Se redirige el usuario a la pasarela de ObeHotel con el hotel y fechas seleccionadas

Página hotel

En modo destino es posible aplicar el parámetro “showselection”. Este permite que aparezca una lista con los hoteles que dispone el destino. De esta manera damos a los usuarios la posibilidad de realizar la consulta de disponibilidad para un hotel concreto o bien para todos a la vez.

Este parámetro es solo aplicable en modo destino.

Buscador con selector hoteles

Conflictos con otras librerías/frameworks

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="https://booking.obehotel.com/css/obehotel_search.css"/>
<script src="https://booking.obehotel.com/js/obehotel_search.js"></script>
<div id="obehotel-content-form">
    <div id="obehotel-form-load" class="load"></div>
</div>
<script>
    jQuery191 = jQuery.noConflict(true);
    jQuery191(function($) {
        obehotelSearch.hotel = x;
        obehotelSearch.lang = 'es';
        obehotelSearch.vertical = 1;
        obehotelSearch.noConflictVar($);
        obehotelSearch.generateSearchForm();
    });
</script>

Es frecuente encontrar proyectos que utilizen el framework MooTools o bien otras librerias jQuery, diferentes a las que nuestro buscador necessita. Así es que nuestro buscador puede entrar en conflicto con estas librerias.

Para solucionar este detalle, deberemos de utilitzar la instrucción noConflict de jquery, tal como se indica en el código:

Personalización

Ejemplo de personalización

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" media="all" href="https://booking.obehotel.com/css/obehotel_search.css" />
<script src="https://booking.obehotel.com/js/obehotel_search.js" ></script>
<div id="obehotel-content-form">
    <div id="obehotel-form-load" class="load"></div>
</div>
<div id="obehotel-content-results">
    <div id="obehotel-results-load" class="load"></div>
</div>
<script>
    obehotelSearch.destination = x;
    obehotelSearch.lang = 'es';
    obehotelSearch.vertical = 1;
    obehotelSearch.id_div_show_results = 'content-results';
    obehotelSearch.id_div_show_search_form = 'content-form';
    obehotelSearch.vertical = 1;
    obehotelSearch.backgroundcolor = "yellow";
    obehotelSearch.buttonbackgroundcolor = "red";
    obehotelSearch.generateSearchForm();
</script>

Podemos ajustar la visualización del buscador, añadiendo los siguientes parámetros en la sección <script></script>:

Atributo	Decripción	Valor defecto	Tipo valor
id_div_show_search_form	Capa en la que se muestra el formulario de búsqueda	obehotel-content-form	Texto
id_div_show_results	Capa para mostrar los resultados en caso del modo destinación	obehotel-content-results	Texto
backgroundcolor	Color de fondo del formulario de búsqueda	rgb(217,237,246)	Html/RGB
textcolor	Color letras buscador	rgb(255,255, 255)	Html/RGB
bordercolor	Color borde buscador	rgb(255,102,0)	Html/RGB
buttoncolor	Color letras botón	rgb(96, 110, 148)	Html/RGB
buttonbordercolor	Color borde botón	rgb(96, 110, 148)	Html/RGB
buttonbackgroundcolor	Color de fondo del botón “buscar” del formulario de búsqueda	rgb(176,191,198)	Html/RGB
vertical	Indica si el formulario de búsqueda se muestra en formato vertical o bien horizontal	0	1: Vertical, 0: Horizontal
return_url	Indica la dirección de retorno para volver de la pasarela de reservas	ninguno	url, sin el http:// ej: mihotel.com
open_new_window	Indica si al clicar el botón de buscar, los resultados se muestran en una nueva ventana	0	1: Nueva vent., 0: Misma vent.
fontsize	Indica el tamaño de la letra	ninguno	Numérico
showselection	Indica si debe aparecer la lista de hoteles de la destinación	0	1: Lista hoteles, 0: Sin lista hot.
lang	Indica el idioma del buscador	es	es: Español, ca: Catalán, en: Inglés, fr: Francés, it: Italiano, de: Alemán, nl: Holandés, ru: Ruso
disablebootstrapcss	Nos permite deshabilitar el css de bootstrap del buscador en caso de haber conflictos con los css de la web.	0	1: Deshabilitar, 0: Habilitar
disablebootstrapjs	Nos permite deshabilitar el js de bootstrap del buscador en caso de haber conflictos con los scripts de la web.	0	1: Deshabilitar, 0: Habilitar

Utilizar color “transparent”

Podemos utilitzar la palabra “transparent” en los campos Html/RGB para indicar que el objeto será transparente.

Por ejemplo si queremos que el fondo del buscador sea transparente tendremos que asignar a la variable backgroundcolor dicho valor:

obehotelSearch.backgroundcolor = “transparent”

Buscador en Joomla (versión 2.5)

Joomla por defecto no interpreta el código JavaScript incrustado. Por ello tendremos que instalar un módulo para añadir el código fuente del buscador.

Descarga del módulo

En joomla extensions existen multitudes de módulos y extensiones para joomla. Nos descargaremos el módulo Custom Javascript.

http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/17122

Joomla Custom Javascript

Pulsaremos el botón “download” y nos descargaremos el modulo en nuestro ordenador.

Instalación del módulo

Una vez descargado el módulo iremos al gestor de contenido del joomla. Seguidamente iremos a la sección “gestor de extensiones” utilizando el menú superior.

Joomla Extension Manager

Utilizando el botón “navegar” seleccionaremos el fichero descargado anteriormente y le daremos al botón “subir e instalar”

Joomla Instalar plugin

Configuración del módulo

Utilizando el menú superior iremos en el “gestor de módulos”

Joomla Module Manager

Utilizaremos el botón “añadir” y seleccionaremos la opción “Custom Javascript”

Joomla Añadir Custom Javascript

Seguidamente nos aparecerá la pantalla de configuración del módulo y debemos configurarlo correctamente:

Asignar un título al módulo
Activamos el módulo utilizando el campo “Status”
Utilizar la caja de texto en “Basic options” para poner el código fuente que detallamos al principio de este manual.
Asignar el módulo a una posición de la plantilla utilizando el campo “Position”
Marcar la opción “on all pages” en la opción “module assignment”.

Joomla Ejemplo Custom Javascript

Versión para joomla 3.x

http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251

Buscador en Wordpress

A diferéncia de Joomla, Wordpress sí que interpreta el código Javascript en el contenido. Para añadir el código debemos ir a la gestión de “widgets”.

Utilizaremos el widget “Text” y lo arrastramos a la posición que deseemos

Wordpress Text Example

Para terminar asignamos un título al “widget” y ponemos el código fuente dentro de la caja de texto.

Para Webmasters

Instalación de la pasarela de reservas

Este manual es de carácter técnico y va dirigido a los Webmasters que desean incorporar el sistema de reservas ObeHotel en una página web. El procedimiento de instalación es simple y no compromete la integridad de la página web. En la modalidad de instalación básica, solamente es necesario poner un enlace que dirigirá al usuario al sistema de reservas Obehotel mediante una conexión segura y encriptada. El enlace puede ser un texto, una imagen u otros elementos según los conocimientos del webmaster.

Los pasos para activar la pasarela de reservas en su website, son los siguientes:

Contactar con el departamento comercial para que le habiliten el hotel en el sistema. Un comercial le proporcionara las claves de acceso para gestionar la información de su hotel y su inventario. También se le proporcionara un código de hotel.
Una vez recibida esta información, debe crear la URL para acceder a su entorno de reservas. Tiene dos modalidades de acceso.

Parámetros

Parámetro	Decripción	Requerido	Formato	Valores
hotel	Código del hotel dado por Obehotel	Sí	Texto
lang	Indica el idioma del buscador	No	Texto[2]	es: Español, ca: Catalán, en: Inglés, fr: Francés, it: Italiano, de: Alemán, nl: Holandés, ru: Ruso
date_from	Fecha de entrada al hotel	Sí	dd/mm/yyyy	Ej: 01/01/2017
date_to	Fecha de salida al hotel	Sí	dd/mm/yyyy	Ej: 14/01/2017
rooms	Número de habitaciones totales que se hace la petición	Sí	Número	1 … 8
adults_X	Número de adultos de la habitación X	Sí	Número	1 … 9
childs_X	Número de niños de la habitación X	Sí	Número	0 … 4

Modalidades

Ejemplo del enlace básico en formato HTML:

<a href="https://booking.obehotel.com/step1.php?hotel=XXX" title="Reservar alojamiento en Obehotel">Reservar alojamiento</a>

Enlace básico

GET https://booking.obehotel.com/step1.php?hotel=XXX

Utilice un enlace básico si se desea abrir la pasarela de reservas en el paso inicial. Este paso permite al usuario consultar la información de su hotel y reservar cualquier habitación para unas determinadas fechas. La URL debe tener la siguiente estructura. Recuerde asignar su código de hotel en el parámetro “hotel” https://booking.obehotel.com:448/step1.php?hotel=30

Ejemplo del enlace básico con idioma en formato HTML:

<a href="https://booking.obehotel.com/step1.php?hotel=XXX&lang=en" title="Reservar alojamiento en Obehotel">Reservar alojamiento</a>

Enlace básico con idioma

GET https://booking.obehotel.com/step1.php?hotel=XXX&lang=en

Si se desea que la pasarela de reservas se abra en un idioma determinado, se debe utilizar el parámetro lang. Los idiomas disponibles, juntamente con su código están en la tabla de especificaciones. La URL debe tener la siguiente estructura. Recuerde asignar su código de hotel en el parámetro hotel y el código de idioma que se desee en el parámetro lang

Formulario para 1 o 2 habitacions

<form method="POST" action="https://booking.obehotel.com/step2.php" accept-charset="UTF-8">
    <input required="required" name="hotel" value="XXX" type="hidden">
    <input required="required" name="lang" value="es" type="hidden">
    <label>Entrada</label>
    <input required="required" placeholder="dd/mm/yyyy" name="date_from" type="text"><br>
    <label>Salida</label>
    <input required="required" placeholder="dd/mm/yyyy" name="date_to" type="text"><br>
    <label>Habitaciones</label>
    <select required="required" name="rooms" onchange="change_rooms(this.value);">
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br>
    <label>Adultos habitación 1</label>
    <select required="required" name="adults_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select><br>
    <label>Niños habitación 1</label>
    <select required="required" name="childs_1">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select><br>
    <div id="room_2" style="display:none">
        <label>Adultos habitación 2</label>
        <select required="required" name="adults_2">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select><br>
        <label>Niños habitación 2</label>
        <select required="required" name="childs_2">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select><br>
    </div>
    <button type="submit" class="full-width">Buscar</button>
</form>
<script>
    function change_rooms(num_rooms)
    {
        var room_2 = document.getElementById('room_2');

        room_2.style.display = (num_rooms > 1) ? 'block' : 'none';
    }
</script>

Formulario buscador

POST https://booking.obehotel.com/step2.php

Para webmasters avanzados, se puede conectar cualquier buscador de la página web con la pasarela de reservas ObeHotel. Esta metodología permite acceder al sistema de reservas directamente en el paso dos, donde el usuario ya ha seleccionado las fechas y ocupación para realizar la búsqueda de disponibilidad.