Hiển thị tùy chọn xắp xếp sản phẩm trên website woocommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hiển thị tùy chọn xắp xếp sản phẩm trên website woocommerce

WooCommerce cung cấp đồ sộ các API bạn thỏa sức sáng tạo với website bán đồ của mình trên wordpress CMS. Tuy nhiên để sử dụng kho hướng dẫn code của Woo bạn phải mua bản WooCommerce trên trang http://www.woothemes.com/woocommerce/.
Những thành viên trên trang này mới có quyền xem tư liệu hướng dẫn chính thức của hãng phát hành.

Trong bài hôm nay, mình sẽ chỉ dẫn cách tạo hộp chọn lựa xắp xếp hiển thị các mặt hàng trên fronted, giống như thế này.
product-order-woo

Mặc định woocommerce không hiển thị tùy chọn này, mình tìm trong admin cũng không thấy có options cho hiển thị thẻ select chứa bản kê các kiểu xắp xếp mà chỉ cố định một kiểu xắp xếp khi tải bản kê các sản phẩm trên trang web.
def-product-sorting-woo
Bên cạnh đó bạn còn cũng có thể xắp lại thứ tự cho post type “product” theo ý định trong woocommerce bằng phương pháp sử dụng plugin Post Type Order.

Thêm tùy chọn xắp xếp

Để tạo thêm hộp lựa chọn kiểu xắp xếp động trên website, với woocommerce sử dụng hook woocommerce_catalog_ordering , nhưng bạn cần khái niệm mới hook này và chép vào nội dung sau đây:

 function woocommerce_catalog_ordering() { if(!isset($_POST['orderby'])) $_POST['orderby']='title'; //default orderby title if (isset($_POST['orderby'])) $_SESSION['orderby'] = apply_filters('woocommerce_default_catalog_orderby', $_POST['orderby']); ?>           __('Alphabetically', 'hwtheme'), 'date' =>  __('Most Recent', 'hwtheme'), 'price' =>  __('Price', 'hwtheme') )); foreach ($catalog_orderby as $id =>  $name) : echo '  '.$name.'  '; endforeach; ?>      <input type="submit" value="  "/>      <?php }  

Đoạn code trên tạo form xắp xếp với thẻ select . Bạn có thể xắp xếp mặt hàng theo tiêu đề (title), ngày tháng (date), giá (price). Thêm tên xắp xếp và chuỗi hiển thị trên select tag vào mảng tham số của filter woocommerce_catalog_orderby .
Xem thêm cách tạo custom fields cho sản phẩm trong woocommerce.

Mình đang sử dụng woocommerce version 2.1.9, thì không thấy có độ năng sort các phiên bản khác thì tôi cũng không rõ. Nhưng nếu bản woocommerce hiện tại bạn đang dùng khiếm khuyết tính năng này thì cũng biết phương pháp sử lý.

Nội dung của Hook woocommerce_catalog_ordering thực thi trong action woocommerce_pagination|woocommerce_before_shop_loop , bạn cũng đều có thể đổi lại vị trí hiển thị cùng với những nội dung có trong action woocommerce_before_shop_loop .

 remove_action('woocommerce_pagination','woocommerce_catalog_ordering',20); remove_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering',20); add_action( 'woocommerce_before_main_content', 'woocommerce_catalog_ordering', 20 );  

Mình cũng không chắc woocommerce_catalog_ordering trước đấy được quản lý bởi action nào, và để chắc chắn bạn xóa trong cả hai hook như ở trên. Sau đó di chuyển qua action khác.
Chú ý: nếu chưa xóa form sort ở địa thế cũ, mà bạn thêm vô địa thế mới thì form sort đều hiển thị cả hai vị trí.

 //remove_action('woocommerce_pagination','woocommerce_catalog_ordering',20); //remove_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering',20); add_action('woocommerce_before_shop_loop','woocommerce_catalog_ordering',20);  

Kết quả:
product-sorting-form-woo1

Bạn cũng có thể có thể khai báo thêm nhiều kiểu xắp xếp cho mặt hàng bởi hook woocommerce_catalog_orderby woocommerce_default_catalog_orderby_options (dành cho phiên bản khác).

 add_filter( 'woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby' ); add_filter('woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby'); //add new options to $sortby var passed into filter function custom_woocommerce_catalog_orderby($sortby) { $sortby['designer_asc'] = "Sort by Designer A-Z"; $sortby['designer_desc'] = "Sort by Designer Z-A"; return $sortby; }  

Kết quả, có thêm kiểu xắp xếp mới:
product-sorting-form-woo2

Sử lý xắp xếp

Bằng cách thêm thuộc tính xắp xếp vào tham số queries cho hàm WP_Queries, get_posts.., chúng ta có filter woocommerce_get_catalog_ordering_args . Bạn có thể thêm các tính chất vào biến $args .

 add_filter('woocommerce_get_catalog_ordering_args', 'custom_catalog_ordering_args'); //Function to handle choices function custom_catalog_ordering_args($args) { $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ); // Changed the $_SESSION to $_GET if ($orderby_value == "designer_asc") { $args['meta_key'] = 'designer'; $args['orderby'] = 'meta_value'; $args['order'] = "ASC"; } else if ($orderby_value == "designer_desc") { $args['meta_key'] = 'designer'; $args['orderby'] = 'meta_value'; $args['order'] = "DESC"; } elseif($orderby_value=='title'){ $args['orderby'] = 'title'; $args['order'] = "DESC"; } return $args; }  

Thay thay tên trường của sản phẩm bạn mong muốn xắp xếp cho thuộc tính meta_key .

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Hiển thị tùy chọn xắp xếp sản phẩm trên website woocommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang