Motor de reservas mybooking

1. Introducción

Este documento detalla como implementar el motor de reservas de mybooking en una página web existente.

La librería JS mybooking-js-engine implementa el proceso de reserva en 4 pasos:

  1. Selección fechas y lugares de entrega y devolución
  2. Selección producto(s)
  3. Completar datos de la reserva
  4. Resumen

Para tener el motor de reservas funcionado en tu página web solo es neceario seguir ciertas convenciones que detallaremos a continuación.

2. ¿Cómo empezar?

Descargamos mybooking-engine-js.

En la carpeta dist encontrarás los archivos necesarios para hacer funcionar el motor de reservas en tu página web:

.
├── dist
|   ├── js
|   |    └── mybooking-engine.js
|   ├── styles
|   |    ├── images
|   |    └── jquery-ui-1.9.2.custom.css
├── src

Copia los archivos de la carpeta dist a tu proyecto, manteniendo el mismo nombre de los ficheros.

2.1. Páginas

Para implementar el proceso de reserva se necesitan 4 páginas en el sitio web:

  1. Home
  2. Seleccionar producto
  3. Completar datos
  4. Resumen

En cada una de las páginas será necesario añadir los siguientes elementos:

  • Librería del motor de reservas
  • Estilos CSS

Librería JS

Cada una de las páginas del proceso de reserva debe incluir el script para cargar la librería del motor de reservas.

<script type="text/javascript">
  window.mybookingEngine = (function() {
    var baseURL = "BASE-URL";
    function getBaseURL() {
      return baseURL;
    }
    return {
      baseURL: getBaseURL
    };
  })();
</script>
<script src="/assets/js/mybooking-engine.js"></script>

Reemplaza BASE-URL por la url base de tu instancia de mybooking.

Estilos

Añadir antes de la etiqueta de cierre </header> de cada una de las páginas del proceso de reserva.

<link rel="stylesheet" href="/css/jquery-ui-1.9.2.custom.css" />

Sitio multi idioma

Si estamos desarrollando un sitio multi idioma, se ha de añadir un atributo lang en el tag html de cada una de las páginas con el código ISO 639-1 correspondiente al idioma.

<html lang="es"></html>

2.1.1. Página de inicio

La página de inicio del sitio presenta el selector de fechas y lugares de entrega y devolución

form

En la página de inicio se han de añadir los siguientes elementos

  • Clase index en el elemento body
  • Formulario de búsqueda

Clase

<body class="index"></body>

Formulario búsqueda

<form
  action="choose_product.html"
  method="get"
  enctype="application/x-www-form-urlencoded"
>
  <label>Lugar de entrega</label>
  <select id="pickup_place" name="pickup_place"> </select>

  <label>Lugar de devolución</label>
  <select id="return_place" name="return_place"> </select>

  <label>Fecha de entrega</label>
  <input type="text" id="date_from" name="date_from" autocomplete="off" />
  <select id="time_from" name="time_from"> </select>

  <label>Fecha de devolución</label>
  <input type="text" id="date_to" name="date_to" autocomplete="off" />
  <select id="time_to" name="time_to"> </select>

  <input type="submit" value="Buscar" />
</form>

2.1.2. Selección de producto

En el body se debe incluir la clase _choose_product

<body class="choose_product"></body>

Añadir el contenedor donde se mostrarán los productos. El id del mismo debe ser product_listing

<div id="product_listing"></div>

Añadir el script que se encargará de visualizar cada uno de los productos que retorna la búsqueda. El id del mismo debe ser script_detailed_product

<script type="text/tpml" id="script_detailed_product">
  <div>
    <div>
      <p><%=product.name%></p>
      <p><%=product.short_description%></p>
      <p><%=new Number(product.price).toFixed(2)%></p>
    </div>
    <img src="<%=products.photo%>" alt="">
    <% if (product.availability) { %>
    <a data-product="<%=product.code%>">Seleccionar</a>
    <% } else { %>
    <p>Consulta telefónica</p>
    <% } %>
  </div>
</script>

Añadir el formulario que permitirá cambiar los datos de la selección (se trata de un formulario con los mismos campos que el formulario de la página index)

2.1.3. Completar datos

<body class="complete"></body>

2.1.4. Resumen

<body class="summary"></body>