Using wp_enqueue_script on scripts that contain PHP

Question

I'm am working on a WooCommerce website, and have all my jQuery in the footer inside script tags. I use PHP to filter out the needed scripts for any particular page.

However, I would like to use the suggested method of using wp_enqueue_script to load my jquery. The trouble is that scripts containing PHP wont work unless I pass any PHP variables to he script using wp_localize_script, which works.... mostly.

I call the enqueue in my functions.php using the wp_enqueue_scripts hook, but some of the PHP variables are not available when I register the script. Some global variables are, but some of my custom variables that are defined further down the line are empty when I try to access them via localize_script.

I'm hoping this makes some sense? If so, how would I go about doing this properly?

For example, let's say some PHP variables are defined in a particular page template. These variables won't be accessible if I enqueue a script using the hook mentioned above. How can I enqueue a script that has access to all the PHP variables defined on the page?

The actual code is a bit complex so ill try to simplify:-

In my functions.php I have the following:-

function wp_enqueue_woocommerce_style(){

    $array = array(
        "var1" => <?php echo $var1 ?>,
        "var2" => <?php echo $var2 ?>
      );

    wp_register_script('chroma_js', get_template_directory_uri() . '/js/chroma.js', '', '1.1', TRUE);
    wp_enqueue_script('chroma_js');
    wp_localize_script( "chroma_js", "php_vars", $array);

}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style',99 );

Which enqueues my script to the footer. However, the 2 PHP variables are defined in the function I hook into 'woocommerce_before_single_product'. When I try to access var1 & var2 in my script they are not defined. Any PHP variables already defined when I call the enqueue work fine. So, im not sure how to go about passing these variables to an enqueued script.

Answer 1

If you're outputting the script in the footer, you can call wp_localize_script at any point after your script is enqueued but before the script is output on wp_footer priority 20.

function wp_enqueue_woocommerce_style(){
    wp_enqueue_script(
        'chroma_js',
        get_template_directory_uri() . '/js/chroma.js',
        '',
        '1.1',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

function wp_localize_woocommerce_style(){
    $array = array(
        'var1' => $var1,
        'var2' => $var2
    );
    wp_localize_script( 'chroma_js', 'php_vars', $array );
}
add_action( 'wp_footer', 'wp_localize_woocommerce_style', 0 );

Answer 2

<?php

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

You can access the variables in JavaScript as follows:

<script>
// alerts 'Some string to translate'
alert( object_name.some_string);
</script> 
Note: The data in the resulting JavaScript call will be passed as text (see ticket #25280). If you are trying to pass integers you will need to call the JavaScript parseInt() function.

<script>
// Call a function that needs an int.
FinalZoom = map.getBoundsZoomLevel( bounds ) - parseInt( object_name.a_value, 10 ); 
</script>

Answer 3

I'm used this code recently to get variable in header image path.Add this function to your functions.php:

function img()
{
    return get_template_directory_uri().'/assets/img/';
}

and use this in your header.php like this:

<img src="<?php echo img(); ?>my-image.jpg">