mybooking docs

# Desarrolladores

# Introducción

Este documento detalla cómo funciona el motor de reservas. Está dirigido a programadores o desarrolladores web que quieran conocer los detalles técnicos, aquellos que quieran extender sus funcionalidades o bien aquellos que quieran tomarlo de partida para construir sus propias soluciones.

El motor de reservas está implementado en JS. Interactúa con el API de mybooking y con la página web para guiar al cliente en el proceso de reserva.

TIP

Puede descargase aquí, mybooking-js-engine (opens new window)

El plugin de WordPress usan la libraría JS del motor de reservas y sigue sus guías para llegar a cabo los diferentes procesos.

# ¿Cómo funciona el motor de reservas?

El motor de reservas es un conjunto de componentes que llevan a cabo cada uno de los pasos del proceso de reserva.

Está diseñado de manera que cada paso se lleve a cabo en una página independiente del sitio web. Cada página activa uno de los componentes e incluye un conjunto de elementos en los que se visualiza la información al usuario de la página web.

Para funcionar se utilizan:

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

# Idioma

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

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

# Clase en el body

Permite al motor de reservas identificar el componente que gestionará la página, 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, o bien mostrar el resultado de determinados procesos.

# Microplantillas

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

# Preparación de las páginas

El plugin de Wordpress 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

# 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

TIP

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

TIP

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

TIP

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

TIP

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

TIP

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