In part 2 of the series “Create an OTA website like booking.com with Meta Box plugin”, we created filters that allow users to search for hotels on the Hotel archive page. Then, to help users find their desired rooms in each hotel conveniently, we need to filter vacancies in Hotel single pages.

Here we go!

Step 1: Create a Search Form in the Hotel Single Pages

First of all, create a search form in the Hotel single pages to search for vacancies. To do it, add the following code to the content-single-hotel.php file created in part 1 of this series. Note that this form must be placed above the room displaying section.

<?php
    $value_checkin  = isset( $_POST['check-in-date'] ) ? $_POST['check-in-date'] : '';
    $value_checkout = isset( $_POST['check-out-date'] ) ? $_POST['check-out-date'] : '';
?>
<form id="hotel-availform" method="POST" style="margin-bottom: 30px;">
    <div class="filter-hotel">
        <input class="date-check check-in-date" value="<?php echo $value_checkin; ?>" id="" type="" name="check-in-date" placeholder="Check-in date">
        <input class="date-check check-out-date" value="<?php echo $value_checkout; ?>" id="" type="" name="check-out-date" placeholder="Check-out date">
        <input class="filter-action" type="submit" name="" value="Check availability">
    </div>
</form>

Explanation:

  • $value_checkin = isset( $_POST['check-in-date'] ) ? $_POST['check-in-date'] : '';
    $value_checkout = isset( $_POST['check-out-date'] ) ? $_POST['check-out-date'] : ''; This code is to display check-in, check-out dates after users fill in this information (in Check-in date and Check-out date fields) and click “Check availability”. That helps users easily check and track the information that they filled in.
  • method="POST" is used to get the values (check-in and check-out dates) that users fill in when they click “Check availability”.

Here is my complete filter on the single hotel pages:

The complete filter on the single hotel pages of my WordPress OTA website

Step 2: Check Availability

In this step, you need to have hotel booking data to filter out vacancies. However, in this series, I don’t go into the details of this job because we already wrote a series about “Creating Hotel Booking” here.

After you have your own booking data, save them in the json file following this format. In my case, my json file is located in js/booking-data.json.

To get information about vacancies, check-in date, and check-out date from the json file above, change the code in the content-single-hotel.php file as follows:

<table>
    <thead>
        <th>Images</th>
        <th>Room name</th>
        <th>Suitable</th>
        <th>Price per night</th>
        <th>Book</th>
    </thead>
    <tbody>
        <?php
        $rooms = rwmb_meta( 'group_room' );
        foreach ( $rooms as $room_key => $room ) :
            ?>
            <tr>
                <td class="image-room">
                    <div class="gallery-side-popup">
                    <?php
                    foreach ( $room['gallery-images-room'] as $image ) {
                        $img_url_full = wp_get_attachment_image_src( $image, 'full', false );
                        $img_url_small = wp_get_attachment_image_src( $image, 'thumbnail', false );
                        ?>
                        <a href="<?php echo $img_url_full[0]; ?>"><img src="<?php echo $img_url_small[0]; ?>"></a>
                        <?php
                    }
                    ?>
                    </div>
                </td>
                <td class="room-information">
                    <span><a class="room-name" href="#<?php echo $key ?>"><?php echo $room['room_name']; ?></a></span>
                    <br>
                    <b>Total area:</b>
                    <?php
                    echo $room['room-area'];
                    ?>
                    <div class="hotel-amenities">
                        <b>Facilities</b>
                        <ul>
                        <?php
                        foreach ( $room['room_facilities'] as $room_facilities ) {
                            echo '<li>' . $room_facilities . '</li>';
                        }
                        ?>
                        </ul>
                    </div>
                </td>
                <td class="amount">
                <?php
                echo 'Adults: ' . $room['adults'] . '<br>
                        Children: ' . $room['children'];
                ?>
                </td>
                <td class="price"><?php echo $room['price'] . ' $'; ?></td>
                <td class="pre-order">
                    <button class="btn btn-main">Book</button>
                    <?php
                    $get_hotel_id = get_the_ID();
                    $array_room   = justread_get_room_unavailability( $get_hotel_id, $room_key );
                    $number_room_unavailability = $room['total_room'] - count( array_unique( $array_room, SORT_REGULAR ) );
                    ?>
                    <p style="line-height: 1.4; margin-top: 20px; color: #ff3131;"><?php echo 'Our last ' . $number_room_unavailability . ' rooms'; ?></p>
                </td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

You should pay attention to the following code:

  • $array_room = justread_get_room_unavailability( $get_hotel_id, $room_key ); is used to call the justread_get_room_unavailability function. This function will return the array data of the booked rooms at the date that users are searching for on the single page.
  • $number_room_unavailability = $room['total_room'] - count( array_unique( $array_room, SORT_REGULAR ) ); This code is to count the number of vacancies of each room type by subtracting the booked rooms number from the total rooms.

Next, add this code to the functions.php file to declare the justread_get_room_unavailability function:

function justread_get_room_unavailability( $get_hotel_id, $room_key ) {
    $booking_data = json_decode( file_get_contents( get_stylesheet_directory_uri() . '/js/booking-data.json' ) );
    $search_check_in  = $_POST['check-in-date'];
    $search_check_out = $_POST['check-out-date'];
    $array = [];
    foreach ( $booking_data as $key => $data ) {
        $hotel_id       = $data->hotel_id;
        $room_type      = $data->room_type;
        $room_check_in  = $data->check_in;
        $room_check_out = $data->check_out;

        if ( $hotel_id !== $get_hotel_id ) {
            continue;
        }
        if ( $room_type !== $room_key + 1 ) {
            continue;
        }
        if ( ( strtotime( $room_check_in ) <= strtotime( $search_check_in ) && strtotime( $room_check_out ) >= strtotime( $search_check_in ) ) || ( strtotime( $room_check_in ) <= strtotime( $search_check_out ) && strtotime( $room_check_out ) >= strtotime( $search_check_out ) ) ) {
            $array[] = [
                'room_type' => $room_type,
                'number'    => $data->number,
            ];
        }
    }
    return $array;
}

We’ve completed the filter for filtering vacancies by check-in and check-out dates on the Hotel single pages. To check if this filter works accurately, I tested it as below.

Assuming that my hotel has 2 room types with the booking date information saved in the json file like this:

Room type Room number Check-in date Check-out date
Superior Double City View 1 09-30-2020 10-01-2020
Superior Double City View 2 10-03-2020 10-04-2020
Superior Double City View 3 09-30-2020 10-02-2020
Deluxe Triple Room with City View 1 10-03-2020 10-04-2020
Deluxe Triple Room with City View 2 10-05-2020 10-07-2020
Deluxe Triple Room with City View 3 10-07-2020 10-08-2020

When I search for vacancies from 10/01/2020 to 10/03/2020, if the filter works well, I will receive the result of two Deluxe rooms and no Superior room. In fact, when I tested on my website, the filter returned the accurate information:

The filter work accurately on my WordPress OTA website.

That’s all done! We’ve successfully finished creating a filter on the single page of each hotel to filter by check-in, check-out dates.

Last Words

With the series “Create an OTA website like booking.com with Meta Box”, you can completely build a professional and modern hotel booking system for the OTA website with effective filter systems. These filters can support users to search for hotels and rooms, making their booking extremely quicker and more convenient.

Achieving the methods of building a successful OTA site for your clients or for your own is no more a rocket science! Happy creating WordPress websites, and don’t forget to follow our upcoming article.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

Leave a Reply

Your email address will not be published. Required fields are marked *