Xây dựng website đặt phòng khách sạn với Meta Box (Phần 1)

Trong series bài viết này, mình sẽ hướng dẫn bạn tạo một website đặt phòng khách sạn sử dụng Meta Box Plugin. Thường thì với một website đặt phòng khách sạn sẽ có 4 trang cơ bản như sau:

1. Trang thông tin về từng phòng khách sạn;
2. Trang đặt phòng từ backend để nhân viên nội bộ tự đặt booking;
3. Trang đặt phòng từ frontend cho phép khách hàng tự đặt booking;
4. Trang quản lý các đặt phòng ở backend.

Mình sẽ lần lượt hướng dẫn bạn tạo các trang này ở 4 bài viết trong cùng series này nhé. Còn riêng phần tài khoản của khách để đặt phòng, thì bạn có thể tham khảo series bài Cách thêm Guest Author cho WordPress của mình nhé.

Nhưng trước hết, để thực hiện được toàn bộ các yêu cầu trên đây, bạn cần chuẩn bị như sau:

Chuẩn bị

Bạn cần cài đặt các plugin và theme sau đây:

• Meta Box Plugin: là framework cho phép bạn tạo và chỉnh sửa các custom fields trong WordPress;
• MB Custom Post Type: là một tiện ích mở rộng miễn phí của Meta Box, cho phép tạo và quản lý các loại custom post type và custom taxonomy thông qua một giao diện dễ sử dụng;
• MB Frontend Submission: là một tiện ích mở rộng của Meta Box, cho phép hiển thị các custom fields ở frontend để nhập liệu;
• Meta Box Builder: là một tiện ích mở rộng của Meta Box, cho phép bạn tạo, chỉnh sửa và quản lý các custom fields trên một giao diện trực quan. Nếu bạn ngại code, bạn nên dùng plugin này. Còn nếu không, thì ở bước tạo các custom fields, bạn cần tự code nhé. Trong bài này mình có sử dụng Meta Box Builder để các bạn hình dung dễ dàng hơn;
• Meta Box Group: cũng là một tiện ích mở rộng của Meta Box, cho phép bạn nhóm các fields lại hoặc nhân bản các fields dễ dàng;
• Theme: để tiết kiệm thời gian làm giao diện, mình sử dụng một theme miễn phí là Justread của Gretathemes.com. Trong trường hợp bạn dùng page builder, thì Meta Box cũng tương tích hoàn toàn với các page builder như Elementor hay Beaver Builder và có thể lấy dữ liệu trực tiếp từ field ra frontend mà không cần code.

Bạn nhớ kích hoạt toàn bộ các plugin và theme trên nhé.

Bây giờ, chúng ta cùng bắt tay vào làm phần đầu tiên nhé:

Phần 1: Tạo trang thông tin phòng khách sạn

Bước 1: Tạo một Custom Post Type mới

Đầu tiên, mình sẽ tạo một custom post type mới để dùng cho các trang thông tin về từng phòng khách sạn. MB Custom Post Type sẽ giúp mình làm việc này mà không cần dùng code.

Trong giao diện admin dashboard, bạn tìm đến menu Meta Box > Post Types > New Post Type.

Bạn điền thông tin cho post type này nhé và nhấn Publish.

Sau đó, bạn sẽ thấy một menu mới tên là Room (tên của loại post type mình vừa tạo) xuất hiện tại admin menu.

Bước 2: Tạo các custom fields để điền thông tin phòng

Với một phòng khách sạn thông thường, các trường thông tin cần có thường bao gồm:

Tên Field	Nội dung	Loại field
Title	Tên của loại phòng	Mặc định của WordPress
Quantity	Số lượng phòng thuộc loại đó	Number
Number of Adults	Số người lớn có thể ở một phòng	Number
Max Children per room	Số trẻ em tối đa có thể kèm theo	Number
Additional information	Thông tin khác cần khách hàng chú ý	WYSIWYG
Gallery	Thư viện ảnh của phòng	Image Advanced
Price	Giá niêm yết	Number

Trong đó:

• Mình dùng Title là trường mặc định của WordPress để đại diện cho tên của mỗi loại phòng. Các trường còn lại là cần tạo mới;
• Trường Price: để đơn giản hóa trong bài hướng dẫn này, mình dùng loại field là Number. Nhưng nếu trường hợp một loại phòng của bạn có nhiều mức giá khác nhau cho ngày thường, cuối tuần và ngày lễ, thì bạn có thể tham khảo cách làm là tạo thêm nhiều trường để điền giá nhé.

