Hướng dẫn tạo trang OTA giống booking.com với plugin Meta Box – P3 – Lọc trong trang single

Sau phần 2 của series hướng dẫn tạo trang OTA giống booking.com và agoda.com, chúng ta đã tạo được bộ lọc để người dùng tìm kiếm khách sạn trên trang archive. Còn để tìm kiếm phòng của một khách sạn nào đó, bạn hãy theo dõi phần 3 này nhé.

Trong hướng dẫn này, mình sẽ tạo bộ lọc trong trang single Hotel (giới thiệu riêng về từng khách sạn) để kiểm tra phòng trống dựa vào ngày check in, check out. Sau đây là toàn bộ chi tiết:

Bước 1: Tạo form tìm kiếm ở trang single Hotel

Trước hết, mình sẽ tạo một form tìm kiếm ở trang single Hotel để người dùng tìm kiếm phòng trống dựa trên ngày check-in, check-out. Hãy thêm đoạn code dưới đây vào file content-single-hotel.php đã tạo ở phần 1 của series này. Lưu ý là bạn phải đặt nó ở bên trên phần hiển thị các phòng nhé:

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

Giải thích:

  • $value_checkin = isset( $_POST['check-in-date'] ) ? $_POST['check-in-date'] : '';
    $value_checkout = isset( $_POST['check-out-date'] ) ? $_POST['check-out-date'] : ''; đoạn code này sẽ hiển thị ngày check in, check out sau khi người dùng nhập các thông tin này vào 2 field Check-in date, Check-out date và nhấn “Check availability”. Việc này sẽ giúp người dùng dễ kiểm tra và theo dõi thông tin mà họ đã nhập vào.
  • method="POST" dùng để lấy các giá trị (ngày tháng check in và check out) mà người dùng nhập khi click vào “Check availability”.

Sau khi hoàn thành xong, bộ lọc của mình hiển thị ở trang single hotel như sau:

Bộ lọc trên trang single hotel của website OTA giống booking.com

Bước 2: Thực hiện kiểm tra phòng trống

Ở phần này, bạn cần có dữ liệu booking của khách sạn để lọc ra phòng trống. Nhưng trong series này mình không hướng dẫn cụ thể phần booking. Thay vào đó, bạn có thể tham khảo series hotel booking của chúng mình ở đây.

Sau khi các bạn đã có dữ liệu booking thật, thì các dữ liệu của bạn cần được lưu ở file json theo như format này. Và trong bài viết này mình đặt file json này ở đường dẫn js/booking-data.json.

Từ file json trên, để lấy được thông tin phòng nào còn trống vào ngày mà người dùng đang tìm kiếm, chúng ta cần phải sửa lại phần code trong file content-single-hotel.php một chút thành như sau:

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

Ta cần chú ý các đoạn code sau:

  • $array_room = justread_get_room_unavailability( $get_hotel_id, $room_key ); dùng để gọi hàm justread_get_room_unavailability. Hàm này sẽ trả về dữ liệu dạng mảng của những phòng đã được book vào ngày mà người dùng tìm kiếm trong trang single.
  • $number_room_unavailability = $room['total_room'] - count( array_unique( $array_room, SORT_REGULAR ) ); đoạn code này sẽ đếm số phòng trống còn lại của từng loại phòng bằng cách lấy tổng số phòng trừ đi các phòng đã được đặt.

Tiếp theo, chúng ta cần khai báo hàm justread_get_room_unavailability bằng cách thêm đoạn code dưới đây vào file functions.php:

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

Đến đây, chúng ta đã hoàn thành việc tạo bộ lọc để kiểm tra phòng trống theo ngày ở trang single Hotel. Để kiểm tra xem bộ lọc này đã hoạt động chính xác chưa, thì mình đã thử một ví dụ như sau.

Giả sử khách sạn của mình có 2 loại phòng với thông tin ngày đặt phòng được lưu trong file json như sau:

Loại phòngPhòng sốNgày check inNgày check out
Superior Double City View130-09-202001-10-2020
Superior Double City View203-10-202004-10-2020
Superior Double City View330-09-202002-10-2020
Deluxe Triple Room with City View103-10-202004-10-2020
Deluxe Triple Room with City View205-10-202007-10-2020
Deluxe Triple Room with City View307-10-202008-10-2020

Khi kiểm tra từ ngày 01-10-2020 đến ngày 03-10-2020 xem khách sạn còn phòng nào trống không, thì nếu bộ lọc hoạt động đúng, sẽ cho kết quả là còn 2 phòng Deluxe và hết phòng Superior. Thực tế, khi mình kiểm tra trên web, bộ lọc đã lọc đúng thông tin như sau:

Bộ lọc trong trang single của website OTA giống booking.com được tạo bởi plugin Meta Box

Xong rồi đó, chúng ta vừa thành công tạo bộ lọc trong trang single của từng khách sạn theo dữ liệu ngày check in, check out.

Lời cuối

Qua series Tạo trang OTA giống booking.com và agoda.com với plugin Meta Box, bạn đã có được hệ thống book khách sạn thật chuyên nghiệp và hiện đại cho trang OTA. Không chỉ giúp người dùng tìm kiếm khách sạn phù hợp ở trang archive, bạn còn tạo thêm được bộ lọc để tìm phòng trong từng khách sạn, giúp cho việc đặt phòng nhanh chóng, tiện lợi.

Hy vọng rằng, các bạn sẽ tạo ra được nhiều trang web thành công hơn nữa, và đừng quên theo dõi các bài viết, series tiếp theo của chúng mình.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *