Passing boolean values with wp_localize_script

Question

Passing boolean values with wp_localize_script

charlenemasters

2021年5月25日 11:48

I am using wp_localize_script to pass a couple of values from my theme options to a javascript file. First I got the values from my theme options:

$options = get_option('theme');  
$flex_auto = $options["slide-auto"];
$flex_animation = $options["slide-animation"];
$flex_direction = $options["slide-direction"];

Then I used wp_localize_script to create my array of values.

wp_enqueue_script('flexslider');
wp_localize_script('flexslider', 'flex_vars', array(
    'flex_auto' = $flex_auto,
    'flex_animation' = $flex_animation,
        'flex_direction' = $flex_direction
    )
);

In my javascript file I did this:

var $anim = flex_vars.flex_animation;
var $auto = flex_vars.flex_auto;
var $dire = flex_vars.flex_direction;

jQuery('.flexslider').flexslider({
    animation: $anim,
    slideshow: $auto,
    controlNav: 'thumbnails',
    directionNav: $dire, 
    slideshowSpeed: 7000,
    animationSpeed: 1000,
    touch: true,
});

My theme options include some values that are made with checkboxes which work with 0/1 booleans while the jQuery plugin I'm using works with true/false. I tried saving the boolean value as strings by using a drop-down menu with two options, either true or false, but that doesn't seem to work. How can I pass the boolean values from the theme options to the javascript file? Any suggestions and hints very welcome :)

Topic wp-localize-script theme-options jquery Wordpress

Category Web

Tim · Accepted Answer · 2021年5月25日 11:48

As stated by @bonger in the comment.

If you need boolean or integer values in the wp_localize_script function, you need to place them in a nested array.

wp_localize_script( 'script-handle', 'jsVariableName', [
    'args' => [
        'boolValue'      => true,
        'boolValueFalse' => false,
        'intValue'       => 9,
        'floatValue'     => 10.3,
        'stringValue'    => 'some string',
    ],
] );

This will result in this in your JS script.

{
    args: {
        boolValue: true
        boolValueFalse: false
        floatValue: 10.3
        intValue: 9
        stringValue: "some string"
    }
}

All the variables in the first level of your array will be converted to string (well, this is an i18n method).

Dilip Rajkumar · Accepted Answer · 2019年7月16日 03:08

1

Dilip Rajkumar answered at 2019年7月16日 03:08

This is the right answer working for me

wp_add_inline_script('helloworld','var site_config ='.json_encode(array (<Your array>)));

wp_localize_script with boolean and init

Mike Madern · Accepted Answer · 2013年7月5日 10:13

Try this:

$options = get_option( 'theme' );

wp_localize_script( 'flexslider', 'flex_vars', array (
  'flex_auto' => ($options['slide-auto']) ? 'true' : 'false',
  'flex_animation' => $options['slide-animation'],
  'flex_direction' => $options['slide-direction']
) );

Assuming slide-auto is the option you made a boolean.

This script isn't tested, I directly typed it in here.

Passing boolean values with wp_localize_script

About