iSures WooCommerce Ajax Product Filter là một plugin để lọc các sản phẩm, các widget tùy chọn như: lọc theo thuộc tính, lọc theo giá, danh mục… Hỗ trợ các dạng hiển thị như image, color, text…Cùng chúng tôi sơ lược về tính năng của Plugin nhé.
TÍNH NĂNG NỔI BẬT
- Lọc sản phẩm AJAX theo thuộc tính
- Hỗ trợ 3 dạng hiển thị cho thuộc tính.
- Dạng image
- Dạng color
- Dạng text bình thường
- => Mỗi thuộc tính khi tạo sẽ được chọn loại hiện thị, mỗi dạng hiển thị sẽ tương ứng với tùy chọn ảnh, hay màu khi cấu hình thuộc tính.
- 2 Kiểu truy vấn
- VÀ
- HOẶC
- Bật lọc multiple thuộc tính
- Bật tắt Dạng dropdown click.
- Bật tắt hiện số sản phẩm có trong thuộc tính
- Độ rộng cho nhãn
- Full width
- Auto
- Hỗ trợ 3 dạng hiển thị cho thuộc tính.
- Lọc sản phẩm AJAX theo danh mục
- Hỗ trợ 2 dạng hiển thị cho nhãn
- Dạng image => option bật dùng thumbnail làm nhãn
- Dạng text => tắt option dùng thumbnail làm nhãn
- 2 Kiểu truy vấn
- VÀ
- HOẶC
- Bật lọc multiple thuộc tính
- Bật tắt Dạng dropdown click.
- Ẩn danh mục cha chỉ hiện danh mục sản phẩm con.
- Độ rộng cho nhãn
- Full Width
- Auto
- Hỗ trợ 2 dạng hiển thị cho nhãn
- Lọc sản phẩm theo khoảng giá AJAX
- Dễ dàng tạo khoảng giá
- Thay đổi được vị trí khoảng giá bằng thao tác kéo thả
- Custom được nhãn hiển thị
- Thêm không giới hạn khoảng giá
- Xóa khoảng giá dễ dàng.
- Hiển thị các lựa chọn đang lọc
- Xóa từng lựa chọn
- Xóa tất cả lựa chọn
- Bật tắt Phân trang sản phẩm AJAX
- Bật tắt Orderby sản phẩm AJAX.
- Popup bộ lọc trên mobile.
Mô tả chi tiết
Mình sẽ sơ lược sơ các tính năng và các options nổi bật của Plugin iSures WooCommerce Ajax Product Filter. Những phần chung của tùy chọn sẽ giới thiệu cuối bài nhé.
Lọc sản phẩm AJAX theo thuộc tính.
Khi đăng tải sản phẩm trên Woocommerce plugin, bạn thường đánh dấu sản phẩm đấy bằng các loại thuộc tính.Ví dụ sản phẩm quần áo sẽ có Màu, Size… Sản phẩm Điện thoại sẽ có RAM, Nhu cầu sử dụng…Vì thế widget lọc sản phẩm AJAX theo thuộc tính ra đời.Hỗ trợ 3 dạng hiển thị cho thuộc tính:
- Dạng hình ảnh
- Dạng color
Như hình trên thì bạn có thể hình dung được cách thuộc tính hiển thị nhãn như nào rồi. Vậy chúng được cấu hình như thế nào? Có khó khi sử dụng không? Ok đi vào ngay câu trả lời.Đầu tiên là chọn loại hiển thị khi tạo thuộc tính
Mỗi loại hiển thị sẽ có cấu hình riêng trong từng thuộc tính được tạo.
Mặc định là none => tương ứng với nhãn là dạng text thông thường.Mỗi thuộc tính khi tạo sẽ được chọn loại hiện thị, mỗi dạng hiển thị sẽ tương ứng với tùy chọn ảnh, hay màu khi cấu hình thuộc tính.Thật đơn giản đúng không nào?
Lọc sản phẩm AJAX theo danh mục
Đây là widget giúp lọc sản phẩm theo danh mục với AJAX request.
- Ở dạng lọc theo danh mục mình code hỗ trợ 2 type hiển thị là Image và Text.
Đấy là cách cấu hình cho Widget Filter theo danh mục luôn, kết quả hiển thị bên ngoài thì vẫn như của Widget thuộc tính.
- Tùy chọn ẩn danh mục cha chỉ hiện danh mục con.
Mục đích mình code tính năng này để khi bạn sử dụng type image > sẽ không bị dư danh mục chaVí dụ như bộ lọc thương hiệu ở demo plugin. Nếu không chọn tùy chọn này kết quả sẽ kèm theo 1 danh mục nữa là Laptop , hoặc Điện thoại.
Lọc sản phẩm theo khoảng giá AJAX
Việc tạo ra filter theo giá sẽ giúp khách của bạn dễ dàng tìm kiếm sản phẩm theo túi tiền của họ.Vậy thì cách cấu hình khoảng giá sẽ như thế nào. Cùng muaplugin.com tìm hiểu cách sử dụng nhé.
Thật đơn giản với việc nhập khoảng giá, thay đổi nhãn nếu muốn, kéo, thả, thêm, và xóa.Chắc không cần nói quá nhiều về việc thao tác nhỉ? Mình hướng đến khách chưa từng quản trị website vẫn thao tác được mà không cần đọc document.
Hiển thị các lựa chọn đang lọc
Widget này mục đích là tổng hợp các lựa chọn mà khách hàng đang lọc, để dễ dàng biết đang lọc theo những thông tin gì.Dễ dàng cân nhắc, xóa bỏ lựa chọn, hoặc tiếp tục thêm, hoặc là xóa đi tất cả lọc lại.
Ngoài việc tạo ra những Wiget lọc theo tùy chỉnh của bạn. Mình còn viết thêm các tính năng AJAX request để đồng bộ, kiểu bonus thêm, đã AJAX thì AJAX hết luôn cho máu.
Bật tắt Phân trang sản phẩm AJAX
Phân trang sản phẩm dạng số > đa phần các theme WordPress sẽ hỗ trợ phần này. Vì thế mình code thêm lựa chọn bật tắt AJAX pagination.Khi bạn bật tính năng này lên khách hàng của bạn sẽ dễ dàng qua trang 2 trang 3 … 1 cách nhanh chống mà không cần load lại trang.Thật tuyệt đúng không. Option này sẽ được bật ở phần settings của plugin.
Bật tắt Orderby sản phẩm AJAX
Orderby là dạng sắp xếp sản phẩm theo, ví dụ theo giá cao đến thấp, hay thấp tới cao. Đa phần tất cả theme bán hàng đều cần, và có tính năng này.Và tính năng orderby AJAX này ra đời để xử lý việc sắp xếp sản phẩm mà không cần tải lại trang. Thật tuyệt vời đúng không ae?
Một câu hỏi đặt ra khá nhiều mỗi lần mình ra plugin là: Mobile, Tablet hiển thị như nào.?Nên nay trả lời cho mấy anh em không có điện thoại để test luôn như này.
Oke. Bây giờ sẽ là những tùy chọn chung giữa các widget mà nảy mình đã nói.
- Kiểu 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ật lọc multiple thuộc tính: 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 tắt Dạng dropdown click: Khi bật tùy chọn này, khi click mới hiện ra các tùy chọn
- Độ rộng cho nhãn
- Full Width: Wiget bật tính năng này sẽ dạng Block, và có độ rộng 100%
- Auto: Wiget bật tính năng này sẽ dạng Inline Block, và có độ rộng auto, và fix theo content.
Có thể thấy các tùy chọn mình viết có thể giúp bạn dễ dàng tùy chỉnh theo ý thích của mình.Plugin iSures WooCommerce Ajax Product Filter ra đời thì việc tạo 1 bộ lọc giống thegioididong có phải dễ dàng hơn với mọi người rồi không.
Dành cho dev
Vì để cho việc custom plugin dễ dàng, thêm vào những phần trước hoặc sau bộ lọc.Mình create 2 action để anh em dev có thể thêm nội dung trước hoặc sau bộ lọc nhé.
isures_before_filter_wrapisures_after_filter_wrap
