Làm thế nào thêm bộ lọc tình trạng đơn hàng trong trang Tài Khoản, hôm nay chothemewp.com sẽ hướng dẫn các bạn thực hiện nhé

Để làm có thể tham khảo snippet code này

Bước 1 – Hiển thị danh sách bộ lọc

add_action( 'woocommerce_before_account_orders', 'chothemewp_my_account_orders_filters' );

function chothemewp_my_account_orders_filters() {
  echo '<p>Filter by: ';
  $customer_orders = 0;
  foreach ( wc_get_order_statuses() as $slug => $name ) {
     $status_orders = count( wc_get_orders( [ 'status' => $slug, 'customer' => get_current_user_id(), 'limit' => -1 ] ) );
     if ( $status_orders > 0 ) {
        if ( isset( $_GET['status'] ) && ! empty( $_GET['status'] ) && $_GET['status'] == $slug ) { 
           echo '<b>' . $name . ' (' . $status_orders . ')</b><span class="delimit"> - </span>';
        } else echo '<a href="' . add_query_arg( 'status', $slug, wc_get_endpoint_url( 'orders' ) ) . '">' . $name . ' (' . $status_orders . ')</a><span class="delimit"> - </span>';
     }
     $customer_orders += $status_orders;
  }
  if ( isset( $_GET['status'] ) && ! empty( $_GET['status'] ) ) {
     echo '<a href="' . remove_query_arg( 'status' ) . '">All statuses (' . $customer_orders . ')</a>';
  } else echo '<b>All statuses (' . $customer_orders . ')</b>';
  echo '</p>';
}

Đoạn mã này là một phần của mã nguồn WordPress và WooCommerce, được sử dụng để thêm bộ lọc vào trang quản lý đơn hàng của người dùng. Hãy xem xét từng phần trong đoạn mã:

