Motor de reservas

Introducción

Mybooking permite la creación de motores de reservas con las siguientes características:

  • Alquiler de productos
  • Actividades o tours

Mybooking está especializado en motores de reservas para empresas de alquiler de vehículos y de actividades o tours, pero puede utilizarse para cualquiler tipo de negocio.

Alquiler

Para crear un motor de reservas tipo avis.es

  1. El proceso de reserva empieza con la búsqueda por fechas y/o lugares.
  2. Se muestran al cliente los todos productos con los precios.
  3. El cliente selecciona el producto.
  4. Por último, el cliente selecciona la cobertura (si el negocio lo requiere), los extras, y completa los datos de la reserva.

Para crear un motor de reservas tipo airbnb.es

  1. El proceso de reserva empieza con la navegación del catálogo de productos o con una búsqueda por fechas y/o categorías o destinos.
  2. El cliente accede a la ficha de cada uno de los productos donde se muestra un calendario con la disponibilidad, desde donde puede seleccionar la fecha o fechas de la reserva.
  3. El cliente selecciona los extras y completa los datos de la reserva.

Actividades o tours

Permite crear páginas web como getyourguide.com

  1. El proceso de reserva empieza con la navegación por el catálogo de actividades.
  2. El cliente accede a la ficha de cada una de las actividades donde se muestra el calendario con las fechas que se lleva a cabo.
  3. El cliente selecciona una fecha, un horario (si hay múltiples horarios) y el número de tickets.
  4. Por último, completa los datos de la reserva.

¿Cómo empezar?

Ponemos a su disposición diferentes herramientas que podrán utilizarse para desarrollar el motor de reservas en función de su sitio web.

  • Librería JS
  • Plantilla HTML
  • Plugin de Wordpress

Recomendamos empezar con el plugin para WordPress o con la plantilla HTML porque están preparados y lo único necesario es configurar el acceso al API de mybooking.

Librería JS

La librería JS es el núcleo del motor de reservas. Interactúa con el API de mybooking y con la página web para guiar al cliente en el proceso de reserva.

La utilizan tanto la plantilla HTML como el plugin de WordPress

Puede descargase aquí, mybooking-engine-js.

Plantilla HTML

Plantilla para la creación de una web con motor de reservas. Puede utilizarse directamente o adaptarse según las necesidades.

Incluye las siguientes páginas:

  • Inicio
  • Pasos del motor de reserva
  • Contacto
  • Catálogo de productos (flota)
  • Términos y condiciones

Otras características:

  • Permite crear sitios en múltiples idiomas
  • Proceso de construcción con Gulp
  • Proceso de despliegue con Capistrano

Puede descargase aquí, mybooking-html-sample

Plugin de WordPress

Plugin para Wordpress que lo convierte en un motor de reservas.

Utiliza la librería JS y ofrece a través de shortcodes y widgets las funcionalidades necesarias para implementar el motor de reservas en cualquier instancia de WordPress.

Puede descargase aquí, mybooking-wp-plugin

¿Cómo funciona?

Cada una de las páginas del motor de reservas contienen una serie de elementos con los que interactúa la librería del motor de reservas.

Hay elementos que activan determinadas funcionalidades y componentes que se utilizan para visualizar la información.

Se utilizan:

  • Clase en el body
  • Ids o clases en determinados elementos
  • Microplantillas

Clase en el body

Permite al motor de reservas identificar la página en la que está, de forma que pueda activarse la funcionalidad correspondiente.

Ids o clases

Permite al motor de reservas identificar ciertos componentes, de forma que pueda programar eventos que respondan a la interacción del usuario con los mismos.

Microplantillas

Parte del proceso de construcción de las páginas del motor de reservas se lleva a cabo mediante micro plantillas.

Preparación de las páginas

Tanto el plugin de Wordpress como la plantilla HTML siguen las conveciones detalladas en el apartado anterior.

Sólo si desarrolla una nueva solución utilizando la librería JS debe tenerlo en cuenta. Además de lo anterior, se deberá tener en cuenta:

  • Sitios multi idioma
  • Incluir la librería JS en las págins

Sitio multi idioma

Si estamos desarrollando un sitio multi idioma, se utilizará el atributo lang del elemento html para determinar el idioma.

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

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.

Alquiler

El proceso de reserva se inicia con un selector, que permite al cliente introducir las fechas en las que desea realizar la reserva. Puede escoger entre dos selectores:

  • Formulario selector
  • Asistente de selección

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

  • Seleccionar producto
  • Completar datos
  • Resumen

Formulario selector

El selector inicia el proceso de reserva

El formulario selector inicia el proceso de reserva seleccionando las fechas del período de reserva y los lugares de entrega y devolución, si corresponde.

Suele encontrarse en la página de inicio del sitio web.

form

La formulario selector requiere los siguientes elementos en la página donde se muestra:

  • Clase mybooking-selector-widget en el elemento body
  • Formulario de búsqueda cuyo atributo name sea widget_search_form

Clase

<body class="mybooking-selector-widget"></body>

Formulario búsqueda

En el formulario de búsqueda se pueden utilizar los siguientes campos:

Descripción id name
Lugar de entrega widget_pickup_place pickup_place
Fecha de entrega widget_date_from date_from
Hora de entrega widget_time_from time_from
Lugar de devolución widget_return_place return_place
Fecha de devolución widget_date to date to
Hora de devolución widget_time_to time_to
Código de promoción widget_promotion_code promotion_code
Número de adultos widget_numbers_of_adults numbers_of_adults
Número de niños widget_number_of_children number_of_children
Regla para la edad del conductor widget_driver_age_rule driver_age_rule
Número de productos a contratar widget_number_of_products number_of_products

El plugin de WordPress está preparado para presentar los campos en función de la configuración del negocio. Además, puede personalizarse en páginas o sitios web concretos.

La plantilla HTML permite adaptarlo a las necesidades de cada web.

<form
  name="widget_search_form"
  method="get"
  enctype="application/x-www-form-urlencoded"
>
  <label>Lugar de entrega</label>
  <select id="widget_pickup_place" name="pickup_place"></select>
  <label>Lugar de devolución</label>
  <select id="widget_return_place" name="return_place"> </select>
  <label>Fecha de entrega</label>
  <input type="text" id="widget_date_from" name="date_from" autocomplete="off" />
  <select id="widget_time_from" name="time_from"> </select>
  <label>Fecha de devolución</label>
  <input type="text" id="widget_date_to" name="date_to" autocomplete="off" />
  <select id="widget_time_to" name="time_to"> </select>
  <input type="submit" value="Buscar" />
</form>

Asistente de selección

El asistente de selección inicia el proceso de reserva.

El asistente de selección inicia el proceso de reserva seleccionando las fechas del período de reserva y los lugares de entrega y devolución, si corresponde. El una alternativa al formulario selector diseñado para dar una mejor de experiencia al usuario en el móvil.

La asistente requiere los siguientes elementos en la página donde se muestra:

  • Clase mybooking-selector-wizard en el elemento body
  • Contenedor que presentará los pasos del Wizard
<div id="wizard_container" class="selector_wizard_container" style="display: none">
     <!-- Title -->
     <div id="step_title" class="selector_wizard_step_title"></div>
     <!-- Close btn -->
     <span id="close_wizard_btn" class="selector_wizard_close_btn"><i class="fa fa-times"></i></span>
     <!-- Container -->
    <div id="wizard_container_step" class="selector_wizard_step_container">
      <div id="wizard_container_step_header"></div>
      <div id="wizard_container_step_body"></div>
    </div>
</div>

El plugin de WordPress lo incluyen, de forma que no es necesario incluirlo. Se ha de tener en cuenta si se desea ajustarlo en un tema de terceros.

Página selección de producto

La página de selección de producto muestra los resultados de la búsqueda y permite seleccionar el producto.

choose product

La página de selección de productos requiere los siguientes elementos:

  • Clase choose_product en el elemento body
  • Contenedor donde se mostrará el resultado de la búsqueda
  • Plantilla para visualizar el resultado de la búsqueda
  • Formulario para cambiar las fechas

Clase

En el body se debe incluir la clase choose_product

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

Contenedor resultado de la búsqueda

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

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

Plantilla productos

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

<script type="text/tpml" id="script_detailed_product">
  <% for (var idx=0;idx<products.length;idx++) { %>
  <% var product = products[idx]; %>
  <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>

Formulario cambiar fechas

Añadir el formulario que permitirá cambiar los datos de la selección. Tiene los mismos campos que el formulario de la página de inicio.

Página completar datos

La página de completar datos permite finalizar la reserva tras introducir los datos y seleccionar los extras.

complete

La página de completar necesita los siguientes elementos:

  • Clase complete en el elemento body
  • Contenedor donde se muestra el resumen de la reserva
  • Contenedor para mostrar los extras
  • Formulario para completar datos
  • Formulario para cambiar las fechas
  • Plantilla con el resumen de la reserva

Clase

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

Contenedor resultado de la búsqueda

Crear el contenedor donde se muestra el resumen de la reserva. El id del mismo debe ser reservation_detail

<div id="reservation_detail"></div>

Contenedor para mostrar los extras

Crear el contenedor donde se muestra los extras para que el cliente pueda seleccionarlos. El id del mismo debe ser extras_listing

<div id="extras_listing"></div>

Formulario para completar datos

Formulario para cambiar fechas

Añadir el formulario que permitirá cambiar los datos de la selección. Tiene los mismos campos que el formulario de la página de inicio.

Plantilla resumen de la reserva

Página resumen

La página de resumen muestra la información de la solicitud de reserva.

La página resumen necesita los siguientes elementos:

  • Clase summary en el elemento body
  • Contenedor donde se muestra el resumen de la reserva
  • Plantilla con el resumen de la reserva

Clase

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

Contenedor resultado de la búsqueda

Crear el contenedor donde se muestra el resumen de la reserva. El id del mismo debe ser reservation_detail

<div id="reservation_detail"></div>

Plantilla con el resumen de la reserva

Actividades