Hướng Dẫn Tạo Bộ Lọc Sản Phẩm (Filters) Trong Magento 2

Magento 2 là một nền tảng thương mại điện tử mạnh mẽ, cung cấp nhiều tính năng để quản lý và trưng bày sản phẩm. Một trong những tính năng quan trọng giúp cải thiện trải nghiệm người dùng và tăng doanh số bán hàng là bộ lọc sản phẩm (product filters). Bộ lọc cho phép khách hàng dễ dàng tìm kiếm sản phẩm mong muốn dựa trên các thuộc tính (attributes) như giá, màu sắc, kích thước, và nhiều tiêu chí khác. Bài viết này sẽ hướng dẫn bạn từng bước cách tạo và tùy chỉnh bộ lọc sản phẩm trong Magento 2.

Giới thiệu về Bộ Lọc Sản Phẩm trong Magento 2

Bộ lọc sản phẩm (product filters) là một phần không thể thiếu của bất kỳ trang web thương mại điện tử nào, đặc biệt là với các cửa hàng có số lượng sản phẩm lớn. Chúng giúp khách hàng thu hẹp phạm vi tìm kiếm và nhanh chóng tìm thấy những sản phẩm phù hợp với nhu cầu của họ. Việc cung cấp các bộ lọc hiệu quả không chỉ cải thiện trải nghiệm người dùng mà còn tăng khả năng chuyển đổi (conversion rate) và doanh số bán hàng.

Trong Magento 2, bộ lọc sản phẩm được xây dựng dựa trên các thuộc tính sản phẩm (product attributes). Mỗi thuộc tính có thể được cấu hình để hiển thị như một bộ lọc trên trang danh mục sản phẩm (category page) hoặc trang tìm kiếm (search page). Việc quản lý và tùy chỉnh các thuộc tính này là chìa khóa để tạo ra các bộ lọc sản phẩm hiệu quả.

Bài viết này sẽ đi sâu vào các bước cấu hình thuộc tính, tạo bộ lọc, tùy chỉnh hiển thị và giải quyết các vấn đề thường gặp khi làm việc với bộ lọc sản phẩm trong Magento 2. Chúng ta sẽ bắt đầu với việc chuẩn bị các thuộc tính sản phẩm cần thiết.

Chuẩn Bị Thuộc Tính Sản Phẩm (Product Attributes)

Trước khi tạo bộ lọc sản phẩm, bạn cần đảm bảo rằng các thuộc tính sản phẩm (product attributes) bạn muốn sử dụng làm bộ lọc đã được cấu hình đúng cách. Các thuộc tính này phải được thiết lập để có thể sử dụng trong các lớp lọc (layered navigation). Để kiểm tra và chỉnh sửa thuộc tính sản phẩm, bạn thực hiện các bước sau:

1. Đăng nhập vào trang quản trị Magento 2.
2. Đi đến Stores > Attributes > Product.
3. Tìm thuộc tính bạn muốn sử dụng làm bộ lọc.
4. Mở thuộc tính để chỉnh sửa.

Trong trang chỉnh sửa thuộc tính, có một số cài đặt quan trọng cần chú ý:

• Frontend Properties:
  • Use in Layered Navigation: Chọn "Filterable (with results)" hoặc "Filterable (no results)". "Filterable (with results)" sẽ hiển thị bộ lọc ngay cả khi không có sản phẩm nào phù hợp với lựa chọn đó, trong khi "Filterable (no results)" sẽ ẩn bộ lọc nếu không có sản phẩm nào phù hợp.
  • Use Search Results Layered Navigation: Chọn "Yes" nếu bạn muốn hiển thị bộ lọc này trên trang kết quả tìm kiếm.
  • Use in Search Results Layered Navigation Position: Xác định vị trí của thuộc tính trong danh sách bộ lọc trên trang kết quả tìm kiếm.
• Storefront Properties:
  • Visible on Catalog Pages on Storefront: Đảm bảo tùy chọn này được đặt thành "Yes" để thuộc tính hiển thị trên trang danh mục sản phẩm.

Sau khi chỉnh sửa các cài đặt này, hãy nhớ lưu lại thuộc tính. Lặp lại các bước này cho tất cả các thuộc tính bạn muốn sử dụng làm bộ lọc sản phẩm.

Lưu ý quan trọng: Sau khi thay đổi cài đặt thuộc tính, bạn cần reindex (lập chỉ mục lại) dữ liệu để các thay đổi có hiệu lực. Để reindex dữ liệu, bạn có thể sử dụng lệnh CLI (Command Line Interface) hoặc thông qua trang quản trị Magento 2.

Reindexing thông qua CLI:

php bin/magento indexer:reindex

Reindexing thông qua trang quản trị:

1. Đi đến System > Tools > Index Management.
2. Chọn tất cả các index cần reindex.
3. Chọn "Update on schedule" hoặc "Update on save" tùy thuộc vào cấu hình của bạn. Nếu bạn muốn reindex ngay lập tức, chọn "Update on save" và sau đó chọn "Submit".

