Add a custom ajax button to WooCommerce admin orders list

问题

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 */]);
}

This is screenshot

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?

回答1:

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();
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

来源：https://stackoverflow.com/questions/65650264/add-a-custom-ajax-button-to-woocommerce-admin-orders-list

标签

javascript

php

jquery

ajax

woocommerce