Để có thể tạo được 1 bộ lọc chuyên nghiệp như TGDĐ thì đòi hỏi phải biết rất nhiều thứ liên quan đến ajax. Hôm nay, trong giới hạn hiểu biết của mình, mình sẽ hướng dẫn cho các bạn cách làm 1 bộ lọc cũng tương tự như của TGDĐ [ Giống đến 9,9% ] Chỉ khác ở những cái quan trọng thôi ^^.
Các bạn xem hình ảnh dưới đây để biết thứ mà mình muốn làm nhé
Các bạn follow các đoạn code dưới đây để có thể thực hiện được điều này nhé.
Xóa bộ lọc mặc định của woocommerce
Để có thể xóa bộ lọc mặc định của woocommerce thì đa phần chúng ta [ Những người biết ít về code ] sẽ dùng display:none cho nó, đúng không mọi người?
Tuy nhiên, để xóa bỏ nó hoàn toàn thì các bạn có thể tham khảo bài viết này nhé.
Hướng dẫn cách bỏ thanh woocommerce ordering mặc định của theme flatsome.
Thêm bộ lọc được custom lại giống TGDĐ đến 9,9%
Mỗi lần nói đến việc giống TGDĐ đến 9,9% vì giống mấy bạn chào bán theme giống demo đến 9,9% vậy đó ^^.
Thôi quay lại việc custom lại bộ lọc nhé. Để tạo ra các được field checkbox như demo thì chúng ta sẽ sử dụng input type checkbox nhé. Các bạn follow đoạn code dưới này để làm được điều đó nhé.
function filter_TGDD_99[]{
if[ !is_product[] ]: ;?>
Ưu tiên xem:
Giá giảm dần
Giá tăng dần
Mới nhất
Cũ nhất
jQuery[document].ready[function[] {
if [window.location.href.indexOf["price-desc"] > -1] {
jQuery['#pricedesc input[type="checkbox"]'].prop['checked', true];
}
else if [window.location.href.indexOf["price"] > -1] {
jQuery['#pricesmall input[type="checkbox"]'].prop['checked', true];
}
else if [window.location.href.indexOf["date"] > -1] {
jQuery['#datecheck input[type="checkbox"]'].prop['checked', true];
}
else if [window.location.href.indexOf["old-product"] > -1] {
jQuery['#oldproduct input[type="checkbox"]'].prop['checked', true];
}
}];
jQuery["a.deselect"].each[function[]{
this.search = "";
}];