Tạo Field Group

Trước khi tạo các field, ta cần tạo một field group (hay còn gọi là meta box) để chứa các field ta cần.

Bạn tìm đến menu Meta Box > Custom Fields > Add New.

Bạn điền thông tin cho field group này và ở tab Settings của field group, bạn chọn loại post type muốn hiển thị là loại post type bạn tạo ở bước 1 nhé.

Tiếp theo, chúng ta lần lượt tạo các field bên trong field group này nhé.

Tạo custom fields loại Number

Vẫn trong giao diện Edit Field Group trên, bạn nhìn sang cột bên trái, chọn loại field bạn cần là Number. Ngay tức khắc một custom field loại Number sẽ xuất hiện ở khu vực bên phải. Bạn điền các thông tin cho field là xong.

 

Ở đây có 4 thông tin là số phòng, số người, số trẻ em, và giá là dạng số, nên bạn tạo 4 field loại Number và điền thông tin tương ứng nhé.

Tạo custom field loại WYSIWYG

Tương tự như cách tạo field loại Number, ở cột bên trái, bạn chọn tab Advanced > WYSIWYG và điền thông tin cho field là xong.

Tạo custom field loại Image Advanced để làm Gallery

Ở cột bên trái, bạn chọn tab Upload > Image Adv. (tức Image Advanced) và điền thông tin cho field ở phía bên phải.

Cuối cùng, bạn sẽ có các fields bên trong một field group như sau:

Bạn nhấn nút Upload ở góc trên bên phải để lưu các custom fields này lại nhé. Sau đó, khi bạn tạo một bài viết mới loại Room, bạn sẽ thấy các field được hiển thị như sau:

Bước 3: Tạo taxonomy để phân biệt các loại phòng

Nếu khách sạn của bạn có nhiều phòng cùng một loại phòng, bạn sẽ cần tạo taxonomy để phân nhóm các loại phòng đó, ví dụ: single, double, triple, quad, queen, king, twin.

Mình sẽ tạo một taxonomy mới có tên là room-type để bạn tạo các loại phòng như trên. MB Custom Post Type của Meta Box cũng hỗ trợ bạn làm việc này luôn.

Trong admin dashboard, bạn tìm đến menu Meta Box > Taxonomies > Add New.

Bạn điền thông tin cho taxonomy này, và ở mục Assign To Post Types phía bên phải, bạn chọn tên loại post type mà bạn đã tạo ở bước 1 nhé.

Bạn nhấn Publish để lưu taxonomy lại. Sau đó, bạn đến menu Room (loại post type bạn tạo ở bước 1) để tạo các loại phòng mà bạn cần.

Tại menu Room, chọn Room Types và nhập tên các loại phòng bạn cần vào ô Name > Add new Room Type. Thao tác này thực ra giống hệt với cách bạn thêm một Category cho bài viết thông thường của bạn thôi nhé.

Cuối cùng, bạn thử tạo một bài viết mới cho một phòng khách sạn, bạn sẽ thấy như sau:

Bước 4: Hiển thị thông tin phòng khách sạn ra frontend

Ở bước này, chúng ta sẽ cần lấy giá trị của các custom fields đã tạo ở trên và cho hiển thị ra frontend. Thao tác này mình đã có hướng dẫn chi tiết ở các bài trước, bạn có thể tham khảo nhé:

• Cách 1: dùng code để lấy giá trị của fields và hiển thị ra frontend > Tham khảo bài viết: Cách tạo trang giới thiệu sản phẩm bằng Meta Box Plugin.
• Cách 2: nếu bạn dựng trang bằng page builder (Elementor hoặc Beaver Builder), Meta Box có hỗ trợ bạn lấy giá trị các fields trực tiếp từ frontend thông qua các widget / module mà không cần code > Tham khảo bài viết: Cách tạo trang tin rao vặt dùng Meta Box.

Lời cuối

Đến đây, bạn đã hoàn thành việc tạo một trang thông tin về phòng khách sạn để khách hàng của bạn có thể tìm hiểu về từng phòng khách sạn trước khi đặt phòng rồi. Các bạn đón xem tiếp các phần sau để xem hướng dẫn của mình về việc tạo trang đặt booking nhé.

• Tạo Dynamic Favicon cho mỗi bài viết
• Xây dựng website đặt phòng khách sạn với Meta Box (Phần 1)