Adding javascript to php (wordpress)?

Question

So I am helping my friend with his woocommerce WordPress site. He has some short javascript code that needs to be added to the thank you page for the site.

The javascript code takes three variables (totalCost, orderId and setProductId). I can not get to the HTML. So how do I add this code to the PHP and also, how do I access the variables from the PHP and write them into the javascript?

And where in the already existing code should I add it? Is it in the functions.php file for the theme?

I would be super thankful for help!

EDIT:

So would this work?

   add_action( 'studentkortet_tracking', 'my_custom_tracking' );

function studentkortet_tracking($order_id){
?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo ($order->order_total - $order->order_shipping); ?>');
sale.setOrderID('<?php echo $order->id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php

}

Answer 1

Here is some working code, answered here

<script>
var p1 = "success";
</script>

<?php
echo "<script>document.writeln(p1);</script>";
?>

Answer 2

Here's the correct way of accessing PHP variables within a script. It utilises the function wp_localize_script() so that PHP variables are accessible in a script file. First include this file in your functions.php file

function example_enqueue_scripts() {
    if( is_checkout() ) {

        $args = array( 'total_cost' => 443, 'order_id' => 4567, 'set_product_id' => 123 );

        wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js' );
        wp_localize_script( 'checkout-script', 'checkout_script', $args );
        wp_enqueue_script( 'checkout-script' );

    }
}

add_action( 'wp_enqueue_scripts', 'example_enqueue_scripts' );

Then include this javascript in a file under your theme folder called checkout-script.js for example.

(function( $ ) {
    'use strict';
    $(function() {
        var totalCost = checkout_script.total_cost;
        var orderId = checkout_script.order_id;
        var setProductId = checkout_script.set_product_id;

        exampleFunction( totalCost, orderId, setProductId  );

        function exampleFunction( totalCost, orderId, setProductId ) {
            //Do something in here
            //alert(totalCost);
        }

    });

})( jQuery );

Answer 3

I don't know what setProductId is meant to be as a variable, but the hook you are looking for is woocommerce_thankyou. The $order_id is passed by default, which you can then use to grab the order object. Pretty much all the info related to the order can be accessed through the setter/getter methods on the order object.

/**
 * Print Javascript on Thankyou page.
 * @param  int $order_id 
 */
function so_47117329_thankyou( $order_id ){
    $order = wc_get_order( $order_id ); ?>

    <script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    PostAffTracker.setAccountId(’xxxxxx’);
    var sale = PostAffTracker.createSale();
    sale.setTotalCost('<?php echo $order->get_total() - $order->get_shipping_
(); ?>');
    sale.setOrderID('<?php echo $order_id; ?>');
    sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
    PostAffTracker.register();
    </script>

<?php
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );

Editing to add an alternative for enqueuing the scripts as suggested by @Andrew-Schultz. Using the woocommerce_thankyou hook gets you easy access to the $order_id, which would otherwise need to be retrieved from the URL. You will still access the javascript variables as he's shown in his answer.

/**
 * Enqueue Javascript on Thankyou page.
 * @param  int $order_id 
 */
function so_47117329_thankyou( $order_id ){
    $order = wc_get_order( $order_id );

    $args = array( 
       'total_cost' => $order->get_total(), 
       'order_id' => $order_id, 
       'set_product_id' => 123 
     );

    wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js', array(), false, true ); // Last parameter loads script in footer
    wp_localize_script( 'checkout-script', 'checkout_script', $args );
    wp_enqueue_script( 'checkout-script' );


}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );