Sắp xếp sản phẩm trong woocommerce theo ý người quản trị

07/02/2017 06:39 49367

Mời anh chị theo dõi video:

Thêm cột thứ tự vào bảng quản lý sản phẩm của woocommerce

Hook filter:manage_{tên post type}_posts_columns được dùng việc này

Code chi tiết:

add_filter( 'manage_product_posts_columns', 'product_columns_2' );
function product_columns_2( $existing_columns ) {
		if ( empty( $existing_columns ) && ! is_array( $existing_columns ) ) {
			$existing_columns = array();
		}

		unset( $existing_columns['title'], $existing_columns['comments'], $existing_columns['date'], $existing_columns['product_tag'] );
		
		$columns          = array();
		$columns['ordering']         = 'Thứ tự<a href="#" class="saveorderingdddd"><span class="dashicons dashicons-filter"></span></a>';

		return array_merge( $columns, $existing_columns );

}

add_filter( 'manage_product_posts_columns', 'product_columns_2' );

function product_columns_2( $existing_columns ) {

if ( empty( $existing_columns ) && ! is_array( $existing_columns ) ) {

$existing_columns = array();

}

unset( $existing_columns['title'], $existing_columns['comments'], $existing_columns['date'], $existing_columns['product_tag'] );

$columns = array();

$columns['ordering'] = 'Thứ tự<a href="#" class="saveorderingdddd"><span class="dashicons dashicons-filter"></span></a>';

return array_merge( $columns, $existing_columns );

}

Lấy giá trị của custom field của ordering cho từng dòng

Sử dụng hook action có tên:manage_{tên post type}_posts_custom_column

Các bài viết khác có thể hữu ích với bạn

Code chi tiết như sau:

//show ordering
add_action( 'manage_product_posts_custom_column',  'render_product_columns_2' , 3);
function render_product_columns_2( $column ) {
	global $post, $the_product;

	if ( empty( $the_product ) || $the_product->id != $post->ID ) {
		$the_product = wc_get_product( $post );
	}

	switch ( $column ) {
		case 'ordering' :
		?>
			<input type="text" style="width:50px; text-align:center;" value="<?php echo  get_post_meta($post->ID,'_product_ordering',true); ?>" name="ordering[]"  />
			<?php
			break;
		
		default :
			break;
	}
}

//show ordering

add_action( 'manage_product_posts_custom_column', 'render_product_columns_2' , 3);

