WooCommerce 挂钩（woocommerce_order_status_changed）无法运行 javascript

Question

i tried to run javascript in this hook, but it cant work. I am pretty sure that this hook is triggered as i can perform php insert to the database and write to debug_log. I would like to ask does it have the solution to solve it?

function.php

add_action( 'woocommerce_order_status_changed', 'your_function', 10, 3 ); 
function your_function( $order_id, $old_status, $new_status ){ 

    // This doesnt work

    // Enqueued script with localized data.
    wp_enqueue_script( 'order_status_changed_1', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js');
    wp_enqueue_script( 'order_status_changed_2', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-auth.js');
    wp_enqueue_script( 'order_status_changed_3', 'https://www.gstatic.com/firebasejs/7.3.0/firebase-firestore.js');
    wp_enqueue_script( 'order_status_changed_4', plugin_dir_url( __FILE__ ) . 'js/scripts_v1.js' );

    // Localize the script with new data
    $data = array(
        'order_number' => $order_id,
        'order_status' => $new_status,
        'action' => 'update_order_status'
    );
    wp_localize_script( 'order_status_changed_4', 'data', $data );

    // This work (Below code)

    global $wpdb;
    $sql = $wpdb->prepare("INSERT INTO `test`(`order_id`, `status`) VALUES (%s,%s)",$order_id,$new_status);
    $wpdb->query($sql);

    error_log("Trigger");
}

scripts_v1.js

var action = data.action;
if(action == "update_order_status" ){

    console.log("here");

    db.collection("orders").doc(data.order_number).update({
        orderStatus : data.order_status
    })
    .then(function() {
        console.log("Document successfully updated!");
    })
    .catch(function(error) {
        // The document probably doesn't exist.
        console.error("Error updating document: ", error);
    });
}

Answer 1

The hook might be triggered but that's not the way to enqueue scripts. Scripts are added by:

add_action( 'admin_enqueue_scripts', 'your_function')
function your_function(){
    wp_enqueue_script( 'order_status_changed_1','https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js');
}

That means your JS is not added to the page (check your Network tab in developer tools).

You could add the scripts in a different way by outputting the script directly. Or you conditionally load your scripts on the page that is loaded after the order status is changed.

That means your use the enqueue action as usual. But you add a condition for enqueuing the script:

if(is_page('order-status-changed'){
// wp_enqueue_script
}

Maybe you can give some more info surrounding the order change status, and what your objective is?

Answer 2

Hope help:

if(data.action == "update_order_status" ){ <-- edit

    console.log("here");

    db.collection("orders").doc(data.order_number).update({
        orderStatus : data.order_status
    })
    .then(function() {
        console.log("Document successfully updated!");
    })
    .catch(function(error) {
        // The document probably doesn't exist.
        console.error("Error updating document: ", error);
    });
}