当 WooCommerce 订单进入处理状态时触发 javascript 函数

Question

我在处理 Woocommerce 订单后调用 js 函数时遇到问题。我的中有以下代码functions.php：

add_action( 'wp_enqueue_scripts', 'enqueue_so_18552010' );

add_action( 'woocommerce_order_status_processing', 'purchaseCompleted' );

function enqueue_so_18552010()

{

    wp_enqueue_script( 

        'my-java', // Handle

        get_stylesheet_directory_uri() . '/js/custom.js?V=2020.08.01v12', // URL for child or parent themes

        array( 'jquery' ), // Dependencies

        false, // Version

        true // In footer

    );

}

    

    function purchaseCompleted()

    {

        //JS FUNCTION'S CALL GOES HERE

    }

我想调用文件中的js函数custom.js，但到目前为止我还没有成功。我能够从不相关的页面模板调用该文件中的函数，但不使用该woocommerce_order_status_processing调用。这可能吗？

Answer 1

在 WooCommerce 中，当客户付款后下订单时，它会被重定向到“订单已收到”（谢谢）页面，这是您可以触发 javascript 函数以获取“正在处理”订单状态的唯一时刻：1）。将 Js 文件加入队列add_action('wp_enqueue_scripts', 'order_received_enqueue_js_script');function order_received_enqueue_js_script() {&nbsp; &nbsp; // Only on order received" (thankyou)&nbsp; &nbsp; if( ! is_wc_endpoint_url('order-received') )&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; $order_id = absint( get_query_var('order-received') ); // Get the order ID&nbsp; &nbsp; $order = wc_get_order( $order_id ); // Get the WC_Order Object&nbsp; &nbsp; // Only for processing orders&nbsp; &nbsp; if ( ! is_a( $order, 'WC_Order') || ! $order->has_status( 'processing' ) ) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; wp_enqueue_script(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 'my-java', // Handle&nbsp; &nbsp; &nbsp; &nbsp; get_stylesheet_directory_uri() . '/js/custom.js?V=2020.08.01v12', // URL for child or parent themes&nbsp; &nbsp; &nbsp; &nbsp; array( 'jquery' ), // Dependencies&nbsp; &nbsp; &nbsp; &nbsp; false, // Version&nbsp; &nbsp; &nbsp; &nbsp; true // In footer&nbsp; &nbsp; );}2）。调用 JavaScript 函数add_action('wp_footer', 'order_received_js_script');function order_received_js_script() {&nbsp; &nbsp; // Only on order received" (thankyou)&nbsp; &nbsp; if( ! is_wc_endpoint_url('order-received') )&nbsp; &nbsp; &nbsp; &nbsp; return; // Exit&nbsp; &nbsp; $order_id = absint( get_query_var('order-received') ); // Get the order ID&nbsp; &nbsp; if( get_post_type( $order_id ) !== 'shop_order' ) {&nbsp; &nbsp; &nbsp; &nbsp; return; // Exit&nbsp; &nbsp; }&nbsp; &nbsp; $order = wc_get_order( $order_id ); // Get the WC_Order Object&nbsp; &nbsp; // Only for processing orders&nbsp; &nbsp; if ( method_exists( $order, 'has_status') && ! $order->has_status( 'processing' ) ) {&nbsp; &nbsp; &nbsp; &nbsp; return; // Exit&nbsp; &nbsp; }&nbsp; &nbsp; ?>&nbsp; &nbsp; <script>&nbsp; &nbsp; // Once DOM is loaded&nbsp; &nbsp; jQuery( function($) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Trigger a function (example)&nbsp; &nbsp; &nbsp; &nbsp; myJsFunctionName('order-received', 'processing', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'order_id':&nbsp; &nbsp; &nbsp; &nbsp;'<?php echo $order->get_order_id(); ?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'order_key':&nbsp; &nbsp; &nbsp; '<?php echo $order->get_order_key(); ?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'transaction_id': '<?php echo $order->get_order_id(); ?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'total':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<?php echo $order->get_total(); ?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'currency':&nbsp; &nbsp; &nbsp; &nbsp;'<?php echo $order->get_currency(); ?>'&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php}此类示例由跟踪脚本使用，例如 GooGle Analytics……

Answer 2

您可以使用 PHP 中的“wp_footer”操作来输出 JS 函数声明，如下所示：function my_php_function() {echo '<script>function myFunction() {&nbsp; console.log("myFunction() was called.");}</script>';}add_action('wp_footer', 'my_php_function');https://wordpress.org/support/topic/calling-a-function-from-functions-php/

Answer 3

例子- function ts_review_order_before_submit(){   echo'<button onclick="js_function()" id="function" > JS           function         </button>' }