Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages

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:

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:

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:

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.

• Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
• Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
• Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages