Set order id and order total in a javascript on Woocommerce order received

Question

I have a script below I did integrate to the thank you page in woocommerce, I do not know what to put in to show the orderID and orderValue , can anyone please help me with that?

(function() {
  function c(t) {
    for (var n = document.cookie.split(";"), r = 0; r < n.length; r++)
      if (p = n[r].split("="), p[0] == t)
        return p[1];
    return ''
  }
  adrecord = {
    "programID": 15,
    "orderID": "HERE I NEED TO SHOW orderID (order number)",
    "orderValue": HERE I NEED TO SHOW orderValue inc tax,
    "trackID": c('trackID'),
    "source": c('source')
  };
  var e = document.createElement('script');
  e.src = 'https://track.adrecord.com/track.js';
  var s = document.getElementsByTagName('script')[0];
  s.appendChild(e);
})();

Any help is appreciated.

Answer 1

You can use the following hooked function in woocommerce_thankyou action hook, that will set in your Javascript the correct Order ID and total:

add_action( 'woocommerce_thankyou', 'thankyou_tracking_script', 10, 1 );
function thankyou_tracking_script( $order_id ) {
    // Get the WC_Order instance Object
    $order = wc_get_order( $order_id );

    // Output Javascript
    ?>
    <!-- JS Order received Script -->
    <script type="text/javascript"> 
    (function() {
        function c(t) {
            for (var n = document.cookie.split(";"), r = 0; r < n.length; r++)
            if (p = n[r].split("="), p[0] == t) return p[1];
            return ''
        }
        adrecord = {
            "programID": 15,
            "orderID": "<?php echo $order_id; ?>",
            "orderValue": <?php echo $order->get_total(); ?>,
            "trackID": c('trackID'),
            "source": c('source')
        };
        var e = document.createElement('script');
        e.src = 'https://track.adrecord.com/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.appendChild(e);
    })(); 
    </script>
    <?php
}

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

---

Or use this similar code using wp_footer action hook targetting "Order received" (thankyou) page:

add_action( 'wp_footer', 'order_received_tracking_script' );
function order_received_tracking_script() {
    // Only on "Order received" page
    if( ! is_wc_endpoint_url('order-received') ) Return; // Exit

    $order_id  = absint( $wp->query_vars['order-received'] );

    // Get the WC_Order instance Object
    $order = wc_get_order( $order_id );

    // Output Javascript
    ?>
    <!-- JS Order received Script -->
    <script type="text/javascript"> 
    (function() {
        function c(t) {
            for (var n = document.cookie.split(";"), r = 0; r < n.length; r++)
            if (p = n[r].split("="), p[0] == t) return p[1];
            return ''
        }
        adrecord = {
            "programID": 15,
            "orderID": "<?php echo $order_id; ?>",
            "orderValue": <?php echo $order->get_total(); ?>,
            "trackID": c('trackID'),
            "source": c('source')
        };
        var e = document.createElement('script');
        e.src = 'https://track.adrecord.com/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.appendChild(e);
    })(); 
    </script>
    <?php
}

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