WordPress: PHP Variable showing null in JavaScript

Question

I am stuck in strange situation I am trying to pass PHP variable in JS by WordPress wp_localize_script and try to show it in console.log but it is outputting null. here is my code in functions.php

$conv = 1.36;
echo $conv;

add_action('wp_enqueue_scripts','cassets');
function cassets(){
  wp_enqueue_script("all-script",get_template_directory_uri().'/all-script.js',array('jquery'),'',true);
  $rate= array(
    'conv' => $conv,
  );
  wp_localize_script( 'all-script', 'rate', $rate);

}

and in all-script.js

var conv = rate.conv;
console.log(conv);

In console window it shows null but php echo value shows right.

Thanks in advance.

Answer 1

You're using your $conv variable out of scope. Take a look at PHP's Variable Scope documentation. You're defining $conv in the global scope, but referencing a local scope $conv in your cassets() function.

You need to use the function scoped $conv, either by defining it inside, or passing it to the function as a global variable or pass it as a Reference.

Here's a few examples:

Defining within the scope:

add_action('wp_enqueue_scripts','cassets');
function cassets(){
    $conv = 1.36;

    wp_enqueue_script( 'all-script', get_template_directory_uri().'/all-script.js', array('jquery'), '', true );

    $rate = array(
        'conv' => $conv,
    );

    wp_localize_script( 'all-script', 'rate', $rate );
}

Passing it to the function as a global variable:

$conv = 1.36;

add_action('wp_enqueue_scripts', 'cassets' );
function cassets(){
    global $conv;

    wp_enqueue_script( 'all-script', get_template_directory_uri().'/all-script.js', array('jquery'), '', true );

    $rate = array(
        'conv' => $conv,
    );

    wp_localize_script( 'all-script', 'rate', $rate );
}

Passing it via closure:

$conv = 1.36;

add_action('wp_enqueue_scripts', function() use($conv){
    wp_enqueue_script( 'all-script', get_template_directory_uri().'/all-script.js', array('jquery'), '', true );

    $rate = array(
        'conv' => $conv,
    );

    wp_localize_script( 'all-script', 'rate', $rate );
});

Answer 2

Your problem is, that you defined $conv outside your function.

Inside your function $conv was is undefined. (I think u should get a warning from php too).

Try this:

add_action('wp_enqueue_scripts','cassets');
function cassets(){
  $conv = 1.36;
  wp_enqueue_script("all-script",get_template_directory_uri().'/all-script.js',array('jquery'),'',true);
  $rate= array(
    'conv' => $conv,
  );
  wp_localize_script( 'all-script', 'rate', $rate);

}