[API] Cách tạo Custom Search API trên WordPress

https://wolfactive.dev/cach-tao-custom-search-api-tren-wordpress/

<?php
add_action('rest_api_init', 'productRegisterApiSearch');
function productRegisterApiSearch() {
  register_rest_route('product-api/v1', 'search', array(
    'methods'  => 'GET',
    'callback' => 'productApiSearchResult',
  ));
}
function productApiSearchResult($data) {
  $productList = new WP_Query(
    array(
      'post_type' => 'product',
      's'         => sanitize_text_field($data['term']),
    ));
  $productResult = array();
  while ($productList->have_posts()) {
    $productList->the_post();
    array_push($productResult,
      array(
        'title' => get_the_title(),
      )
    );
  }
  return $productResult;
}
?>

Cách tạo Custom Search API trên WordPress

Theo như các bạn cũng biết thì WordPress đã tích hợp sẵn hệ thống search trong hệ thống. Và hiệu năng search của nó rất là tốt. Nhưng để tăng tính trải nghiệm cũng như bạn muốn làm chức năng và thực hiện search. Ngay tại trang mặc định và không muốn redirect qua trang khác. Thì bài blog chia sẻ này thích hợp với bạn rồi đó 😀 😀 . Tụi mình sẽ chia sẻ cách tạo Custom Search API

Tạo Custom API Search trên WordPress

Khai báo slug API với WordPress

Trước tiên các cần phải khai báo đường dẫn API của bạn với WordPress. Bằng cách dùng đoạn code sau:

add_action('rest_api_init','productRegisterApiSearch');
function productRegisterApiSearch(){
  register_rest_route('product-api/v1','search',array(
    'methods'   =>  WP_REST_SERVER::READABLE,
    'callback'  =>  'productApiSearchResult'
  ));
}

Ở đây mình tạo slug cho api là product-api/v1/search, vậy link api lúc này của các bạn sẽ như sau: http://exemple.com/wp-json/product-api/v1/search và mình để method ở đây là WP_REST_SERVER::READABLE nó cùng nghĩa với method GET, lúc gọi api các bạn chỉ cần khai báo giao thức là GET. Và mình để một callback function khi có request tới link API tên là productApiSearchResult. Tức là khi có request từ link api này gửi lên thì function productApiSearchResult sẽ bắt đầu thực thi.

Tạo hàm callback thực thi query dữ liệu

Tiếp theo mình sẽ viết tiếp phần lấy chuỗi string từ link api và thực hiện query dữ liệu từ chuỗi string đó. Trước tiên mình sẽ khai báo function và lưu lệnh query vào biến mặc định

function productApiSearchResult($data){
  $productList = new WP_Query(array(
    'post_type'     => 'san-pham',
    'sentence'      =>   1,
    's'             => sanitize_text_field($data['term']),
  ));
}

Sau khi nhận được dữ liệu từ api thì mình sẽ lấy value của parameter term để thực hiện search trong WordPress. Lúc này link api của các bạn sẽ như sau: http://exemple.com/wp-json/product-api/v1/search?term={string} các có thể query bất kỳ post_type nào miễn là các bạn đã khai báo trước hoặc có trong trang web WordPress của các bạn. Nếu các bạn để ý ở đây mình thêm một thuộc tính trong câu query là ‘sentence’ => 1 để tăng độ chính xác khi tìm kiếm. Tức là wordpress sẽ kiếm những bài post có chứa chính xác cụm từ được truyền ở parameter term. Tiếp tục mình query ra những data mình cần và trả về để khi lúc gọi api có thể dùng tới.

Query data và trả dữ liệu về.

Sau đó mình sẽ tạo một array và đưa dữ liệu query vào array này. Sau cùng là trả về array đã tạo

function productApiSearchResult($data){
  $productList = new WP_Query(array(
    'post_type'     => 'san-pham',
    's'             => sanitize_text_field($data['term']),
  ));
  $productResult = array();
  while($productList->have_posts()){
    $productList->the_post();
    $termsSize = get_the_terms($post->ID,'size');
    $sizes = array();
    foreach ($termsSize as $term) {
      if($term->name !== "Tất cả"){
        array_push($sizes,$term->name);
      }
    };
    $picturArray = array();
    while ( have_rows('product_gallery') ) : the_row();
     array_push($picturArray,array(
        'product_picture'       => get_sub_field('product_picture'),
        'product_picture_alt'   => get_sub_field('product_picture_alt')
     )
    );
    endwhile;
    array_push($productResult,
    array(
      'title'             => get_the_title(),
      'price'             => convert_price(get_field('product_price')),
      'sale_price'        => convert_price(get_field('product_price_sale')),
      'percent_sale'      => ceil(100 - (get_field('product_price_sale')*100/get_field('product_price'))),
      'size'              => $sizes,
      'pictures'          => $picturArray
      )
    );
  }
  return $productResult;
}

Mình query ra những gì mình cần push vào array trống có sẵn. Vậy là xong rồi đó lúc này các bạn có thể dùng PostMan kiểm tra object khi gọi api này.

Đấy là thành công rồi 😀 :D. Tiếp theo chúng ta cùng đi đến phần gọi API ngoài giao diện nhé.

Gọi API ngoài giao diện

Như bài lần trước mình có để cập tới Giao tiếp API giữa JQuery và Vanilla JavaScript có gì khác nhau? thì với bài này mình sẽ thực hiện giao tiếp với api bằng fetch trong javascript.Trước tiên các bạn khởi tạo lệnh như sau.

var protocol = window.location.protocol;
var hostname = window.location.hostname; 
fetch(`${protocol}//${hostname}/wp-json/product-api/v1/search?term=${titleCheck}`)
      .then(result => result.json();)
      .then(data=> console.log(data));

Vậy là xong rồi á còn lại là các bạn muốn hiện như thế nào ở ngoài giao diện thôi.

Tổng kết

Tụi mình đã chia sẻ các bạn về cách tạo một custom search API rồi. Có thắc mắc hay đóng góp gì các bạn hãy inbox vào fanpage tụi mình nhé!!! Tụi mình sẽ phản hồi kịp thời. Cảm ơn các bạn đã theo dõi

https://www.facebook.com/Wolfactiveweb.design.SEO/