Tạo và Cấu Hình Bộ Lọc Sản Phẩm

Sau khi đã chuẩn bị các thuộc tính sản phẩm, bạn có thể bắt đầu tạo và cấu hình bộ lọc sản phẩm. Magento 2 sử dụng layered navigation (điều hướng phân lớp) để hiển thị các bộ lọc trên trang danh mục sản phẩm. Để cấu hình layered navigation, bạn thực hiện các bước sau:

1. Đi đến Stores > Configuration > Catalog > Catalog.
2. Mở rộng phần Layered Navigation.

Trong phần Layered Navigation, bạn sẽ thấy các cài đặt sau:

• Display Product Count: Chọn "Yes" để hiển thị số lượng sản phẩm phù hợp với mỗi tùy chọn bộ lọc.
• Price Navigation Step Calculation: Xác định cách tính bước giá cho bộ lọc giá. Bạn có thể chọn "Automatic (equal step)" để Magento tự động tính toán bước giá, hoặc "Manual" để tự xác định bước giá.
• Price Navigation Max Price Interval: Nếu bạn chọn "Manual" cho "Price Navigation Step Calculation", bạn cần xác định khoảng giá tối đa cho mỗi bước giá.
• Attribute Navigation Display Style: Xác định cách hiển thị các thuộc tính trong bộ lọc. Bạn có thể chọn "Filter" để hiển thị các thuộc tính dưới dạng danh sách các tùy chọn, hoặc "Slider" để hiển thị các thuộc tính số dưới dạng thanh trượt.
• Enable Category Filter: Chọn "Yes" để hiển thị bộ lọc danh mục trên trang danh mục sản phẩm.

Sau khi cấu hình các cài đặt này, hãy nhớ lưu lại cấu hình.

Tùy Chỉnh Hiển Thị Bộ Lọc Sản Phẩm

Magento 2 cho phép bạn tùy chỉnh cách hiển thị bộ lọc sản phẩm để phù hợp với thiết kế và trải nghiệm người dùng của cửa hàng. Bạn có thể tùy chỉnh vị trí, kiểu dáng và nội dung của bộ lọc.

Thay Đổi Vị Trí Bộ Lọc

Theo mặc định, bộ lọc sản phẩm được hiển thị ở cột bên trái của trang danh mục sản phẩm. Tuy nhiên, bạn có thể thay đổi vị trí này bằng cách chỉnh sửa layout XML của trang danh mục sản phẩm. Để làm điều này, bạn cần tạo một module tùy chỉnh hoặc chỉnh sửa theme hiện tại của bạn.

Trong file catalog_category_view.xml của theme hoặc module tùy chỉnh, bạn có thể sử dụng các block và container để di chuyển vị trí của block catalog.leftnav, block này chịu trách nhiệm hiển thị bộ lọc sản phẩm.

Ví dụ, để di chuyển bộ lọc sản phẩm lên trên cùng của trang, bạn có thể thêm đoạn code sau vào file catalog_category_view.xml:

            <move element="catalog.leftnav" destination="content.top" before="-"/>
        

Sau khi thay đổi layout XML, bạn cần clear cache để các thay đổi có hiệu lực.

Tùy Chỉnh Kiểu Dáng Bộ Lọc

Bạn có thể tùy chỉnh kiểu dáng của bộ lọc sản phẩm bằng cách sử dụng CSS (Cascading Style Sheets). Bạn có thể thêm CSS tùy chỉnh vào theme của bạn để thay đổi màu sắc, phông chữ, kích thước và các thuộc tính khác của bộ lọc.

Để thêm CSS tùy chỉnh, bạn có thể tạo một file CSS mới trong thư mục web/css của theme của bạn và thêm các quy tắc CSS vào file này. Sau đó, bạn cần khai báo file CSS này trong file default_head_blocks.xml của theme của bạn.

Ví dụ, để thay đổi màu nền của bộ lọc sản phẩm thành màu xanh, bạn có thể thêm đoạn code sau vào file CSS của bạn:

            .block-layered-nav {
                background-color: #f0f8ff; /* AliceBlue */
            }
        

Sau khi thêm CSS tùy chỉnh, bạn cần clear cache và deploy static content để các thay đổi có hiệu lực.

Để deploy static content, bạn có thể sử dụng lệnh CLI:

            php bin/magento setup:static-content:deploy -f
        

Tùy Chỉnh Nội Dung Bộ Lọc

Bạn có thể tùy chỉnh nội dung của bộ lọc sản phẩm bằng cách ghi đè các template PHTML (PHP HTML) của block catalog.leftnav. Các template này chịu trách nhiệm hiển thị các tùy chọn bộ lọc và các thành phần khác của bộ lọc.

Để ghi đè một template PHTML, bạn cần sao chép template đó từ thư mục vendor/magento/module-catalog/view/frontend/templates/layer vào thư mục app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/templates/layer của theme của bạn. Sau đó, bạn có thể chỉnh sửa template đã sao chép để thay đổi nội dung của bộ lọc.

