Search code examples
javascriptphpwordpresswoocommerceorders

Embeding JavaScript code in WooCommerce Thank You page with order details

I am collaborating with an Affiliate Marketing company and need to send the order information to their system when an order is placed. Despite my efforts to search for articles using keywords such as "WooCommerce Thank You page order details JavaScript," I have been unsuccessful in retrieving the order information.

Here is the code provided by the other party:

<script type="text/javascript">
 var oeyaPostParam = {
 code : '',
 cookie_name : '',
 mcode : '', 
 oid : 'order id', 
 amount : 'order total',
 bid : '',
 gno : 'product id', 
 gname : 'product name',
 unit : ' ', 
 odate : 'order establishment time ', 
};
 (function() {
 var oeyasc = document.createElement('script'); oeyasc.type = 'text/javascript'; oeyasc.async = true;
 oeyasc.src = ' https://www.conn.tw/track/oeya_jss2s_v1.0.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oeyasc, s);
 })();
</script>

The blank space means that there is no need to fill in or only a fixed value needs to be filled in.

I used Code Snippets and adding the following code:

Code PHP, setting to 'Run snippet everywhere'

<?php

global $wp;

if ( isset($wp->query_vars['thankyou']) ) {
    $order_id = absint($wp->query_vars['thankyou']); // The order ID
    $order    = wc_get_order( $order_id ); // The WC_Order object
}

And Code HTML, insert it into Thank You page with elementor shortcode widget.

<!-- begin content -->

<script type="text/javascript">
 var oeyaPostParam = {
 code : '',
 cookie_name : '',
 mcode : '', 
 oid : '<?php echo $order->get_order_number(); ?>', 
 amount : '<?php echo $order->get_total(); ?>',
 bid : '',
 gno : '<?php echo $item->get_product_id(); ?>', 
 gname : '<?php echo $item->get_name(); ?>',
 unit : ' ', 
 odate : '<?php echo $order->get_date_created(); ?>', 
};
 (function() {
 var oeyasc = document.createElement('script'); oeyasc.type = 'text/javascript'; oeyasc.async = true;
 oeyasc.src = ' https://www.conn.tw/track/oeya_jss2s_v1.0.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oeyasc, s);
 })();
</script>

But it didn't work. You may observe that the values are not being received on the Thank You page of the test order.

https://www.zmoji.com.tw/checkout/thankyou/1098/?key=wc_order_JyTChsw3eAXvn

What adjustments should I make to correctly transmit the order information to JavaScript?

Thank you all.

Solution

  • First, there are some mistakes and missing things in your code.

    Now to fill in your JavaScript variables and embed that code, you can simply use one of those WordPress available action hooks:

    • wp_head hook, will add your JavaScript code in the head (just before the <body> in the <head>)
    • wp_footer hook, will add your JavaScript at the end of the content, after the <footer>.

    Here is the way to embed your code using wp_footer hook:

    add_action( 'wp_footer', 'embeded_marketing_script', 5 );
function embeded_marketing_script() {
    global $wp;

    if ( isset($wp->query_vars['order-received']) ) :
    
    $order_id    = absint($wp->query_vars['order-received']); // The order ID
    $order       = wc_get_order( $order_id ); // The WC_Order object
    $order_items = $order->get_items(); // The Order items (array of WC_Order_Item_Product objects)
    $first_item  = reset($order_items); // The first order item (WC_Order_Item_Product object)
    
    ?>   
    <script id="wc-checkout-custom" type="text/javascript">
    var oeyaPostParam = {
        code : '',
        cookie_name : '',
        mcode : '', 
        oid : '<?php echo $order->get_order_number(); ?>', 
        amount : '<?php echo $order->get_total(); ?>',
        bid : '',
        gno : '<?php echo $first_item->get_product_id(); ?>', 
        gname : '<?php echo $first_item->get_name(); ?>',
        unit : ' ', 
        odate : '<?php echo $order->get_date_created(); ?>', 
    };

    (function() {
        var oeyasc = document.createElement('script'); 
        oeyasc.type = 'text/javascript'; oeyasc.async = true;
        oeyasc.src = ' https://www.conn.tw/track/oeya_jss2s_v1.0.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oeyasc, s);
    })();
    </script>
    <?php endif;
}

    You can add this with Code Snippets (no need to use Elementor shortcode widget). Now it should work.

    Note that WooCommerce orders can have multiple order items, so in the provided code, I use the first order item.

    Related: Get Order items and WC_Order_Item_Product in WooCommerce 3

    Addition

    To list all order items product Ids and product names as a separated string of values, you will use the following (the separator here is |):

    $order_items = $order->get_items(); // Get Order items (array of WC_Order_Item_Product objects)

$product_ids = $product_names = array(); // initializing some variables

// Loop through order items
foreach ( $order_items as $order_item ){
    $product_ids[]   = $order_item->get_product_id();
    $product_names[] = $order_item->get_name();
}

// Converting array to a string of values separated by "|"
$product_ids = implode('|', $product_ids);
$product_names = implode('|', $product_names);

    So in your function this will be like:

    add_action( 'wp_footer', 'embeded_marketing_script', 5 );
function embeded_marketing_script() {
    global $wp;

    if ( isset($wp->query_vars['order-received']) ) :
    
    $order_id    = absint($wp->query_vars['order-received']); // The order ID
    $order       = wc_get_order( $order_id ); // The WC_Order object
    $order_items = $order->get_items(); // Get Order items (array of WC_Order_Item_Product objects)

    $product_ids = $product_names = array(); // initializing some variables

    // Loop through order items
    foreach ( $order_items as $order_item ){
        $product_ids[]   = $order_item->get_product_id();
        $product_names[] = $order_item->get_name();
    }
    
    // Converting array to a string of values separated by "|"
    $product_ids = implode('|', $product_ids);
    $product_names = implode('|', $product_names);
    
    ?>   
    <script id="wc-checkout-custom" type="text/javascript">
    var oeyaPostParam = {
        code : '',
        cookie_name : '',
        mcode : '', 
        oid : '<?php echo $order->get_order_number(); ?>', 
        amount : '<?php echo $order->get_total(); ?>',
        bid : '',
        gno : '<?php echo $product_ids; // String of product ids ?>', 
        gname : '<?php echo $product_names; // String of product names ?>',
        unit : ' ', 
        odate : '<?php echo $order->get_date_created(); ?>', 
    };

    (function() {
        var oeyasc = document.createElement('script'); 
        oeyasc.type = 'text/javascript'; oeyasc.async = true;
        oeyasc.src = ' https://www.conn.tw/track/oeya_jss2s_v1.0.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oeyasc, s);
    })();
    </script>
    <?php endif;
}