Skip to main content

​
3.3.4. Booking

Bố cục
Người dùng có thể lựa chọn các bố cục hiển thị dịch vụ, bao gồm: Bố cục dọc, Bố cục ngang, Trượt ngang, Tab danh mục, Danh sách dịch vụ, Nhóm danh mục.
Các kiểu bố cục hiển thị Booking: dọc, ngang, trượt ngang, tab danh mục, danh sách, nhóm danh mục

Bố cục Booking

Dữ liệu Thêm dữ liệu mới
1

Nhấn vào nút Thêm dữ liệu mới

Người dùng nhấn vào nút “Thêm dữ liệu mới” để bắt đầu thêm danh mục dịch vụ.
Nút thêm dữ liệu mới trong giao diện Booking

Nút thêm dữ liệu

2

Nhập thông tin danh mục & chọn liên kết, hình ảnh, danh mục con

  • Nhập tên danh mục và chọn link liên kết
  • Nhấn “Tải ảnh lên hoặc chọn ảnh từ thư viện” cho danh mục và banner danh mục
  • Chọn danh mục con (nếu có)
Giao diện nhập thông tin danh mục, banner và danh mục con cho Booking

Thêm dữ liệu cho danh mục Booking

3

Xác nhận thêm dữ liệu

Người dùng nhấn “Thêm dữ liệu” để hoàn tất việc thêm danh mục,
hoặc nhấn “Hủy bỏ” để hủy thao tác.
Chỉnh sửa:
1

Nhấn vào nút chỉnh sửa

Người dùng nhấn vào nút để mở trang chỉnh sửa danh mục.
Nút chỉnh sửa danh mục Booking trong giao diện quản lý

Nút chỉnh sửa

2

Chỉnh sửa thông tin danh mục

  • Nhập tên danh mục và link liên kết
  • Nhấn “Tải ảnh lên hoặc chọn ảnh từ thư viện” để thay đổi ảnh danh mục và banner danh mục
  • Chọn lại danh mục con (nếu cần)
Giao diện chỉnh sửa danh mục, ảnh và danh mục con trong Booking

Trang chỉnh sửa dữ liệu Booking

3

Lưu chỉnh sửa hoặc hủy thao tác

Người dùng nhấn “Lưu chỉnh sửa” để hoàn tất cập nhật,
hoặc nhấn “Hủy bỏ” nếu không muốn lưu thay đổi.
Xóa:
1

Nhấn vào nút xóa dữ liệu

Người dùng nhấn vào nút để xóa danh mục khỏi hệ thống.
Nút xóa danh mục Booking trong giao diện quản lý

Nút xóa

2

Xác nhận thao tác xóa

Khi hộp thoại xác nhận xuất hiện, người dùng chọn “Xóa ngay” để tiến hành xóa,
hoặc chọn “Hủy” nếu không muốn thực hiện thao tác này.
Tiêu đề Nền
  • Chọn màu nền cho tiêu đề dịch vụ bằng cách nhấn ô vuông rồi chọn màu.
Ví dụ hiển thị tiêu đề phần Booking

Tiêu đề dịch vụ

  • Bật/tắt có màu nền hoặc không có màu nền bằng nút .
  • Xóa màu nền bằng nút .
Hiển thị tiêu đề
  • Nhấn nút để bật/tắt có tiêu đề và không có tiêu đề; có thể nhập nội dung tiêu đề (ví dụ: “Danh mục dịch vụ”).
Ví dụ hiển thị tiêu đề phần Booking

Tiêu đề dịch vụ

Cỡ chữ
  • Điều chỉnh kích thước chữ cho tiêu đề tại
Ví dụ hiển thị tiêu đề phần Booking

Tiêu đề dịch vụ

Màu chữ
  • Thay đổi màu chữ tiêu đề tại
Ví dụ hiển thị tiêu đề phần Booking

Tiêu đề dịch vụ

Hiển thị icon
  • Bật/tắt hiển thị icon trong tiêu đề bằng nút .
Danh mục chính Nền
  • Chọn màu nền cho danh mục chính bằng cách nhấn ô vuông rồi chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Bật/tắt màu nền bằng nút .
  • Xóa màu nền bằng nút .
Hiển thị icon / hình ảnh
  • Bật/tắt hiển thị icon/hình ảnh cho danh mục chính bằng nút .
Kích thước
  • Nhập hoặc tăng/giảm kích thước của danh mục chính tại
Screenshot of a deployment confirmation message that says All checks have passed.

Kiểu hình ảnh
  • Chọn kiểu hình ảnh cho danh mục chính tại
Screenshot of a deployment confirmation message that says All checks have passed.

Bo góc
Screenshot of a deployment confirmation message that says All checks have passed.

hoặc chỉnh riêng lẻ từng góc bằng nút
Screenshot of a deployment confirmation message that says All checks have passed.

Hiển thị tên danh mục
  • Bật/tắt tên danh mục bằng nút .
Kích thước / Màu sắc
  • Điều chỉnh kích thước và màu sắc cho danh mục chính tại
Screenshot of a deployment confirmation message that says All checks have passed.

Hiển thị danh mục phụ
  • Bật/tắt danh mục phụ bằng nút .
Danh mục phụ Hiển thị tên
  • Bật/tắt tên danh mục phụ bằng nút .
