javascript - wp_localize_script with boolean and init

admin管理员组

文章数量:1330087

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 ? , I do anything wrong or missing something ?

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/ticket/25280 , I do anything wrong or missing something ?

• javascript
• wp-enqueue-script
• variables
• wp-localize-script

Share Improve this question edited Sep 1, 2016 at 9:30 l2aelba asked Sep 1, 2016 at 9:19 l2aelbal2aelba 8571515 silver badges2929 bronze badges 1

• 2 It's not fixed yet. – bravokeyl Commented Sep 1, 2016 at 9:32

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 4

I just do something like this so long :

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

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.

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

If you wrap your booleans in an array, they come out clean:

$settings = [
  'booleans' => [
    'foo' => true,
    'bar' => false,
  ],
];
wp_localize_script('my-script-handle', 'mySettings', $settings);

will render:

<script type='text/javascript'>
/* <![CDATA[ */
var mySettings = {"booleans":{"foo":true;"bar":false}};
/* ]]> */
</script>

Then you can access them cleanly from your script:

console.log( mySettings.booleans.foo === true ); // true
console.log( mySettings.booleans.bar === false ); // true

本文标签： javascriptwplocalizescript with boolean and init