Hướng dẫn cài đặt tìm kiếm cực nhanh cho WordPress qua Algolia

Cập nhật lần cuối 28/07/2021 by trong WordPress vào 28/07/2021 có 1326 Views

Trong bài này mình sẽ hướng dẫn các bạn cách đăng ký tài khoản và cài đặt plugin tìm kiếm cho WordPress thông qua Algolia. Plugin này cho ra kết quả tìm kiếm rất nhanhchính xác.

Plugin này hoàn toàn miễn phí và tài khoản trên Algolia cũng có bản miễn phí và thoải mái dùng cho site vừa và nhỏ. Còn các site lớn thì các bạn có thể tham khảo giá trên trang chủ algolia.com nhé

Nội dung chính trong bài bao gồm:

  1. Cách đăng ký tài khoản
  2. Cài đặt plugin WP Search with Algolia
  3. Cấu hình cơ bản
  4. Thêm giá vào kết quả tìm kiếm
  5. Câu hỏi thường gặp

Cách đăng ký tài khoản

  1. Truy cập vào website https://www.algolia.com/users/sign_up
  2. Nhập đầy đủ thông tin để đăng ký
  3. Chuyển sang tài khoản miễn phí. Xem trong video

Cài đặt plugin WP Search with Algolia

  1. Vào admin Plugins > Thêm mới
  2. Sau đó tìm plugin WP Search with Algolia
  3. Tiến hành cài đặt. Xem trong video

Cấu hình cơ bản

  1. Nhập thông tin API như hình
  2. Cấu hình sẽ tìm kiếm ở những phần nào và tiến hành Index dữ liệu

Thêm giá vào kết quả tìm kiếm

Bước này chắc là bước mong đợi nhất bài hướng dẫn vì mặc định plugin không có. Mà sản phẩm mà không hiện giá thì còn nói chuyện gì nữa phải không? 😀 các bạn xem video để hiểu rõ hơn nhé

Bước 1: Thêm code sau vào functions.php trong theme của bạn

/*
Author: levantoan.com
*/
add_filter( 'algolia_post_product_shared_attributes', 'devvn_add_price_to_algolia', 10, 2 );
add_filter( 'algolia_searchable_product_shared_attributes', 'devvn_add_price_to_algolia', 10, 2 );
function devvn_add_price_to_algolia($shared_attributes, $post){
    $product = wc_get_product( $post );
    $shared_attributes['price_html'] = $product->get_price_html();
    return $shared_attributes;
}

Bước 2:  thêm css làm đẹp cho phần giá. bạn có thể thêm vào Giao diện > Tùy biến > css bổ sung hoặc file style.css nếu theme bạn có dùng file này

/*
Author: levantoan.com
*/
.suggestion-post-title{
    color: #1a1a1a;
}
.aa-dropdown-menu .aa-suggestion em {
    background: transparent;
}
.suggestion-post-price {
    font-size: 14px;
}
.suggestion-post-price > .amount,
.suggestion-post-price > ins .amount {
    color: red;
    text-decoration: none
}
.suggestion-post-price > ins{
    text-decoration: none
}
.suggestion-post-price del {
    font-size: 12px;
    color: grey
}

Bước 3: Tạo folder và file algolia/autocomplete.php trong theme mà bạn đang dùng nhé. Với nội dùng autocomplete.php như sau

Hỏi đáp

Hỏi: Làm sao bỏ phần mô tả ngắn trong kết quả tìm kiếm?

Đáp: Bạn có thể xóa đoạn code này (dòng 32->34) trong file algolia/autocomplete.php ở bước trên như hình

Hỏi: Có tăng được số sản phẩm hiển thị trong kết quả tìm kiếm không?

Đáp: Có. Bạn hãy sửa dòng 132 trong file algolia/autocomplete.php sang số mà bạn muốn. Ví dụ là 10 như hình

 

Chúc các bạn thành công!

5/5 - (5 votes)
  • Bình luận
Sản phẩm nổi bật của Toản
x