วิดเจ็ตการจองกลุ่ม - วิธีสร้างวิดเจ็ตการจองกลุ่ม (ตัวเลือกขั้นสูง)

วิดเจ็ตที่ขึ้นอยู่กับที่พัก เป็นวิดเจ็ตที่ช่วยให้แขกสามารถเลือกโรงแรมที่ต้องการตรวจสอบห้องว่างได้ การส่งวิดเจ็ตจะโอนแขกไปยังหน้าเครื่องมือจองโรงแรมโดยตรงพร้อมพารามิเตอร์ที่เลือกไว้

เนื่องจากเป็นแบบฟอร์ม HTML มาตรฐาน สามารถปรับเปลี่ยนให้เข้ากับความต้องการของเว็บไซต์สมาคมด้วยเลย์เอาต์ CSS ฯลฯ ตราบเท่าที่ปฏิบัติตามมาตรฐานเหล่านี้ (ชื่อพารามิเตอร์และรูปแบบ)

สามารถทำได้โดยใช้แบบฟอร์ม HTML ดังตัวอย่างด้านล่าง:

<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
            <input type="hidden" name="date_format" value="Y-m-d" />
            <p>ที่พัก:</p>
                <select name="widget_property">
                <option value="$property_id">$property_name</option>
                <option value="$property_id">$property_name</option>
                </select>
            <p>เช็คอิน:</p>
            <input type="date" name="checkin" />
            <p>เช็คเอาท์:</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>

ประเภทวิดเจ็ตนี้จะไม่เปลี่ยนเส้นทางของแขกไปยังหน้าเครื่องมือการจอง แต่จะถูกเปลี่ยนเส้นทางไปยัง หน้าพอร์ทัลสมาคม ที่จะแสดงผลลัพธ์ของทุกที่พักที่เป็นสมาคมที่กรองตามเมืองที่เลือก

ฟังก์ชันพื้นฐานของวิดเจ็ตนี้คือ จะเปลี่ยนเส้นทางของแขกไปยัง URL ที่จัดรูปแบบไว้ ซึ่งในที่สุดจะอยู่ในมาตรฐานต่อไปนี้:

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

หาก URL ถูกจัดรูปแบบอย่างถูกต้อง ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าพอร์ทัล พร้อมกับเมืองและวันที่ที่เลือกไว้ล่วงหน้า

เนื่องจากเป็นแบบฟอร์ม HTML มาตรฐาน สามารถปรับเปลี่ยนให้เข้ากับความต้องการของเว็บไซต์สมาคมด้วยเลย์เอาต์ CSS ฯลฯ ตราบเท่าที่เป็นไปตามมาตรฐานเหล่านี้ (ชื่อพารามิเตอร์และรูปแบบ)

สามารถทำได้ในภาษาใดก็ได้ ทั้งฝั่งลูกค้าหรือเซิร์ฟเวอร์ ตัวอย่างด้านล่างใช้ HTML, jQuery และ JavaScript:

<form action="https://example.cloudbeds.com/#/" method="get">
<p>เมือง:</p>
<select name="city">
<option value="all">ทุกเมือง</option>
<option>บาร์เซโลนา</option>
<option>มาดริด</option>
</select>
<p>เช็คอิน:</p>
<input type="text" name="check_in" />
<p>เช็คเอาท์:</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>