function render_product_columns_2( $column ) {

global $post, $the_product;

if ( empty( $the_product ) || $the_product->id != $post->ID ) {

$the_product = wc_get_product( $post );

}

switch ( $column ) {

case 'ordering' :

<input type="text" style="width:50px; text-align:center;" value="<?php echo get_post_meta($post->ID,'_product_ordering',true); ?>" name="ordering[]" />

<?php

break;

default :

break;

}

Thêm custom field vào tab general woocommerce

Code chi tiết như sau:

// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
  
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields() {
  
  global $woocommerce, $post;
   
  echo '<div class="options_group">';
  // Text Field
woocommerce_wp_text_input( 
    array( 
        'id'          => '_product_ordering', 
        'label'       => __( 'Thứ tự', 'woocommerce' ), 
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( '', 'woocommerce' ) ,
		//'value' => 0
    )
);

  echo '</div>';
}
function woo_add_custom_general_fields_save( $post_id ){
     
      
    // Text Field
    $woocommerce_text_field = $_POST['_product_ordering'];
    if( !empty( $woocommerce_text_field ) )
        update_post_meta( $post_id, '_product_ordering', esc_attr( $woocommerce_text_field ) );
	
         
}

// Display Fields

add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields

add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {

global $woocommerce, $post;

echo '<div class="options_group">';

// Text Field

woocommerce_wp_text_input(

array(

'id' => '_product_ordering',

'label' => __( 'Thứ tự', 'woocommerce' ),

'placeholder' => '',

'desc_tip' => 'true',

'description' => __( '', 'woocommerce' ) ,

//'value' => 0

)

);

echo '</div>';

}

function woo_add_custom_general_fields_save( $post_id ){

// Text Field

$woocommerce_text_field = $_POST['_product_ordering'];

if( !empty( $woocommerce_text_field ) )

update_post_meta( $post_id, '_product_ordering', esc_attr( $woocommerce_text_field ) );

}

Ajax xử lý lưu ordering

Đăng ký file js với admin backend

function my_enqueue($hook) {

    wp_enqueue_script( 'smn-ordering', get_template_directory_uri() . '/js/ordering.js' );
	wp_localize_script( 'smn-ordering', 'ordering_ob', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

function my_enqueue($hook) {

wp_enqueue_script( 'smn-ordering', get_template_directory_uri() . '/js/ordering.js' );

wp_localize_script( 'smn-ordering', 'ordering_ob', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

}

add_action( 'admin_enqueue_scripts', 'my_enqueue' );

File xử lý js

jQuery(function($){
	//alert('sdfsd;');
	$(".saveorderingdddd").click(function(){
		var post=document.getElementsByName('post[]');
		var post_ids ='';

		for(key=0; key < post.length; key++)  {
			if(key == 0){
				post_ids =post[key].value;
			}else{
				post_ids = post_ids+","+post[key].value;
			}
		
			//your code goes here
		}
		var order=document.getElementsByName('ordering[]');
		var orderings ='';

		for(key=0; key < order.length; key++)  {
			if(key == 0){
				orderings =order[key].value;
			}else{
				orderings = orderings +","+order[key].value;
			}
		
			//your code goes here
		}
		$.ajax({
            type: 'POST',
            url: ordering_ob.ajaxurl,
            data:{action: 'ordering',post_ids:post_ids,orderings:orderings},
            success: function(data){
				console.log(data);
                if(data == "data"){
					 location.reload();
				}
            }
        });
		
		return false;
	});
});

jQuery(function($){

//alert('sdfsd;');

$(".saveorderingdddd").click(function(){

var post=document.getElementsByName('post[]');

var post_ids ='';

for(key=0; key < post.length; key++) {

if(key == 0){

post_ids =post[key].value;

}else{

post_ids = post_ids+","+post[key].value;

}

//your code goes here

}

var order=document.getElementsByName('ordering[]');

var orderings ='';

for(key=0; key < order.length; key++) {

if(key == 0){

orderings =order[key].value;

}else{

orderings = orderings +","+order[key].value;

}

//your code goes here

}

$.ajax({

type: 'POST',

url: ordering_ob.ajaxurl,

data:{action: 'ordering',post_ids:post_ids,orderings:orderings},

success: function(data){

console.log(data);

if(data == "data"){

location.reload();

}

});

return false;

});

Hook action và function xử lý ajax

add_action('wp_ajax_ordering','ordering_function');
add_action('wp_ajax_nopriv_ordering','ordering_function');
function ordering_function(){
	$post_ids = explode(",",$_POST['post_ids']);
	$orderings = explode(",",$_POST['orderings']);
	for($i=0;$i<count($post_ids);$i++):
		update_post_meta($post_ids[$i], "_product_ordering", $orderings[$i]);
	endfor;
	echo "data";
	die();
}

add_action('wp_ajax_ordering','ordering_function');

add_action('wp_ajax_nopriv_ordering','ordering_function');

function ordering_function(){

$post_ids = explode(",",$_POST['post_ids']);

$orderings = explode(",",$_POST['orderings']);

for($i=0;$i<count($post_ids);$i++):

update_post_meta($post_ids[$i], "_product_ordering", $orderings[$i]);

endfor;

echo "data";

die();

}

Sắp xếp lại theo custom field trong backend

//resort list product
add_filter( 'parse_query', 'fb_custom_post_sort' );
function fb_custom_post_sort($query) {

    if ( ! is_admin() )
        return $query;

    global $current_screen;
    if ( isset( $current_screen ) && 'product' === $current_screen->post_type ) {
        $query->query_vars['orderby']  = 'meta_value_num';
        $query->query_vars['meta_key'] = '_product_ordering';
        $query->query_vars['order']    = 'ASC';
    }
}

//resort list product

add_filter( 'parse_query', 'fb_custom_post_sort' );

function fb_custom_post_sort($query) {

if ( ! is_admin() )

return $query;

global $current_screen;

if ( isset( $current_screen ) && 'product' === $current_screen->post_type ) {

$query->query_vars['orderby'] = 'meta_value_num';

$query->query_vars['meta_key'] = '_product_ordering';

$query->query_vars['order'] = 'ASC';

}

Như vậy là chúng ta đã xử lý xong phần backend còn ngoài front end thì anh chị sử dụng wp_query như sau cho mỗi truy vấn

 $args = array(
			'post_type' => 'product',
			'posts_per_page' => 12,
			'meta_key'   => '_product_ordering',
			'orderby'    => 'meta_value_num',
			'order'      => 'ASC',
			'post_status' => 'publish'
			);
			//var_dump($args);
			$wp_query = new WP_Query( $args );

$args = array(

'post_type' => 'product',

'posts_per_page' => 12,

'meta_key' => '_product_ordering',

'orderby' => 'meta_value_num',

'order' => 'ASC',

'post_status' => 'publish'

);

//var_dump($args);

$wp_query = new WP_Query( $args );

4.9/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo slide danh mục sản phẩm nổi bật trong woocommece bằng slick [ 05/11/2023 04:13 ]
Các vấn đề liên quan tới customize woocommerce [ 15/05/2023 02:30 ]
Thêm một item menu vào my account woocommerce [ 25/03/2023 08:38 ]
Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Cho phép chỉnh sửa xóa sản phẩm ở trang thanh toán checkout [ 31/08/2022 02:43 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Add to cart woocommerce with meta item [ 13/07/2022 08:11 ]
Code xử lý giỏ hàng cart woocommerce [ 08/07/2022 11:32 ]
Thêm một item vào nav my account woocommerce [ 21/06/2022 14:48 ]

Sắp xếp sản phẩm trong woocommerce theo ý người quản trị

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)