Bu makale, rezervasyon aracı nedir ve Grup Rezervasyon Bileşeninin Cloudbeds Rezervasyon Motoru için nasıl oluşturulacağını açıklar.
Dikkat edilmesi gereken önemli noktalar
Bu makale, HTML ve CSS konusunda zaten bilgisi olanlar için ek bilgi kaynağı olarak sunulmaktadır.
- Burada verilen adımlar yalnızca deneyimli web geliştiricileri için önerilmektedir. Kod zamanla güncelliğini yitirebilir ve ek çalışmalar gerektirebilir.
- Cloudbeds, grup rezervasyon bileşeni oluşturma veya dış otel web sitesi tasarımı/geliştirmesi konusunda destek sağlamamaktadır.
- Biz şunları sunuyoruz:
- Cloudbeds Rezervasyon Motoru ile tam entegre, profesyonelce hazırlanmış web siteleri. Cloudbeds Websites hakkında daha fazla bilgi edinmek için buraya tıkla.
- Rezervasyon Motoru özelleştirme hizmetleri, daha fazla bilgi için buraya tıkla.
Genel Bakış
Rezervasyon aracı, Cloudbeds tarafından Rezervasyon Motoru ürününün bir parçası olarak sunulan bir işlevselliktir. Otel, kendi web sitelerine basit alanlar içeren (giriş tarihi ve çıkış tarihi) bir form entegre edebilir ve form gönderildiğinde, misafiri seçilen parametrelerle rezervasyon sayfasına yönlendirir.
Aynı şekilde, grup rezervasyon bileşeninin amacı da aynı işlevselliği çoğul tesisler için sağlamaktır. Bu, Rezervasyon Motoru kurulumu yapılmış birden fazla tesise sahip organizasyonlar ve otel grupları için misafirlerin daha kolay arama ve rezervasyon yapabilmesi amacıyla tasarlanmıştır.
Daha fazla bilgi için Organizasyon ve Kullanıcılar sayfasını inceleyebilirsin.
Bileşen türleri
Tesis tabanlı bileşen
Tesis tabanlı bileşen, misafirin hangi otelin müsaitlik bilgisini göstermesini istediğini seçmesini sağlayan bir bileşendir. Bileşenin gönderilmesi, misafiri seçilen parametrelerle doğrudan otelin Rezervasyon Motoru sayfasına yönlendirir.
Standart bir HTML formu olduğu için, düzen, CSS vb. ile dernek web sitesinin ihtiyaçlarına uyarlanabilir. Ancak bu standartlara (parametre isimleri ve formatı) uyulması gerekir.
Bunu aşağıdaki örnekteki gibi bir HTML formu kullanarak gerçekleştirebilirsiniz:
<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
<input type="hidden" name="date_format" value="Y-m-d" />
<p>Tesis:</p>
<select name="widget_property">
<option value="$property_id">$property_name</option>
<option value="$property_id">$property_name</option>
</select>
<p>Giriş:</p>
<input type="date" name="checkin" />
<p>Çıkış:</p>
<input type="date" name="checkout" />
<input type="submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$( "#widgetBookingForm" ).on( "submit", function( event ) {
event.preventDefault();
var propertyName = $("[name=widget_property]").val();
var checkinDate = $("[name=checkin]").val();
var checkoutDate = $("[name=checkout]").val();
var url = $(this).attr('action');
url = url+propertyName+"#checkin="+checkinDate+"&checkout="+checkoutDate;
window.location.href = url;
});
</script>Kod açıklaması:
- $property_id: Bileşen tarafından desteklenecek tesis kimliklerinden biri. Bulmakta yardıma ihtiyacın olursa, lütfen Destek ekibi ile iletişime geç.
- $property_name: $property_id ile tanımlanan tesis kimliğinin adı
Şehir bazlı bileşen
Bu bileşen türü, misafiri Rezervasyon sayfasına yönlendirmek yerine, seçilen şehre göre filtrelenmiş ve derneğe ait tüm tesislerin sonuçlarını gösteren dernek portal sayfasına yönlendirecektir.
Bu bileşenin temel işlevi, misafiri biçimlendirilmiş bir URL'ye yönlendirmesidir ve bu URL standart olarak aşağıdaki gibi olacaktır:
https://$association_portal_url/#/?city=$city&check_in=$check_in&check_out=$check_out
URL doğru biçimlendirilmişse, kullanıcı şehir ve tarihler önceden seçili olarak portal sayfasına yönlendirilir.
Standart bir HTML formu olduğu için, düzen, CSS vb. ile dernek web sitesinin ihtiyaçlarına göre uyarlanabilir. Yeter ki bu standartlara (parametre isimleri ve format) uyulsun.
Bu, herhangi bir dilde, istemci veya sunucu tarafında yapılabilir; aşağıdaki örnek HTML, jQuery ve JavaScript kullanmaktadır:
<form action="https://example.cloudbeds.com/#/" method="get">
<p>Şehir:</p>
<select name="city">
<option value="all">Tüm Şehirler</option>
<option>Barselona</option>
<option>Madrid</option>
</select>
<p>Giriş Tarihi:</p>
<input type="text" name="check_in" />
<p>Çıkış Tarihi:</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>Kod açıklaması:
- $city: Seçilen şehrin adı. Sonuçları filtrelemek için kullanılır.
- $check_in: Giriş tarihi. Rezervasyon sayfasında önceden seçili olacaktır.
- $check_out: Çıkış tarihi. Rezervasyon sayfasında önceden seçili olacaktır.
- $association_portal_url: Dernekle ilgili portal sayfasının URL'si. URL şu şekilde görünmelidir: “associationname.cloudbeds.com”
Keşfet Grup Rezervasyon Motoru
Yorumlar
Yorum yazmak için lütfen oturum açın: oturum aç.