Giúp khách hàng lọc các sản phẩm dễ dàng với phương thức AJAX không tải lại trang. Các widget hỗ trợ lọc như: lọc theo thuộc tính, lọc theo giá, danh mục, theo đánh giá… Hỗ trợ các dạng hiển thị như image, color, text… Có thể tạo bộ lọc giống thegioididong chỉ với vài thao tác, không cần code thêm.
Sơ lược tính năng chính
Lọc sản phẩm theo thuộc tính sản phẩm AJAX(*).
Dễ dàng tạo bộ lọc thuộc tính với các loại hiển thị như màu sắc, hình ảnh, chữ.
Lọc sản phẩm theo danh mục AJAX(*). danh mục có thể hiển thị loại chữ hoặc hình ảnh, có tuỳ chọn chỉ hiển thị các danh mục con. Đồng thời có thể loại trừ một số danh mục ra khỏi widget lọc này.
Ở phiên bản 2.x trở lên có thể bật tùy chọn lọc category thành dạng điều hướng dến danh mục.
Lọc sản phẩm theo khoảng giá AJAX(*), có thể bật thêm tuỳ chọn custom khoảng giá phía dưới.
Lọc sản phẩm theo đánh giá AJAX(*).
Có thể bật tắt lọc không dùng AJAX.
Hiển thị các lựa chọn đã chọn để lọc sản phẩm.
Phân trang sản phẩm AJAX(*).
Orderby với AJAX(*).
Tính năng nút bấm Load more tải thêm sản phẩm.
Tính năng bật tắt ẩn hiện các widget theo danh mục chỉ định.
Bật tắt Sticky thanh bộ lọc dropdown trên mobile và cả PC như thegioididong.
Bật tắt cuộn trang đến sản phẩm khi lọc hoàn tất.
Bật tắt được tính năng kiểu hiển thị thuộc tính.
Custom được hiển thị dropdown hoặc hiện sẵn cho mỗi widget lọc.
Nhiều hiệu ứng loading đẹp, bật tắt được hiệu ứng progress bar loading.
Có sidebar riêng hiển thị ngang ở đầu trang danh mục. Hoặc có thể bỏ widget lọc ở sidebar theme của bạn hỗ trợ.
(*) AJAX: phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web, hoàn toàn không reload lại toàn bộ trang
Các tuỳ chọn chung của widget.
Tiêu đề widget.
Tiêu đề của widget là sẽ hiện thị đại diện cho widget đó ở phía người dùng khi lọc.
Hiện số sản phẩm.
Hiện số sản phẩm của widget đó, ví dụ danh mục A của bạn có 25 sản phẩm widget lọc danh mục, nhãn của danh mục A sẽ hiện thị 25 bên cạnh.
Cho phép chọn nhiều.
Khi bật tùy chọn này sẽ chọn được 1 lúc nhiều tùy chọn 1 lúc.
Bật dropdown.
Khi bật tùy chọn này, khi click vào tiêu đề của widget thì các tùy chọn của widget đó mới hiện ra.
Width(Bề rộng).
Full Width: Wiget bật tính năng này sẽ dạng Block, và có độ rộng 100%
Auto: Widget bật tính năng này sẽ dạng Inline Block, và có độ rộng tự động, và fit theo content.
Loại truy vấn.
VÀ: Chỉ hiển thị các sản phẩm có thuộc tính khớp với tùy chọn của bạn. Ví dụ bạn chọn màu Đỏ và Đen thì ở truy vấn VÀ nó chỉ hiển thị sản phẩm có hai thuộc tính Đỏ và Đen.
HOẶC: Hiển thị sản phẩm có nhiều hoặc một thuộc tính mà bạn đang chọn.
Bạn có thể ẩn widget tại một số danh mục, bấm nút chọn và tick vào những danh mục bạn muốn ẩn widget đó.
Bấm nút chọn và tick vào những danh mục mà bạn muốn widget này chỉ hiển thị tại đó.
Hướng dẫn tạo widget lọc AJAX theo danh mục.
Đây là widget giúp lọc sản phẩm theo danh mục, nếu sử dụng hãy chọn widget có tên “iSures Filter by Category”.
Bật dạng hình ảnh cho widget danh mục.
Bật tuỳ chọn sử dụng ảnh đại diện làm nhãn. Ngay lúc này bộ lọc sẽ sử dụng ảnh đại diện của danh mục để làm nhãn cho danh mục lọc. Thêm ảnh đại diện cho danh mục.(Sản phẩm > Danh mục > Thêm ảnh thu nhỏ như hình cho danh mục)
Hiển thị số sản phẩm của danh mục.
Nếu bạn muốn hiện số sản phẩm của danh mục, hãy tick vào tuỳ chọn Hiện số sản phẩm.
Chỉ hiển thị danh mục con để lọc.
Ví dụ ta có cây danh mục: Laptop(danh mục cha) > Acer, Macbook, Asus..(Danh mục con).
Và muốn hiển thị bộ lọc danh mục ẩn Laptop và chỉ hiện Acer, Macbook, Asus… hãy tick vào tuỳ chọn “ẩn danh mục cha, chỉ hiện danh mục con”.
Bạn có thể loại trừ 1 số danh mục ra khỏi widget lọc theo danh mục bằng cách bấm Chọn và tick vào những danh mục muốn loại trừ.
Hướng dẫn tạo widget lọc AJAX theo thuộc tính.
Bộ lọc thuộc tính được sử dụng khi bạn muốn khách hàng có thể lọc sản phẩm tồn tại thuộc tính đó. Ví dụ thuộc màu sắc, ram, cpu… Hãy sử dụng widget lọc thuộc tính có tên “iSures Filter By Attribute“.
Sau đây là những loại hiển thị mà widget lọc thuộc tính này hỗ trợ, mặc định hiển thị sẽ là dạng text.
Để sử dụng hãy bật tính năng hỗ trợ loại hiển thị tại phần cài đặt của plugin.
Bật tính năng hỗ trợ hiển thị cho widget thuộc tính.
Ở phần cài đặt của plugin > tab cài đặt chung > tìm đến Kiểu hiển thị thuộc tính > bật tính năng “Loại Thuộc Tính“.
Hướng dẫn tạo thuộc tính cơ bản cho sản phẩm
Đây là phần hướng dẫn cơ bản ngoài luồng.
Thêm thuộc tính
Truy cập admin , tìm đến Sản phẩm > Thêm thuộc tính > Nhập tên thuộc tính > bấm vào nút thêm thuộc tính.
Tương tự có thể thêm nhiều thuộc tính khác.
Nếu bạn đang cài đặt cho loại hiển thị thuộc của plugin filter, ở bước này có thể chọn loại hiển thị cho thuộc tính đó (Kiểu màu, hình ảnh,…).
Cấu hình chung loại cho thuộc tính sản phẩm.
Sau khi tạo thuộc tính xong, nhấn vào Cấu hình chủng loại của thuộc tính sản phẩm > Đặt tên chủng loại > Nhấn nút thêm thuộc tính.
Sau đó làm tương tự cho các chủng loại khác.
Đôi với mỗi loại thuộc tính bạn chọn trước đó, chúng ta sẽ có tuỳ chọn chủng loại (đặt ảnh, đặt màu…) cho chủng loại tại đây.
Sau đây sẽ là hướng dẫn chi tiết cho tạo các widget lọc thuộc tính sản phẩm có các loại hiển thị khác nhau:
Tạo widget lọc thuộc tính dạng màu sắc.
Khi thêm thuộc tính, hoặc chỉnh sửa thuộc tính sản phẩm > chọn dạng màu sắc tại “Loại hiển thị dành cho plugin iSures WooCommerce Ajax Product Filter“.
Sau đó cấu hình chủng loại cho thuộc tính trên. Chọn màu sắc cho từng chủng loại của thuộc tính. Xem hình dưới
Tạo widget lọc thuộc tính dạng hình ảnh.
Khi thêm thuộc tính, hoặc chỉnh sửa thuộc tính sản phẩm > chọn dạng hình ảnh tại “Loại hiển thị dành cho plugin iSures WooCommerce Ajax Product Filter“.
Sau đó cấu hình chủng loại cho thuộc tính trên. Chọn hình ảnh cho từng chủng loại của thuộc tính. Xem hình dưới
Tạo widget lọc thuộc tính dạng hình ảnh và text.
Tương tự với dạng hình ảnh bên trên.
Khi thêm thuộc tính, hoặc chỉnh sửa thuộc tính sản phẩm > chọn dạng hình ảnh tại “Loại hiển thị dành cho plugin iSures WooCommerce Ajax Product Filter“.
Sau đó cấu hình chủng loại cho thuộc tính trên. Chọn hình ảnh cho từng chủng loại của thuộc tính phần text sẽ tự động lấy tiêu đề chủng loại để làm nhãn hiển thị
Mặc định widget lọc thuộc tính hiển thị dạng text.
Để dạng hiển thị cho thuộc tính là none. Mặc định sẽ lấy tên thuộc tính làm nhãn hiển thị.
Hướng dẫn tạo widget lọc AJAX theo khoảng giá.
Widget lọc theo khoảng giá. Nếu dùng hãy chọn widget có tên “iSures Filter by Price” .
Khoảng giá gợi ý.
Đặt giá theo khoảng từ thấp nhất tới cao nhất, đặt tên ngắn gọn cho mỗi khoảng giá.
Khoảng giá cho khách tuỳ chọn
Ở phiên bản 1.1.0 chúng tôi đã update thêm tính năng custom khoảng giá.
Hãy bật tuỳ chọn này tại widget “iSures Filter by Price” .
Hướng dẫn tạo widget lọc AJAX theo Đánh giá.
Nếu bạn muốn khách hàng lọc những sản phẩm theo đánh giá sao từ 1 – 5 sao. Hãy tìm và sử dụng widget có tên “iSures Filter by Rating“.
Tuỳ chọn “Ẩn đánh giá không có sản phẩm“. Nếu bạn muốn ẩn các đánh giá sao không tồn tại sản phẩm hãy bật tuỳ chọn này.
Tạo widget các tuỳ chọn đang lọc, reset bộ lọc
Widget này sẽ hiển thị các tuỳ chọn khách hàng đang lọc. Họ có thể xem và xoá các tuỳ chọn đang lọc, hoặc reset lại bộ lọc.
Sử dụng widget có tên “iSures Chosen Filters” , đặt tên cho nút reset bộ lọc.
Dropdown và sticky những widget có dạng dropdown trên mobile.
Tính năng này sẽ tự động gom tất cả các widget có tick vào “Bật dropdown” vào chung 1 thanh trượt trên mobile và sticky lại đầu trang khi cuộn trang xuống qua khỏi vị trí thanh trượt.
Để sử dụng tính năng hãy bật tuỳ chọn này trong phần cài đặt plugin > tìm đến “Sticky bộ lọc dạng Dropdown trên mobile” bật tính năng lên, cài đặt top khi sticky bộ lọc.
Tuỳ chọn sticky trên mobile
Bật phân trang AJAX cho trang sản phẩm.
Phân trang AJAX dạng số, nếu muốn sử dụng tính năng này truy cập cài đặt của plugin > tìm đến “Bật tải AJAX” > “AJAX Phân Trang” bật tuỳ chọn này
Bật sắp xếp theo AJAX.
AJAX phần sắp xếp theo thứ tự, nếu muốn sử dụng tính năng này truy cập cài đặt của plugin > tìm đến “Bật tải AJAX” > “AJAX Sắp xếp theo” bật tuỳ chọn này.
Phân trang và sắp xếp theo với AJAX
Bật nút loadmore sản phẩm thay thế cho phân trang dạng số.
Tại khu vực cài đặt của plugin, phần Bật tải AJAX > hiển thị nút Tải thêm > đổi sang trạng thái bật.
Tắt lọc sản phẩm AJAX, cho phép tải lại trang khi lọc.
Nếu bạn muốn sử dụng các widget Lọc sản phẩm, nhưng lại muốn tải lại trang mỗi khi lọc. Hãy bật tuỳ chọn “Tắt Lọc AJAX” tại phần cài đặt của plugin > tab chung > khu vực cài đặt nâng cao.
Fix ảnh không hiện khi sử dụng lazy load image
Nếu website của bạn đang sử dụng lazy load hình ảnh, và khi lọc AJAX bị mất ảnh, hãy bật tuỳ chọn “Fix Lazy Load Image” tại phần cài đặt của plugin > tab chung > khu vực cài đặt nâng cao.
