Opções Avançadas: Como criar um botão de reservas múltiplas

Seguir

Este tutorial serve como fonte informativa adicional para usuários que já têm conhecimento em HTML e CSS. Os passos aqui fornecidos são sugeridos apenas para desenvolvedores web com experiência. O código pode se tornar desatualizado e precisar de ajustes.

OBSERVAÇÃO: A Cloudbeds não oferece suporte para a criação de um botão de reservas múltiplas, customização de motor de reservas, nem para o desenvolvimento/webdesign do site do hotel.

O que é um botão de reservas?

O "botão de reservas" é uma ferramenta fornecida pela Cloudbeds como parte do produto MyBookings, que permite que o hotel faça a integração de um formulário com campos simples (data de check-in e check-out) no seu site e, quando enviado, redirecionará o hóspede para a página de reservas, com os parâmetros escolhidos.

Da mesma forma, o "botão de reservas múltiplas" tem como objetivo replicar as mesmas funcionalidades, mas suportando múltiplas propriedades. Foi desenvolvido para associações e grupos de hotéis que possuem mais de uma propriedade configuradas com o mybookings, para facilitar a busca e reservas para os hóspedes.

Tipos de Botão

Botão configurado para propriedades

Um "botão configurado para propriedades" é um botão que permite que o hóspede escolha a propriedade que ele quer buscar a disponibilidade. Ao apertar o botão, o hóspede será transferido diretamente para a página de MyBookings do hotel com os parâmetros selecionados.

Como se trata de um formulário HTML padrão, ele pode ser adaptado às necessidades do site da associação com relação a layout, CSS, etc. Desde que siga essas regras (nomes de parâmetro e formato).

Isso pode ser feito utilizando um formulário HTML como o apresentado abaixo:

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

Legenda:

  • $date_format: Formato da data que será enviado pelo seu botão. Valores compatíveis: "Y-m-d" para datas ISO (2016-08-25), "m/d/Y" para o formato norte-americanos de datas (08/25/2016) e "d/m/Y" para datas no formato do Brasil (25/08/2016)
  • $property_id: Um dos IDs da propriedade que será suportado pelo botão. Caso precise buscá-lo, entre em contato com o SAC.
  • $property_name: Nome do ID da propriedade identificado por $property_id
Botão configurado para cidades

 

Esse tipo de botão não redirecionará o hóspede para a página do mybookings, ao invés disso, ele será redirecionado ao portal da associação que mostrará os resultados de todas as propriedades pertencentes à associação, filtrado pela cidade escolhida.

A funcionalidade básica desse botão é o redirecionamento do hóspede à uma URL formatada, que no final aparecerá com o seguinte padrão:

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

Se a URL estiver formatada corretamente, o usuário será redirecionado ao portal, com as cidades e datas pré-escolhidas.

Como se trata de um formulário HTML padrão, ele pode ser adaptado às necessidades do site da associação com relação a layout, CSS, etc. Desde que siga essas regras (nomes de parâmetro e formato).

Isso pode ser feito em qualquer idioma, cliente ou server-side, o exemplo abaixo utiliza HTML, jQuery e 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>

Legenda:

  • $city: Nome da cidade selecionada. Será usado para filtrar os resultados.
  • $check_in: Data de check-in. Será pré-selecionada na página de reservas.
  • $check_out: Data de check-out. Será pré-selecionada na página de reservas.
  • $association_portal_url: Url do portal da associação. A url deve ser no formato: “nomedaassociação.cloudbeds.com”
Esse artigo foi útil? Envie uma solicitação

Comentários

Desenvolvido por Zendesk