iSures WooCommerce Ajax Product Filter

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é.

Trước bộ lọc: isures_before_filter_wrap

Sau bộ lọc: isures_after_filter_wrap

Demo kết quả sau khi sử dụng hook vào trước bộ lọc