Hiển thị hình ảnh
  • Bật/tắt hình ảnh danh mục phụ bằng nút .
Banner Hiển thị banner
  • Bật/tắt banner bằng nút .
Chiều cao
  • Nhập hoặc tăng/giảm chiều cao của banner tại
Screenshot of a deployment confirmation message that says All checks have passed.

Lề ngoài
  • Người dùng muốn chỉnh khoảng cách trên – dưới giữa phần tử và các phần khác trên trang nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng muốn chỉnh khoảng cách trái – phải của phần tử nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nếu muốn chỉnh riêng từng bên trái hoặc phải ,chỉnh riêng lề trên hoặc lề dưới, nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

Lề trong
  • Người dùng muốn chỉnh khoảng cách trên – dưới giữa nội dung bên trong phần tử và viền của phần tử nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng muốn chỉnh khoảng cách trái – phải bên trong phần tử nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nếu muốn chỉnh riêng từng bên trái hoặc phải ,chỉnh riêng lề trên hoặc lề dưới, nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Bo góc
    • Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của header tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

hoặc điều chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Viền
    • Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của header tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút
  • Xóa viền bằng cách nhấn nút
  • Đổ bóng
    • Người dùng có thể chọn độ lớn đổ bóng của header tại ô
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nhấn biểu tượng để ẩn hoặc hiển thị hiệu ứng bóng.
  • Xóa đồ bóng bằng cách nhấn nút
Thẻ dịch vụ Lề ngoài
  • Người dùng muốn chỉnh khoảng cách trên – dưới giữa phần tử và các phần khác trên trang nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng muốn chỉnh khoảng cách trái – phải của phần tử nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nếu muốn chỉnh riêng từng bên trái hoặc phải ,chỉnh riêng lề trên hoặc lề dưới, nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

Lề trong
  • Người dùng muốn chỉnh khoảng cách trên – dưới giữa nội dung bên trong phần tử và viền của phần tử nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Người dùng muốn chỉnh khoảng cách trái – phải bên trong phần tử nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nếu muốn chỉnh riêng từng bên trái hoặc phải ,chỉnh riêng lề trên hoặc lề dưới, nhấn nút.
Screenshot of a deployment confirmation message that says All checks have passed.

Chiều cao
  • Nhập hoặc tăng/giảm chiều cao của thẻ dịch vụ tại
Screenshot of a deployment confirmation message that says All checks have passed.

Kiểu hình ảnh
  • Chọn kiểu hình ảnh của thẻ dịch vụ tại
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nền
    • Chọn màu nền cho header bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Bật/tắt có màu nền và không có màu nền bằng cách nhấn nút
  • Xóa màu nền bằng cách nhấn nút
  • Bo góc
    • Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của header tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

hoặc điều chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút
Screenshot of a deployment confirmation message that says All checks have passed.

  • Viền
    • Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của header tại ô nhập
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút
  • Xóa viền bằng cách nhấn nút
  • Đổ bóng
    • Người dùng có thể chọn độ lớn đổ bóng của header tại ô
Screenshot of a deployment confirmation message that says All checks have passed.

  • Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu
Screenshot of a deployment confirmation message that says All checks have passed.

  • Nhấn biểu tượng để ẩn hoặc hiển thị hiệu ứng bóng.
  • Xóa đồ bóng bằng cách nhấn nút
Hiển thị tên dịch vụ
  • Bật/tắt Tên dịch vụ bằng nút .
Hiển thị danh mục
  • Bật/tắt Danh mục bằng nút .
Hiển thị giá tiền
  • Bật/tắt Giá tiền bằng nút .
Hiển thị giá giảm
  • Chọn kiểu hiển thị giá giảm (theo phần trăm hoặc giá gốc) tại

Kiểu nút đặt lịch (icon / button)

Sản phẩm Sale
  • Bật/tắt hiển thị sale bằng nút .
Hiển thị nhãn
  • Chọn ẩn nhãn hoặc hiển thị FlashSale, Bán chạy, Mới nhất tại
Tùy chọn hiển thị nút đặt lịch dạng icon hoặc button trong Booking
Hiển thị yêu thích
  • Bật/tắt nút yêu thích bằng nút .
Hiển thị đánh giá
  • Bật/tắt số sao đánh giá bằng nút .
Hiển thị loại dịch vụ
  • Bật/tắt loại dịch vụ bằng nút .
Hiển thị thời gian dịch vụ
  • Bật/tắt thời gian dịch vụ bằng nút .
Hiển thị số lượng yêu thích
  • Bật/tắt số lượng yêu thích bằng nút .
Hiển thị số lượng đã đặt
  • Bật/tắt số lượng đã đặt/đã bán bằng nút .
Hiển thị nút đặt lịch
  • Bật/tắt nút đặt lịch bằng nút .
Kiểu nút đặt lịch
  • Chọn hiển thị nút đặt lịch ở dạng icon hoặc button.
Tùy chọn hiển thị nút đặt lịch dạng icon hoặc button trong Booking

Kiểu nút đặt lịch (icon / button)

Kiểu thẻ dịch vụ
  • Chọn hiển thị thẻ dịch vụ theo ngang hoặc dọc.
Tùy chọn thẻ dịch vụ hiển thị theo chiều ngang hoặc dọc

Kiểu thẻ dịch vụ (ngang / dọc)