Opciones avanzadas: cómo crear un widget de reservas para un grupo

Seguir

Cloudbeds proporciona este artículo como un recurso informativo adicional para aquellos usuarios que ya se encuentran familiarizados con el uso de HTML y CSS. Los pasos indicados a continuación solo se recomiendan para desarrolladores web con experiencia en el campo. Es posible que al pasar el tiempo, el código se encuentre desactualizado y requiera modificaciones adicionales.

TOME EN CUENTA LO SIGUIENTE: Cloudbeds no ofrece asistencia para crear un widget de reservas en grupo, personalizar el motor de reservas o diseñar / desarrollar el sitio web de su hotel.

¿Qué es un widget de reservas?

Un «widget de reservas» es una función que proporciona Cloudbeds como parte de su producto mybookings, donde el hotel puede integrar, con sus propios sitios web, un formulario con campos simples (fecha de check-in y check-out) que, al enviarlo, redirigirá al huésped a la página de reserva incluyendo automáticamente los parámetros seleccionados.

Del mismo modo, el«widget de reservas para un grupo» pretende replicar la misma funcionalidad, pero admitiendo múltiples propiedades. Dicha herramienta está destinada a asociaciones y grupos de hoteles que tienen más de una propiedad configurada en mybookings, para así facilitar la búsqueda y reserva por parte de los huéspedes.

Tipos de widget

Widget basado en la propiedad

Un «widget basado en la propiedad» es una herramienta que permite al huésped elegir en cuál hotel desea consultar la disponibilidad. Al seleccionar el hotel, se transferirá al huésped directamente a la página de mybookings correspondiente a dicho hotel y con los parámetros seleccionados.

Debido a que se trata de un formulario HTML estándar, este se puede adaptar a las necesidades del sitio web del grupo con respecto al diseño, CSS, entre otros. Para lograr esto, deberá seguir los estándares indicados (nombre y formato de los parámetros).

Deberá utilizar un formulario HTML, justo como se muestra en el ejemplo a continuación.

<form action="https://hotels.cloudbeds.com/reservas" method="post">
<input type="hidden" name="date_format" value="$date_format" />
<p>Property:</p>
<select name="widget_property">
<option value="$property_id">$property_name</option>
.
.
.
<option value="$property_id">$property_name</option>
</select>
<p>Check-In:</p>
<input type="date" name="widget_date" />
<p>Check-Out:</p>
<input type="date" name="widget_date_to" />
<input type="submit" />
</form>

Leyenda:

  • $date_format: el formato de fecha que utilizará su widget. Formatos aceptados: «año-mes-día» para fechas ISO (2016-08-25), «mes/día/año» para las fechas con formato estadounidense (08/25/2016) y  «día/mes/año» para las fechas con formato británico (25/08/2016).
  • $property_id: ID de la propiedad que será utilizada junto con el widget. Si necesita ayuda para encontrar esta ID, contacte al equipo de soporte.
  • $property_name: nombre en el ID de la propiedad. Podrá encontrarlo junto a «$property_id».
Widget basado en la ciudad

Este tipo de widget no redirigirá al huésped a la página mybookings, sino que lo redirigirá a la página del portal de su asociación o grupo hotelero, donde se mostrarán los resultados de todas las propiedades que pertenecen este grupo filtradas por la ciudad seleccionada.

La función básica de este widget es redirigir al huésped a una URL formateada, cuyo formato deberá configurarse bajo el siguiente estándar:

https://$association_portal_url/#/?city=$city&check_in=$check_in&check_out=$check_out

Si el formato de la URL se agrega correctamente, el usuario será redirigido a la página web con la ciudad y las fechas que seleccionó previamente.

Debido a que se trata de un formulario HTML estándar, este se puede adaptar a las necesidades del sitio web del grupo con respecto al diseño, CSS, entre otros. Para lograr esto, deberá seguir los estándares indicados (nombre y formato de los parámetros).

Esto aplica para cualquier idioma, cliente o servidor. El siguiente ejemplo utiliza HTML, jQuery y JavaScript.

<form action="https://example.cloudbeds.com/#/" method="get">
<p>City:</p>
<select name="city">
<option value="all">All Cities</option>
<option>Barcelona</option>
<option>Madrid</option>
</select>
<p>Check-In:</p>
<input type="text" name="check_in" />
<p>Check-Out:</p>
<input type="text" name="check_out" />
<input type="submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var params = $(this).serialize();
var url = $(this).attr('action');
url = url+'?'+params;
window.location.href = url;
});
</script>

Leyenda:

  • $city: nombre de la ciudad seleccionada. Se usará para filtrar los resultados.
  • $check_in: fecha de entrada. Esta se seleccionará previamente en la página de reservas.
  • $check_out: fecha de salida. Esta se seleccionará previamente en la página de reservas.
  • $association_portal_url: URL del portal de la asociación o grupo hotelero. La URL se deberá ver así: nombredelgrupo.cloudbeds.com
Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk