Hôm nay mình sẽ hướng dẫn cho các bạn một chức năng rất hay gặp trong quá trình học lập trình theme wordpress woocommerce. Đó là chức năng hiển thị sản phẩm theo danh mục dạng tabs.

Đây kiểu hiển thị mà các bạn hay gặp trong trang chủ của các website bán hàng. Nó rút gọn không gian mà lại đẹp mắt nên được nhiều người dùng!

Hiển thị sản phẩm theo danh mục dạng tabs trong woocommerce

Demo sản phẩm hiển thị dạng tabs

Các bạn có thể xem bài viết hiển thị sản phẩm theo danh mục woocommerce trước khi xem bài này để dễ hiểu hơn nha.

Chuẩn bị giao diện sản phẩm theo tabs danh mục

Mình sẽ sử dụng chức năng tabs trong bootstrap 4 để làm chức năng này nhé. Các bạn có thể tham khảo chức năng tabs trong bootstrap 4.

Để sử dụng được bootstrap 4 các bạn nhúng các link css và js của bootstrap 4 vào dự án nha.

Code nhúng như sau:

Sau khi nhúng thư viện bootstrap 4 chúng ta có thể dùng đoạn code này để hiện code tabs

Ở đây sẽ chia làm 2 phần

  • Phần nav là các link tabs
  • Phàn thứ 2 là content tabs

Có nghĩa là khi click vào các link tabs thì phía dưới sẽ xuất hiện các content tương ứng. Các bạn chú ý khi click vào link có href=”#menu1″ thì content ở tabs có id là id=”menu1″ sẽ hiện

Ráp code wordpress hiển thị sản phẩm theo danh mục dạng tabs

Hiển thị danh mục sản phẩm (các tabs)

Để lấy danh mục sản phẩm chúng ta có đoạn code sau:

Chúng ta gán cố định tabs đầu tiên là tabs tất cả. Sau đó các tabs tiếp theo là danh mục sản phẩm.

Các bạn chú ý phần href chúng ta sẽ hiện phần slug của danh mục sản phẩm, vì slug của danh mục sản phẩm thì không trùng nhau.

Hiển thị sản phẩm theo danh mục tương ứng với các tabs

Hiển thị sản phẩm theo danh mục dạng tabs trong woocommerce

Giải thích 1 tí 😀

Ở nội dung tabs có id là id=”home” mình sẽ get ra 8 sản phẩm mới nhất tương ứng với tabs tất cả. Sản phẩm ở vị trí này sẽ show tất cả không biệt tabs nào của danh mục nào.

Ở nội dung các tabs khác, ban đầu chúng ta sẽ chạy vòng lặp get danh mục, trong mỗi danh mục được hiển thị chúng ta lại tiếp tục chạy vòng lặp get bài viết với product_cat tương ứng bằng với slug của danh mục.

Các điểm chú ý

  • Nội dung tabs (Tất cả) id=”home” sẽ hiển thị đầu tiên có gán class “active”
  • Các nội dung các tabs tiếp theo có id chính bằng slug của danh mục id=”<?php echo $cate->slug; ?>”
  • Trong vòng lặp get post chúng ta có một thông số đầu vào là ‘product_cat’ => $cate->slug đây chính là điều kiện hiển thị sản phẩm theo danh mục

Code hoàn thiện của chức năng này:

Tóm lại: 

Hôm nay mình đã hướng dẫn cho các bạn cách để làm tính năng hiển thị sản phẩm theo danh mục dạng tabs. Bài viết trong khá dài nhưng thật sự nếu bạn nắm các phần về frontend thì cũng không có chi khó cả.

Ưu điểm của việc bố trí sản phẩm theo tabs

  • Giao diện đẹp
  • Thể hiện được nhiều nội dung ra 1 page
  • Tăng khải nghiệm của người dùng

Nhược điểm

  • Nặng website (Ví dụ danh mục của bản có nhiều việc hiển thị như thế này sẽ show rất nhiều dữ liệu ra 1 page -> Nặng page)
  • Khó khăn trong việc phân trang

Hy vọng bài viết này sẽ giúp ích cho các bạn khi làm dự án cũng như là học làm theme wordpress.

Cảm ơn các bạn đã theo dõi!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native... 😂😂 tối về viết blog... (Còn tiếp...)

4
AVT