Ví dụ, để thay đổi tiêu đề của bộ lọc "Category", bạn có thể sao chép file vendor/magento/module-catalog/view/frontend/templates/layer/filter.phtml vào thư mục app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/templates/layer/filter.phtml và chỉnh sửa file này để thay đổi tiêu đề.

Các Vấn Đề Thường Gặp và Cách Giải Quyết

Trong quá trình tạo và tùy chỉnh bộ lọc sản phẩm trong Magento 2, bạn có thể gặp phải một số vấn đề. Dưới đây là một số vấn đề thường gặp và cách giải quyết:

• Bộ lọc không hiển thị:
  • Kiểm tra xem thuộc tính sản phẩm đã được cấu hình để sử dụng trong layered navigation chưa.
  • Đảm bảo rằng bạn đã reindex dữ liệu sau khi thay đổi cài đặt thuộc tính.
  • Kiểm tra xem block catalog.leftnav có bị ẩn hoặc di chuyển khỏi vị trí mặc định không.
• Bộ lọc hiển thị không đúng:
  • Kiểm tra xem các template PHTML của block catalog.leftnav có bị ghi đè không đúng cách không.
  • Kiểm tra xem CSS tùy chỉnh có gây ra xung đột với CSS mặc định của Magento không.
  • Kiểm tra xem cấu hình layered navigation có đúng không.
• Bộ lọc hoạt động không chính xác:
  • Kiểm tra xem các thuộc tính sản phẩm có dữ liệu đúng không.
  • Kiểm tra xem có lỗi JavaScript nào xảy ra trên trang không.
  • Kiểm tra xem có module nào xung đột với chức năng layered navigation không.

Khi gặp phải các vấn đề này, hãy kiểm tra kỹ các cài đặt, template và CSS của bạn. Sử dụng các công cụ debug (gỡ lỗi) của trình duyệt để tìm ra nguyên nhân gây ra vấn đề. Nếu bạn vẫn không thể giải quyết được vấn đề, hãy tìm kiếm sự giúp đỡ từ cộng đồng Magento hoặc thuê một chuyên gia Magento để được hỗ trợ.

Tối Ưu Hiệu Năng Bộ Lọc Sản Phẩm

Để đảm bảo rằng bộ lọc sản phẩm hoạt động hiệu quả và không ảnh hưởng đến hiệu năng của cửa hàng, bạn cần thực hiện một số biện pháp tối ưu hóa. Dưới đây là một số gợi ý:

• Sử dụng cache: Magento 2 có hệ thống cache mạnh mẽ, giúp giảm tải cho máy chủ và tăng tốc độ tải trang. Đảm bảo rằng cache đã được bật và cấu hình đúng cách.
• Tối ưu hóa database (cơ sở dữ liệu): Database là một phần quan trọng của Magento 2. Đảm bảo rằng database được tối ưu hóa và có đủ tài nguyên để xử lý các truy vấn.
• Sử dụng CDN (Content Delivery Network): CDN giúp phân phối các tài nguyên tĩnh (như hình ảnh, CSS, JavaScript) đến người dùng từ các máy chủ gần nhất, giảm độ trễ và tăng tốc độ tải trang.
• Giảm số lượng thuộc tính: Chỉ sử dụng các thuộc tính cần thiết làm bộ lọc. Số lượng thuộc tính càng nhiều, thời gian tải trang càng lâu.
• Sử dụng thuộc tính đơn giản: Ưu tiên sử dụng các thuộc tính đơn giản (như dropdown, checkbox) thay vì các thuộc tính phức tạp (như multi-select).

Việc tối ưu hóa hiệu năng bộ lọc sản phẩm là một quá trình liên tục. Bạn cần theo dõi hiệu năng của cửa hàng và thực hiện các điều chỉnh khi cần thiết.

Kết luận

Bộ lọc sản phẩm (product filters) là một công cụ quan trọng giúp cải thiện trải nghiệm người dùng và tăng doanh số bán hàng trong Magento 2. Bằng cách tạo và tùy chỉnh các bộ lọc hiệu quả, bạn có thể giúp khách hàng dễ dàng tìm kiếm sản phẩm mong muốn và tăng khả năng chuyển đổi (conversion rate). Bài viết này đã cung cấp một hướng dẫn chi tiết về cách tạo, cấu hình và tùy chỉnh bộ lọc sản phẩm trong Magento 2, cũng như các vấn đề thường gặp và cách giải quyết. Hy vọng rằng bạn sẽ áp dụng thành công các kiến thức này vào cửa hàng Magento 2 của mình.

Hãy nhớ rằng việc tạo và tùy chỉnh bộ lọc sản phẩm là một quá trình liên tục. Bạn cần theo dõi phản hồi của khách hàng và thực hiện các điều chỉnh để đảm bảo rằng bộ lọc sản phẩm luôn đáp ứng nhu cầu của họ. Chúc bạn thành công!