0

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.

  • You need to pass PHP variables via wp_localize_script() to JS scripts – Pieter Goosen Jan 31 '16 at 15:18
  • Thanks Peiter. Yes, you are right. I wrote the above post wrong. I am using localize_script and having the problems. Ive edited the above post to avoid further confusion. – Michae Pavlos Michael Jan 31 '16 at 15:38
  • you get null because your script load before you php variable.If you want to check just define it and check – Vasim Shaikh Jan 31 '16 at 15:52
  • I understand Vasim. Thats essentially my question. How can I use enqueue_script and still have access to my variables? Simply putting the wp_enqueue_scripts into the footer, after all the variables have been defined, doesnt work. It only seems to work when I put the enqueue in my functions file. But at that stage the variables are not defined. Hence my problem. – Michae Pavlos Michael Jan 31 '16 at 16:14
0

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 );
  • This looks promising. I didn't consider calling the enqueue and localize at different locations. So, basically, if a PHP variable has been defined before wp_localize_woocommerce_style is hooked in, it'll be available to the enqueued script, correct? And to be clear, both these functions still go in functions.php, right? – Michae Pavlos Michael Jan 31 '16 at 16:40
  • yes, you'll be able to access data defined between when the script is enqueued at wp_enqueue_scripts and when it's output in wp_footer. both go in functions.php. – Milo Jan 31 '16 at 16:48
  • That sounds perfect. Thanks Milo. I cant try this yet as im tangled up in something else, but im going to give it a go and report back asap. – Michae Pavlos Michael Jan 31 '16 at 16:54
  • Gave it a go Milo. Worked a treat. Thanks very much. – Michae Pavlos Michael Feb 1 '16 at 1:47
0
<?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>
  • I dont have any problems running the right scripts on the right pages. Its more a case of PHP variables not being available. For example: I have a PHP function action hooked into 'woocommerce_before_single_product' which defines some key PHP variables. I then want these variables available in my enqueued script. The enqueue and register calls are hooked into "wp_enqueue_scripts" as in your example. But if I try to pass the variables I defined using register_script, they come through as null. It seems the variables are not yet defined when I call enqueue. – Michae Pavlos Michael Jan 31 '16 at 15:15
  • What actually your code i did not get you – Vasim Shaikh Jan 31 '16 at 15:16
  • Can you write down your code snippet here – Vasim Shaikh Jan 31 '16 at 15:17
  • Very sorry Vasim. I got my terms wrong. I am using "localize_script" to pass the variables. Ive edited my original post accordingly and added a code snippet. – Michae Pavlos Michael Jan 31 '16 at 15:33
  • okay,I am enthusiastic to learn wp. – Vasim Shaikh Jan 31 '16 at 15:37
0

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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.