Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Last updated on January 8th, 2024 at 09:02 am

Trong bài đăng này, tôi sẽ chia sẻ một cách đơn giản để sử dụng tìm kiếm bộ lọc Ajax cho WordPress. Tôi thích sử dụng Ajax trong các dự án của mình. Nó là gọn gàng, nhẹ và nhanh chóng. Quan trọng nhất là trải nghiệm người dùng tốt hơn nhiều.

Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Trong demo này hướng dẫn ae viết form lọc danh sách các bộ film, kết quả tìm kiếm theo: Tên / Năm / Xếp hạng / Ngôn ngữ / Giới tính => A/e bắt đầu thôi 🙂

Ajax Filter trong demo này hoạt động như thế nào?

Ajax rất đơn giản chịu khó luyện tập, đưa ra tình huống và thực hiện nó. Demo lần này lọc theo (từ khóa tìm kiếm, năm, xếp hạng, ngôn ngữ, thể loại) đến máy chủ và nó sẽ thực hiện một truy vấn với dữ liệu sau đó trả về kết quả.

Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Thiết lập Post Type Movies

Copy đoạn bên dưới add vào file function.php

Giờ ít ai ngồi gõ từng dòng code dùng cái có sẵn cho nó nhanh thực tế nó trả khác gì nhau. Dưới đây là các công cụ mà bạn có thể xem qua.

  • Custom Post Type Generator – Cho phép bạn tạo custom post type nhanh chóng bằng việc chọn một số tùy chọn có sẵn và lấy toàn bộ code về. Bạn chỉ cần copy đoạn code này vào file functions.php hoặc làm plugin riêng là xong.
  • Custom Post Type UI – Plugin miễn phí cho phép tạo custom post type nhanh chóng trực tiếp trong WP-Admin.

Vậy thôi, còn các công cụ khác nó nhiều tính năng quá nên mình không đề cập tới vì rất hại não.

=> Trước khi tạo một số bài đăng về phim, chúng ta cần tạo các trường tùy chỉnh được sử dụng làm bộ lọc. Để tạo các trường cho Custom Post Type mình hay dùng Advanced Custom Field ae nào thích dùng Metabox tạo trường thì dùng tùy thuộc vào code..

Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Sau khi tạo xong các trường cho Movies => bắt đầu nhập liệu thôi

Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Tạo Shortcode cho Ajax Filter Search

Đoạn này, tạo một shortcode hiển thị Form Search dễ dàng nhét bất kì chỗ nào trên trang web bạn thích.  Đặt đoạn mã sau vào tệp functions.php.

Trên là đoạn khởi tạo shortcode [my_ajax_filter_search] để biết nó có chạy ko add thử nó vào trang bất kì kiểm tra xem nó có hoạt động không. Oke tiếp tục add thêm các trường của form vào…..

Bắt đầu đến đoạn ae cần tập chung, nhầm 1 tẹo là ko chạy được đâu :))

Thêm tập lệnh cần thiết

Tạo tệp script.js mới trong thư mục chủ đề của chúng tôi để thêm các mã javascript của chúng tôi. Thêm mã sau vào trước hàm shortcode mà chúng ta đã thêm trước đó trên tệp functions.php .

Đoạn này sử dụng wp_localize_script () để dễ dàng sử dụng tệp admin-ajax.php .

Điều tiếp theo cần làm là gọi hàm my_ajax_filter_search_scripts () bên trong hàm my_ajax_filter_search_shortcode () .

Bằng cách này, các tập lệnh cần thiết cho bộ lọc / tìm kiếm ajax sẽ tải bất cứ khi nào chúng ta sử dụng shortcode.

Chuẩn bị dữ liệu để gửi yêu cầu

Thêm mã sau vào tệp script.js

Ở đây đã thêm hai biến để dễ sử dụng và sau đó một hàm sẽ kích hoạt khi nhấn nút Search. Mã e.preventDefault (); phần ngăn tải lại trang. Bạn cũng sẽ thấy kết quả form submitted trên bảng điều khiển của trình duyệt.

Check oke thì xóa bỏ console.log(“form submitted”); thay bằng đoạn bên dưới.

Lấy kết quả Ajax Filter

Copy dán đoạn trên vào file function.php

*Giải thích:

  • Tại dòng 05 và 06, sử dụng add_action cho hàm  my_ajax_filter_search_callback () . Nếu bạn đang sử dụng một tên hàm khác, bạn có thể thay đổi wp_ajax_my_ajax_filter_search thành wp_ajax_YOUR_FUNCTION_NAME . Điều tương tự cho wp_ajax_nopriv_my_ajax_filter_search
  • Tại dòng 10, thêm header (“Content-Type: application / json”); để khai báo loại nội dung là json bởi vì, demo này sử dụng JSON để gửi kết quả trở lại trình duyệt.
  • Ở dòng 12, thêm các meta_query dựa trên các trường bộ lọc. Trả về kết quả theo bộ lọc mà bạn nhập hoặc select
  • Ở dòng 41, thêm các quy tắc tax_query vì trường hợp này sử dụng các danh mục WordPress làm Thể loại phim.
  • Cuối cùng, ở dòng 52,  ‘s’ => $ search trả lại kết quả tên phim muốn tìm kiếm
  • Sau truy vấn, tại dòng 95, chúng tôi lặp lại kết quả được mã hóa dưới dạng JSON mà chúng tôi sẽ sử dụng trong bước tiếp theo trong hàm jQuery Ajax.

Hàm jQuery Ajax

Bây giờ chúng ta sẽ sử dụng hàm jQuery Ajax để hoàn thành bước cuối cùng . Thêm mã sau vào tệp script.js .

=> thế là chạy thôi còn không chạy thì ae xem lại, đoạn mã này đã check chạy ầm ầm

Đoạn style form này ae ném vào file style.css nhé !

BONUS

Tìm kiếm đơn vị cung cấp check box ( Netflix / Amazone / Viki ….)

Bước đầu tiên thêm các trường trong ACF

Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Bổ sung thêm trường hiển thị trong form

Sau đó, hãy thêm phần javascript. Ở đây chúng tôi đang lấy các giá trị của các hộp kiểm vào một mảng.

Bên trong my_ajax_filter_search_callback()hàm trước điều kiện meta_query thể loại, hãy thêm một số mã

Bây giờ xem kết quả:

Bộ lọc và tìm kiếm Ajax đơn giản cho WordPress

Ae thông cảm tôi là code không giỏi hành văn diễn giải nó hơi lủng củng, cái này sẽ chỉnh sửa dần dần trong các bài tiếp theo. Thấy hay và ý nghĩa thì ủng hộ bằng cách chia sẻ bài viết hoặc góp ý để hoàn thiện bài viết hơn ….. Cảm ơn A/E đã ủng hộ!

 

Sử dụng Woocomerce tham khảo plugin này=> https://hungwordpress.com/share/yith-woocommerce-ajax-product-filter-premium/

Xem thêm bài viết

TEMPLATES

PLUGIN

MỜI CAFE

ủng hộ tôi