My custom button to add an item in the WooCommerce admin page doesn’t refresh the page


I am trying to add a helper button, in the WooCommerce order admin page, to save a bunch of clicks navigating to and adding a very popular item. My PHP code manages to get the button to appear and to call the JS, which does an Ajax callback to other PHP that actually calls $order->add_product() Then the JS code, taken from an example I found somewhere, “pushes” the Recalculate button, to refresh the screen and show the item having been added. But this pops up an OK? dialog and is yet another click I’d like to avoid. How does the regular Add Item code do this without anyone clicking further, i.e. on the Recalculate button? The Add button in the Add Products dialog just gets on with it.

If I comment out the Recalculate, and I manually hit Reload after my custom button, I can see that the item was duly added, just not visible until then. Neither of these outcomes is quite what I was hoping for.

in functions.php in my child theme:
/** Add a custom button to the admin order page to add SCNA Membership.
 * To save clicks when creating a new order from a paper form.
function scna_orderadmin_add_product_buttons($order)
    // Add a button that adds SCNA 1- and 2-year memberships, to save steps.
    // the button tag gets as data attributes your product id and the order id
    // later we will grab this data and send them to the server
    // 111/112/113 in wctest ( basic product, and 1 and 2 years, respectively),
    // 2279/?/? in prod.
    echo '<button id="scna_item_button"  type="button" class="button add-special-item" data-order_id="'. esc_attr($order->get_id())  .'" data-product_id="112" >Add SCNA 1-year</button>';
    echo '<button id="scna_item_button"  type="button" class="button add-special-item" data-order_id="'. esc_attr($order->get_id())  .'" data-product_id="113" >Add SCNA 2-year</button>';

 * hook to add the button
add_action('woocommerce_order_item_add_action_buttons', 'scna_orderadmin_add_product_buttons');

 * Add javascript
function scna_orderadmin_add_product_js_file()

    wp_enqueue_script( 'scna_orderadmin_add_product_js', get_stylesheet_directory_uri() ."/js/scna_orderadmin_add_product.js", array('jquery'), NULL, true );

    // send the admin ajax url to the script
    wp_localize_script( 'scna_orderadmin_add_product_js', 'mb_script_var', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

 * hook to add the javascript file
add_action( 'admin_enqueue_scripts', 'scna_orderadmin_add_product_js_file' );

 * Ajax callback
function scna_orderadmin_add_product() 
   /// Attention, to keep the example simple we will not check any ajax data. //
   // the data from the ajax call
   $order_id = intval($_POST['order_id']);

   $product_id = intval($_POST['product_id']);

   //getting order Object
   $order = wc_get_order($order_id); 

   // gettting the product
   $product = wc_get_product($product_id);

   $back_data = array('error' => 0, 'msg' => '');
   if($order !== false AND $product !== false)
       // Add the product to the order 
       $order->add_product($product, 1);

       // Save the order data

       $back_data['msg'] = 'The item was added';

       $back_data['error'] = 1;
       $back_data['msg'] = 'No item was added';

   wp_send_json( $msg );

 * hook to add the ajax callback
add_action( 'wp_ajax_scna_orderadmin_add_product', 'scna_orderadmin_add_product' );
in scna_orderadmin_add_product.js:

(function( $ ) {
    'use strict';

    $('.inside').on('click','#scna_item_button', function(){

        // get the order_id from the button tag
        var order_id = $(this).data('order_id');

        // get the product_id from the button tag
        var product_id = $(this).data('product_id');

        // send the data via ajax to the sever
            type: 'POST',
            url: mb_script_var.ajaxurl,
            dataType: 'json',
            data: {
                action: 'scna_orderadmin_add_product',
                order_id: order_id, 
                product_id: product_id
            success: function (data, textStatus, XMLHttpRequest) {

//                if(data.error == 0)
//                { 
                  // trigger the "Recalculate" button to recalculate the order price 
                  // and to show the new product in the item list
//                  $('.calculate-action').trigger('click'); 
//                }

                // show the control message

            error: function (XMLHttpRequest, textStatus, errorThrown) {


})( jQuery );

jxh 2 months 2022-09-29T09:08:43-05:00 0 Answers 0 views 0

Leave an answer