add_action( 'woocommerce_before_account_orders', 'chothemewp_my_account_orders_filters' );
- Dòng này thêm một hành động vào trang quản lý đơn hàng của người dùng trước danh sách các đơn hàng.
- Hành động này sẽ gọi đến hàm chothemewp_my_account_orders_filters() khi trang được tạo.
function chothemewp_my_account_orders_filters() {
- Định nghĩa hàm chothemewp_my_account_orders_filters().
echo '<p>Filter by: ';
- In ra một đoạn văn bản để bắt đầu phần bộ lọc.
foreach ( wc_get_order_statuses() as $slug => $name ) {
- Vòng lặp foreach duyệt qua tất cả các trạng thái đơn hàng có sẵn trong WooCommerce và gán các biến $slug và $name tương ứng với mỗi trạng thái.
...
- Trong vòng lặp, hàm wc_get_orders() được sử dụng để đếm số lượng đơn hàng ứng với mỗi trạng thái và tạo các liên kết hoặc đoạn văn bản để tạo bộ lọc cho từng trạng thái.
if ( isset( $_GET['status'] ) && ! empty( $_GET['status'] ) && $_GET['status'] == $slug ) {
- Kiểm tra xem nếu đã chọn một trạng thái để lọc (thông qua tham số status trong URL) và trạng thái đang được xét có trùng khớp với trạng thái hiện tại trong vòng lặp, thì in ra đoạn văn bản bôi đậm để làm nổi bật trạng thái đó.
else echo '<a href="' . add_query_arg( 'status', $slug, wc_get_endpoint_url( 'orders' ) ) . '">' . $name . ' (' . $status_orders . ')</a><span class="delimit"> - </span>';
- Nếu không, tạo một liên kết để lọc theo trạng thái đó.
...
- Cuối cùng, đoạn mã tạo một liên kết để hiển thị tất cả các đơn hàng nếu không có trạng thái nào được chọn.

Mã này tạo ra một giao diện người dùng linh hoạt cho việc lọc các đơn hàng trong trang quản lý đơn hàng của người dùng trên WooCommerce, dựa trên trạng thái của từng đơn hàng.

Bước 2 – Nhận tham số bộ lọc qua params

add_filter( 'woocommerce_my_account_my_orders_query', 'chothemewp_my_account_orders_filter_by_status' );

function chothemewp_my_account_orders_filter_by_status( $args ) {
  if ( isset( $_GET['status'] ) && ! empty( $_GET['status'] ) ) {
     $args['status'] = array( $_GET['status'] );
  }
  return $args;
}

Đoạn code này thêm một bộ lọc vào trang tài khoản của người dùng trong phần đơn hàng (My Orders) của WooCommerce. Khi người dùng truy cập vào trang này và có một tham số truy vấn (query parameter) ‘status’ được gửi đi thông qua URL (ví dụ: ?status=pending hoặc ?status=completed), đoạn mã này sẽ thay đổi đối số của truy vấn để lọc các đơn hàng theo trạng thái được chỉ định.

Cụ thể:

Hàm chothemewp_my_account_orders_filter_by_status được gọi khi có sự kiện woocommerce_my_account_my_orders_query.
Hàm này nhận một đối số $args, đại diện cho các tham số truy vấn của đơn hàng.
Nếu tồn tại tham số ‘status’ và không rỗng (tức là người dùng đã chọn một trạng thái cụ thể), đoạn code sẽ cập nhật giá trị của $args[‘status’] thành một mảng gồm trạng thái được chọn từ tham số truy vấn.
Cuối cùng, hàm trả về $args mới, có thể đã được cập nhật nếu có tham số ‘status’ được truyền vào.

Ví dụ: Nếu bạn truy cập URL yourwebsite.com/my-account/my-orders?status=pending, nó sẽ chỉ hiển thị các đơn hàng đang chờ xử lý (pending).

Bước 3 – Thay đổi url của filter

add_filter( 'woocommerce_get_endpoint_url', 'chothemewp_my_account_orders_filter_by_status_pagination', 9999, 4 );
         
function chothemewp_my_account_orders_filter_by_status_pagination( $url, $endpoint, $value, $permalink ) {
  if ( 'orders' == $endpoint && isset( $_GET['status'] ) && ! empty( $_GET['status'] ) ) {
     return add_query_arg( 'status', $_GET['status'], $url );
  }
  return $url;
}

Hàm chothemewp_my_account_orders_filter_by_status_pagination được gọi khi có sự kiện woocommerce_get_endpoint_url.
Hàm này nhận vào 4 đối số: $url (URL hiện tại), $endpoint (điểm cuối), $value (giá trị của điểm cuối), và $permalink (URL cố định).
Nếu điểm cuối là ‘orders’ và có tham số ‘status’ được gửi đi trong URL và không rỗng, đoạn mã sẽ thêm tham số ‘status’ vào URL hiện tại.
Nếu không, hàm sẽ trả về URL ban đầu mà không thay đổi gì.

Ví dụ: Nếu bạn đang ở trang quản lý đơn hàng (yourwebsite.com/my-account/orders) và đã lọc theo trạng thái (ví dụ: yourwebsite.com/my-account/orders?status=pending), khi bạn chuyển sang trang kế tiếp hoặc trang trước, đoạn mã này sẽ giữ lại tham số ‘status’ trong URL để giữ cho bộ lọc đang hoạt động khi chuyển trang.

Cảm ơn các bạn đã đọc bài của chothemewp. Đừng quên ủng hộ chothemwp nhiều hơn nữa nhé.

Khám Phá Kho Theme WordPress Đa Dạng và Hấp Dẫn với Giá Cực Hấp Dẫn Tại chothemewp.com

Những website kiếm tiền online giúp bạn có thu nhập $1000/tháng

Mẫu web bán khóa học đỉnh cao với chuẩn SEO 7 từ ChoThemeWP

Ưu đãi lớn: Tận hưởng 40% và 35% giảm giá khi sở hữu Theme WordPress tại Chothemewp!