Integración buscador en una web no Wordpress

Introducción

Mybooking recomienda utilizar Wordpress para poder integrar el motor de reservas de forma rápida y eficiente ya que ofrecemos un plugin de Wordpress que puedes instalar desde su directorio oficial.

Sin embargo, aquellos clientes que tienen su página web implementada en otra solución puede integrarlo de dos formas:

Insertando el buscador en su página web y redirigiendo a un subdominio al hacer la búsqueda
Implementando todo el proceso en tu página web.

En este artículo te explicamos cómo hacerlo de la primera forma. En github tenemos publicado un proyecto base que puedes tomar como referencia para poder hacer la integración en tu página web y obtener un resultado como éste.

Una supuesta web de avis.es con el buscador de Mybooking integrado

El proceso de búsqueda y el checkout se implementará en un subdominio que estará implementado en Wordpress y que mantendrá tu imagen corporativa.

Para poder insertar el buscador necesitas hacer lo siguiente:

Añadir una serie de Scripts en el footer de tu página
Añadir la clase mybooking-selector-widget en el tag body de la página en la que quieres insertar el buscardor
Añadir el formulario del buscador siguiendo una nomenclatura en los ids y nombres de los campos.

Subdominio con el motor de reservas

Añadir scripts

Si tu proyecto ya los incluye no es necesario que los vuelvas a introducir

Necesitas añadir los siguientes scripts en el mismo orden:

moment.min.js
moment-timezone-with-data.min.js
jquery.min.js
jquery-migrate.min.js
jquery-ui.min.js
datepicker.min.js
mybooking-init.js
mybooking-js-engine-rent-selector-bundle.js

<!-- Vendor -->
<script src="./assets/js/moment.min.js"></script>
<script src="./assets/js/moment-timezone-with-data.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/jquery-migrate.min.js"></script>
<script src="./assets/js/jquery-ui.min.js"></script>
<script src="./assets/js/datepicker.min.js"></script>

<!-- Mybooking -->
<script src="./assets/js/mybooking-init.js"></script>
<script src="./assets/js/mybooking-js-engine-rent-selector-bundle.js"></script>

Además, antes de estos scripts has de añadir un Script con la configuración de la conexión con tu cuenta de mybooking y con la página web que implementa el resto del proceso.

const mybooking_init_vars = {
  "mybooking_site_url": "https://reservas.midominio.com",
  "mybooking_api_url_prefix": "https://idcliente.mybooking.es",
  "mybooking_account_id": "idcliente",
  "mybooking_api_key": "apikey",
  "mybooking_choose_products_page": "seleccionar-vehiculo",
  "mybooking_terms_page": null,
  "mybooking_detail_pages": "",
  "mybooking_detail_pages_url_prefix": "products",
  "mybooking_selector_in_process": "form",
  "mybooking_phone_utils_path": "./assets/js/intlTelInput-utils.js",
  "mybooking_custom_loader": "false",
  "mybooking_js_select2": "false"
};

Para obtener el Idcliente y el API Key accede a tu cuenta de mybooking y en Guía de configuración > Web tendrás la información

Añadir la clase en el body de tu página

Se ha de añadir la clase mybooking-selector-widget al body de tu cuerpo. Esto es necesario ya que es el "trigger" que permite activar el componente de búsqueda.

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

Añadir el formulario con el buscador

Por último has de añadir el formulario con el buscador. En el proyecto de ejemplo hemos utilizado nuestra librería de CSS para hacer la maquetación pero no es necesario que la uses. En el ejemplo lo hemos añadido para mostrar el componente de la misma forma que en el plugin.

En el siguiente ejemplo adjuntamos el formulario mínimo con los nombres e ids que se han de utilizar para el correcto funcionamiento del motor.

<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>