3

I have problem with wp_localize_script, That I cannot get boolean and int as variable

wp_enqueue_script( 'helloworld' , 'helloworld.js', false, '1.0.0', true);

$site_config = array();

$site_config['boo'] = (bool)true;
$site_config['number'] = (int)1;

wp_localize_script( 'helloworld' , 'site_config' , $site_config );

Why I getting :

var site_config = {"boo":"1","number":"1"};

Why not :

var site_config = {"boo":true,"number":1};
  • Wordpress 4.6 (latest)
  • PHP 5.6.10

Does not it fixed ? https://core.trac.wordpress.org/ticket/25280 , I do anything wrong or missing something ?

  • 2
    It's not fixed yet. – bravokeyl Sep 1 '16 at 9:32
3

Why part:

The Why part can be found within the WP_Scripts::localize() method:

foreach ( (array) $l10n as $key => $value ) {
    if ( !is_scalar($value) )
        continue;

    $l10n[$key] = html_entity_decode( (string) $value, ENT_QUOTES, 'UTF-8');
}

where we note the (string) casting.

Workarounds:

The latest proposed patch suggests replacing is_scalar() with is_string() and remove the (string) cast. That would work e.g. in a custom wrapper. But I don't think it's the way to go here, because the core wp_scripts()->localize() method can always change in the future.

I also think it's too hacky to modify the data through the methods:

wp_scripts()->get_data( $handle, 'data' )

and

wp_scripts()->add_data( $handle, 'data', $data )

Doing it properly, we might end up writing a duplicate wrapper for wp_scripts()->localize() ;-)

A more flexible workaround might be to use the core function:

wp_add_inline_script( $handle, $data, $position )` 

to add our dynamic non-string values.

3

I just do something like this so long :

wp_add_inline_script('helloworld','var site_config ='.json_encode($site_config));
1

If Boolean value is true then it will return always 1 or if Boolean value is false then it will return empty that is why you're getting 1 in case of true.

Below code is tested on my locally project. Copy and paste it exactly

//Add it in **functions.php**
function load_localize_scripts() {
    wp_enqueue_script('localize_script', get_template_directory_uri() . '/js/localize_script.js', array(), '1.0.0', true );
    wp_localize_script('localize_script', 'localize_scripts_vars', array(
                        'boolean' => true, // it will return 1 
                        'integer' => 10 // it will always return integre
            )
    );
}
add_action('wp_enqueue_scripts', 'load_localize_scripts');

//Add this in **localize_script.js**
jQuery(document).ready(function() {
    var site_config;
    if (localize_scripts_vars.boolean == '1') {
        site_config = {"boolean":'true',"number":localize_scripts_vars.integer};
        console.log(site_config);
    } else if (localize_scripts_vars.boolean == '' || localize_scripts_vars.boolean == NULL) {
        site_config = {"boolean":'false',"number":localize_scripts_vars.integer};
        console.log(site_config);
    };
});

You can see the consol result too
enter image description here

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.