将自定义ajax按钮添加到WooCommerce管理订单列表 [英] Add a custom ajax button to WooCommerce admin orders list
本文介绍了将自定义ajax按钮添加到WooCommerce管理订单列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个插件来通过商店订单页面中的按钮跟踪快递订单.这是我的代码
I am creating a plugin to track courier order via button in shop order page. This is my code
// add Tracking button in shop order admin column
add_action( 'manage_shop_order_posts_custom_column', 'dvs_add_tracking_admin_list_column_content' );
function dvs_add_tracking_admin_list_column_content( $column ) {
<button type="button" class="woocommerce-Button button mark-as-read" >Track Order</button>
<?php
}
?>
<script type="text/javascript">
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.mark-as-read').click(function(){
console.log('The function is hooked up');
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'mark_message_as_read'
},
success: function (output) {
console.log(output);
}
});
});
});
</script>
<?php
add_action('wp_ajax_mark_message_as_read', 'mark_message_as_read');
add_action('wp_ajax_nopriv_mark_message_as_read', 'mark_message_as_read');
function mark_message_as_read() {?>
<script>
alert("Hello! I am an alert box!!");
</script>
<?php
wp_send_json_success([/* some data here */]);
wp_send_json_error([/* some data here */]);
}
这是屏幕截图
但是,当我单击跟踪顺序"按钮时,什么都没有发生,它应该显示功能中定义的警报框,请帮我做错了什么?
But when I click the Track Order button nothing happens, it should display the alert-box as defined in a function, please help me what I did wrong?
推荐答案
您的代码中存在多个错误……这是使其正常工作的正确方法:
There are multiple mistakes in your code… Here is the correct way to make it work:
add_action( 'manage_shop_order_posts_custom_column', 'add_tracking_admin_list_column_content' );
function add_tracking_admin_list_column_content( $column ) {
if ( $column === 'wc_actions') {
?><button type="button" class="woocommerce-Button button mark-as-read" ><?php _e('Track'); ?></button><?php
}
}
add_action( 'admin_footer', 'admin_footer_tracking_js' );
function admin_footer_tracking_js() {
global $pagenow;
if ( $pagenow === 'edit.php' && isset($_GET['post_type']) && 'shop_order' === $_GET['post_type'] ) :
?>
<script type="text/javascript">
jQuery( function($){
$('.mark-as-read').on('click', function(){
$.ajax({
type: 'POST',
url: '<?php echo admin_url('/admin-ajax.php'); ?>',
data: {
'action': 'mark_message_as_read',
'track_order': 'yes'
},
success: function (response) {
console.log(response);
if ( response == 'yes' ) {
alert("Hello! I am an alert box!!"); // => alert box
}
}
});
});
});
</script>
<?php
endif;
}
add_action('wp_ajax_mark_message_as_read', 'get_mark_message_as_read');
function get_mark_message_as_read() {
if ( isset($_POST['track_order']) ) {
//wp_send_json_success([/* some data here */]);
//wp_send_json_error([/* some data here */]);
echo $_POST['track_order']; // Send data back to JS
die();
}
}
代码进入活动子主题(或活动主题)的functions.php文件中.经过测试,可以正常工作.
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
这篇关于将自定义ajax按钮添加到WooCommerce管理订单列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文