Widget de búsqueda en el motor de reservas

Widget de búsqueda en el motor de reservas

A continuación encontraréis cómo insertar el widget de búsqueda en el motor de AvailRoom:

  1. Introducción:

La integración del widget del motor de reservas es igual de simple que la de su hermano mayor. Solo tienes que inicializar una función y pasarle 3 parámetros en el HTML que donde desees integrar el motor.


  1. Requisitos:

  • Necesitarás el ID de Availroom de tu motor de reservas que te habremos proporcionado ya.

  • Necesitarás acceso al fichero HTML de la web donde quieres realizar la integración.

  • La web necesita que funcione bajo una URL con certificado SSL válido.

  • La URL del dominio donde se ubica el motor de Availroom

  1. Cómo implementarlo el widget:

El motor consta de 2 partes: El código Javascript y el código CSS. Para implementar el motor necesitáis crear un elemento div en el fichero HTML que quiera mostrar el motor y darle a ésta una id única, que luego necesitaremos proveer como parámetro a una nueva instancia de “availroomBookingWidget”.

Pasos para implementar el motor:

  1. Agregar el css alojado en la url https://booking.availroom.com/widget/static/css/main.css

Ej.: 

<link

href="https://booking.availroom.com/widget/static/css/main.css"
rel="stylesheet"

/>

  1. Agregar un elemento div con un id único. Todo el contenido dentro de este elemento será reemplazado por el motor de Availroom por lo cual es ideal para poner códigos de carga, por ejemplo un spinner de carga

Ej.:

<div id="availRoomBookingWidget">
  Cargando...
<!-- Todo el contenido dentro del elemento div será reemplazado por el motor-->
</div>

  1. Agregar el Código Javascript alojado en la url https://booking.availroom.com/widget/availRoomBookingWidget.js

Ej.:

<script src="https://booking.availroom.com/widget/availRoomBookingWidget.js">
</script>


  1. Y luego solo faltaría iniciar en Javascript una instancia de availRoomBookingWidget que acepta por parámetro un objeto con las siguientes propiedades: 

    1. divId: ID del elemento div anteriormente creado

    2. environmentId: ID del entorno que os han proporcionado desde soporte.

    3. domainUrl: URL del dominio donde estará alojado el motor de Availroom ej: https://www.midominio.com

    4. language: Lenguaje predeterminado (Lenguajes disponibles están indicadas posteriormente). Si no se indica, el lenguaje predeterminado será el español

    5. type: Si es ‘multiunit’ o ‘monounit’

            Ej.:

<script>
   new availRoomBookingWidget({
      divId: "availRoomBookingWidget",
      environmentId: "id",
      domainUrl: "http://midominio.com",
      language: "es",
      type: "multiunit"
    });
</script>


4. Código HTML ejemplo mínimo a insertar:


<!-- Importamos los estilos css →

  <head> 

    <link href="https://booking.availroom.com/widget/static/css/main.css"
rel="stylesheet" />
  </head>
  <body>
    <!-- Creamos el elemento div con su ID único -->
    <div id="availRoomBookingWidget"></div>
     <!-- Importamos el código Javascript  -->
    <script src="https://booking.availroom.com/widget/availRoomBookingWidget.js"></script>
    <!-- Iniciamos El motor de búsqueda pasando de parámetro el ID único del elemento div anterior y el ID del entorno -->
    <script>
      new availRoomBookingWidget({
        divId: "availRoomBookingWidget",
        environmentId: "id",
        domainUrl: "http://midominio.com",
        language: "es",
        type: "multiunit"
      });
    </script>
  </body>
</html>

5. Código HTML final de ejemplo:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="description"
      content="Fichero de ejemplo motor Booking de Availroom"
    />
    <title>Widget Booking Availroom</title>
    <!-- Importamos los estilos css -->
    <link href="https://booking.availroom.com/widget/static/css/main.css"
rel="stylesheet" />
  </head>
  <body>
    <!-- Creamos el elemento div con su ID único -->
    <div id="availRoomBookingWidget">Hola</div>
     <!-- Importamos el código Javascript  -->
    <script src="https://booking.availroom.com/widget/availRoomBookingWidget.js"></script>
    <!-- Iniciamos El motor de búsqueda pasando de parámetro el ID único del elemento div anterior y el ID del entorno -->
    <script>
      new availRoomBookingWidget({

         divId: "availRoomBookingWidget",

         environmentId: "id",

         domainUrl: "http://midominio.com",

         language: "es",

         type: "multiunit"

       });
    </script>
  </body>
</html>

6. Parámetros opcionales

  • language: Lenguaje con el que se iniciará el motor

ej: language=es


URL de ejemplo en la página principal:

https://www.midominio.com/?language=en


Lenguajes Soportados: 

  • Español: es

  • Inglés: en


Otros


  • Cambio de Lenguaje programáticamente:

Para cambiar el lenguaje hay que cambiar el parámetro de la url “language=es” a otro lenguaje soportado ya sea con javascript o cualquier otra manera en que puedas modificar el parámetro de la url, por ejemplo https://www.midominio.com/?language=en


Ejemplo con Javascript puro:



  const pathLanguage = window.location.pathname.split("/");

  if (pathLanguage[pathLanguage.length - 1] === "es") {
    window.history.replaceState(null, "", "?language=es");
  }

  if (pathLanguage[pathLanguage.length - 1] === "en") {
    window.history.replaceState(null, "", "?language=en");
  }


Este ejemplo está hecho para clientes que manejan el idioma en base a un endpoint en el pathname de su URL, por ejemplo: https://misitioweb.com/home/es.
El ejemplo recoge el endpoint del path name y en cambia el idioma en base a él.