Search cha con trong wordpress sử dụng ajax

Ở bài hôm trước mình đã hướng dẫn cho các bạn search cha con trong wordpress theo các thông thường. Nhưng cách đó chỉ phù hợp cho các website có dữ liệu nhỏ và vừa, các website dữ liệu lớn và phần cấp sâu thì dễ bị TOANG 😀

Vì thế hôm nay mình sẽ hướng dẫn cho các bạn cách cũng search cha con nhưng sẽ dùng ajax.

Tạo form search cha con html

Cũng giống như bài trước cấu trúc form ở bài này cũng giống hoàn toàn. Mình sẽ copy lại để các bạn dễ theo dõi nha.

Các bạn copy đoạn code này vào khu vực cần hiển thị form search nha. Đoạn code trên chỉ mới là html chưa có giao diện các bạn về thêm css vào để cho giao diện phù hợp nha.

<form action="/" method="GET" role="form">
 <input type="hidden" name="post_type" value="bat-dong-san">
 <div class="form-group">
  <select name="quan-huyen" id="quan-huyen" class="form-control" required="required">
   <option value="">Chọn Quận/Huyện</option>
   <?php $args = array( 
       'hide_empty' => 0,
       'taxonomy' => 'khu-vuc',
       'parent' => 0
       ); 
       $cates = get_categories( $args ); 
       foreach ( $cates as $cate ) {  ?>
     <option value="<?php echo $cate->slug; ?>"><?php echo $cate->name; ?></option>
   <?php } ?>
  </select>
 </div>
 <div class="form-group">
  <select name="xa-phuong" id="xa-phuong" class="form-control">
   <option value="">Chọn Xã/Phường</option>
  </select>
 </div>
 <div class="form-group">
  <input type="text" name="s" id="keyword" class="form-control" placeholder="Từ khóa tìm kiếm..." autocomplete="off">
 </div>
 <button type="submit" class="btn btn-primary">Tìm kiếm</button>
</form>

Code chức năng chọn thằng cha show thằng con bằng ajax

Nếu các bạn có đọc qua bài viết ajax trong wordpress sẽ biết để sử dụng ajax chúng ta cần phải xử lý 2 phần: Phần front end và phần backend

Xử lý phần frontend jquery

Chèn đoạn code này vào file footer.php của theme đang dùng nha.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
 var ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
 $('#quan-huyen').change(function(event) {
  var id = $(this).val();
  $.ajax({
   url: ajaxUrl,
   type: 'POST',
   dataType: 'html',
   data: {
    action: 'showChild',
    slug: id
   },
  })
  .done(function(data) {
   $('select#xa-phuong').html(data);
  })
  .fail(function() {
   console.log("error");
  })
  .always(function() {
  });
 });
</script>

Đoạn code trên chúng ta bắt sự kiện khi thay đổi Quận/Huyện thì sẽ gọi 1 cái ajax gởi lên phía backend 2 nội dung đó là: action và slug

Sau đó nhận dữ liệu data về add vào select Xã/Phường.

Lưu ý: Bạn nào trong dự án có chứa khai báo jquery rồi thì xóa dòng đầu tiên đi nha

Xử lý phần backend search cha con

Các bạn chèn đoạn code sau vào file functions.php của theme đang sử dung nha.

add_action('wp_ajax_showChild', 'showCateFunc');
add_action('wp_ajax_nopriv_showChild', 'showCateFunc');
function showCateFunc() {
 if(isset($_POST['slug']) && $_POST['slug']){
  $slug = $_POST['slug'];
  $parent = get_term_by('slug', $slug, 'khu-vuc');
  $args = array( 
      'hide_empty' => 0,
      'taxonomy' => 'khu-vuc',
      'parent' => $parent->term_id
      ); 
      $cates = get_categories( $args );
      echo '<option value="">Chọn Xã/Phường</option>';
      foreach ( $cates as $cate ) {  ?>
    <option value="<?php echo $cate->slug; ?>"><?php echo $cate->name; ?></option>
  <?php }
 } else {
  echo '<option value="">Chọn Xã/Phường</option>';
 }
 die();
}

Đoạn code trên thực hiện chức năng nhận dữ liệu bằng phương thức POST, sau đó get những giá trị con cuả nó và trả kết quả về cho phía front end.

Như vậy là chúng ta đã thực hiện xong việc chọn thằng cha và show thằng con. Việc bây giờ là xử lý đoạn search trên nữa là xong

Xử lý dữ liệu search

Phần này cũng tương tự chức năng của bài trước, mình sẽ code cho các bạn dễ theo dõi nhé.

Chèn đoạn code này vào file search.php của theme đang dùng nha.

<?php
 $post_type  = isset($_GET['post_type']) && $_GET['post_type'] ? $_GET['post_type'] : 'post';
 $district = isset($_GET['quan-huyen']) && $_GET['quan-huyen'] ? $_GET['quan-huyen'] : '';
 $location  = isset($_GET['xa-phuong']) && $_GET['xa-phuong'] ? $_GET['xa-phuong'] : $district;
 $key   = isset($_GET['s']) && $_GET['s'] ? $_GET['s'] : '';
 $args = array(
  'showposts'  => 10,
  'post_type'  => $post_type,
  's'    => $key,
  'khu-vuc'  => $location
 );
?>
<?php $the_query = new WP_Query( $args ); ?>
<?php if( $the_query->have_posts() ): ?>
<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
 <p><?php the_title(); ?></p>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

Tổng kết:

Hôm nay mình đã hướng dẫn cho bạn cách để search cha con sử dụng ajax trong wordpress. Hi vọng mình đã giúp bạn một phần nào trong quá trình lập trình theme.

Chào thân ái và quyết thắng.

À các bạn có thể ghé site học wordpress để ủng hộ mình nha 🙂