Tạo menu thay đổi tùy biến cho nhà hàng – P2 – Dùng Gutenberg

bài trước, chúng ta đã thử tạo một menu thay đổi tùy biến cho phép chủ nhà hàng tự vào thay đổi các món ăn trên thực đơn một cách dễ dàng. Tuy nhiên, đó là dành cho các website sử dụng page builder Elementor. Trường hợp bạn không muốn bỏ tiền ra mua plugin này, bạn có thể dùng Gutenberg để thay thế. Cách này miễn phí nhưng sẽ cần sử dụng code đôi chút. Bạn hãy xem hướng dẫn chi tiết trong bài viết này nhé.

Chuẩn bị

Khác với bài trước, bài này mình không sử dụng theme dành riêng cho Restaurant nữa mà chuyển sang dùng một theme khác hỗ trợ tốt cho Gutenberg đó là eStar để có thể tùy biến giao diện linh hoạt hơn. Theme này hoàn toàn miễn phí nên bạn cũng có thể thử nhé.

Ngoài ra, mình vẫn sử dụng WooCommerce để tạo món ăn như một sản phẩm giống như ở phần trước nhé.

Bước 1: Tạo các món ăn

Giống như ở phần một, bạn tạo mỗi món ăn là một sản phẩm trong WooCommerce nhé. Ở đây, mình vẫn dùng lại danh sách các món ăn như ở bài trước.

Tạo mỗi món ăn của nhà hàng là một sản phẩm trong plugin WooCommerce

Bước 2: Tạo trang Menu

Cũng vẫn là tạo một trang thông thường, bạn vào Pages > Add New và điền thông tin cho trang.

Với Gutenberg, chúng ta sẽ được hỗ trợ tạo các block ngay trong phần chỉnh sửa nội dung trang. Ở đây, mình chọn thêm một block dạng Columns và chọn 2 cột để làm layout cho menu.

Tạo các block ngay trong phần chỉnh sửa nội dung trang với Gutenberg
Chọn block Columns
Chia Gutenberg blog thành 2 cột
Chọn thiết kế 2 cột

Để thêm các món ăn vào trang menu, bạn chọn thêm block dạng Hand-picked Products như sau nhé.

Thêm block dạng Hand-picked Products cho trang menu

Block này cho phép bạn chọn một món ăn bất kỳ từ trong danh sách “sản phẩm” bạn đã nhập ở bước 1. Một lưu ý là trong block này, mình để số cột là 1 thôi để hiển thị cho đẹp nhé.

Block này cho phép bạn chọn một món ăn bất kỳ từ trong danh sách sản phẩm.

Cuối cùng, bạn nhấn Done để lưu menu lại.

Bây giờ, bạn sẽ thấy trang menu của bạn có giao diện và các món ăn được hiển thị như sau:

Giao diện của trang menu của nhà hàng với các món ăn được hiển thị ra.

Tuy nhiên, nhìn như này thì menu chưa được đẹp mắt lắm nhỉ. Chúng ta sẽ cùng chỉnh sửa lại giao diện một chút bằng CSS ở bước sau nhé.

Bước 3: Tùy biến giao diện trang Menu bằng CSS

Vì mình đang sử dụng Gutenberg, nên mình cần thêm đoạn code CSS sau vào cả hai file là style.cssstyle-editor.css.

Trong đó:

  • Code thêm vào file style.css là để hiển thị ngoài frontend;
  • Code thêm vào file style-editor.css là để hiển thị trong backend (phần edit trang).

.wc-block-handpicked-products .wc-block-grid__product-image,
.wc-block-handpicked-products .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {
    display: none;
}
.wc-block-handpicked-products .wc-block-grid__product {
    display: flex;
    justify-content: space-between;
}
.wc-block-handpicked-products .wc-block-grid__product .wc-block-grid__product-link {
    flex: 1;
    text-align: left;
}
.wc-block-handpicked-products .wc-block-grid__product-title {
    font-size: 24px;
    color: #fff;
}
.wc-block-handpicked-products .wc-block-grid__products {
    background-color: #000;
    border-radius: 25px;
    padding: 20px;
}
.handpicked-products__title {
    margin-bottom: 10px;
}

Sau khi thêm code vào hai file trên, quay trở lại trang menu, bạn sẽ thấy danh sách các món ăn sẽ hiển thị như sau:

Danh sách các món ăn được liệt kê trong trang menu của nhà hàng.

Trang menu của mình lúc này sẽ có giao diện như sau:

Giao diện của trang menu nhà hàng sau khi chỉnh sửa.

Bây giờ, để thay đổi danh sách các món ăn, chủ nhà hàng chỉ cần vào phần chỉnh sửa trang Menu và thao tác như sau:

Chủ nhà hàng có thể chỉnh sửa danh sách các món ăn của nhà hàng trong trang menu.

Lời kết

Bạn thấy đấy, việc tạo một menu tùy biến không quá khó đúng không. Nếu bạn sử dụng Gutenberg, thì việc bạn cần chỉ là một chút CSS để tùy chỉnh giao diện cho Menu của bạn được đẹp mắt thôi. Ngoài cách trình bày menu của mình như trên đây, bạn có thể thêm block Gutenberg bất kì nào khác để thêm ảnh chẳng hạn, giúp cho menu nhìn sinh động hơn nhé.

Hy vọng qua hai bài viết hướng dẫn tạo menu tùy biến sử dụng Elementor và Gutenberg này, các bạn đã chọn cho mình được cách làm phù hợp cho riêng mình. Nếu bạn có ý tưởng nào khác, đừng ngần ngại chia sẻ cho chúng mình bằng cách comment ở dưới bài viết 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 *