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.

Thêm một loại post type mới cho bài viết giới thiệu phòng khách sạn
Thêm một loại post type mới

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

điền thông tin cho Post Type thông tin phòng khách sạn

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.

Menu mới tên là Room xuất hiện ở admin menu
Menu mới tên là Room xuất hiện ở 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.

Thêm một Field Group mới cho phần thông tin phòng khách sạn
Thêm một Field Group mới

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

Chọn field group hiển thị cho loại post type đã tạo ở bước 1
Chọn field group hiển thị cho loại post type đã tạo ở bước 1

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.

Tạo một custom field mới loại Number
Tạo một custom field mới loại Number

 

Điền thông tin cho custom fields
Điền thông tin cho custom fields

Ở đâ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 một custom field mới loại WYSIWYG
Tạo một custom field mới loại WYSIWYG

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.

Tạo một custom field mới loại Image Advanced làm album ảnh cho phòng khách sạn
Tạo một custom field mới loại Image Advanced

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

Các custom fields cần tạo để điền thông tin phòng khách sạn
Các custom fields cần tạo để điền thông tin phòng khách sạn

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:

Các custom fields để điền thông tin phòng khách sạn hiển thị ở trang bài viết
Các custom fields để điền thông tin phòng khách sạn hiển thị ở trang bài viết

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.

Tạo một taxonomy mới để phân loại phòng khách sạn
Tạo một taxonomy mới để phân loại phòng

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

Điền thông tin cho taxonomy
Điền thông tin cho taxonomy

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

Tạo các loại phòng khách sạn
Tạo các loại phòng khách sạn

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:

Ô phân loại phòng khách sạn hiển thị ở bài viết giới thiệu từng phòng

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

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

Trả lời

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 *