Embeding JavaScript code in WooCommerce Thank You page with order details

Question

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.

LoicTheAztec · Accepted Answer · 2023-06-12T10:48:35.480

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;
}

It works! Thank you ever so much for your help! Additionally, I would like to inquire, regarding the aforementioned code, whether it is feasible to list all the products when there are multiple items and separate them using the "|" — Nesmrtelnost, Jun 10 '23 at 10:36
Thank you for your supplementation. I have added the code as per your suggestion, but it did not successfully list the different product IDs and names. Could you please advise me on how to modify the "echo" section in order to achieve the desired functionality? `gno : 'get_product_id(); ?>', gname : 'get_name(); ?>',` Thank you a lot! — Nesmrtelnost, Jun 12 '23 at 06:51
I have added the complete working code at the end of my answer... — LoicTheAztec, Jun 12 '23 at 10:52

score 0 · Answer 2 · answered Jun 10 '23 at 07:10

0

Why use code snippets plugin and elementor's shortcode placement, the better way would be to directly overwrite and edit the thankyou page template.

Download the wp-content/plugins/woocommerce/templates/checkout/thankyou.php file
Put you javascript code in the thankyou.php file. Since $order is already accessible in the file you don't need the additional PHP code snippet
Place this file in the child theme or main theme's folder in wp-content/themes/your_theme_name/woocommerce/thankyou.php to override the template

answered Jun 10 '23 at 07:10

Mustafa sabir

4,130
1
19
28

In the past, I have been using child themes, but I have encountered several significant errors. Each time I had to update all plugins and the theme to the latest versions in safe mode to resolve the issues. Therefore, I am currently hesitant to use child themes. – Nesmrtelnost Jun 10 '23 at 08:59
You can do this without child theme in the main theme too, just be careful when updating the main theme as the template might be lost. – Mustafa sabir Jun 14 '23 at 13:01

Embeding JavaScript code in WooCommerce Thank You page with order details

2 Answers2