Need help with Sage, JS & ACF

Good evening.

I’m trying to populate variables in my custom JS script with ACF field value but I have no clue how to do it.

I’m wondering if anybody got luck with using sage with ACF javascript API?

Basically I have a script which works when I have it in scripts/common.js but I want pull data from ACF into it. Pretty much set a variable with data from acf.

Did anybody do that before?

Any help would be more than appreciated !


I’m not sure if I understand correctly, but did you try using wp_localize_script? For example:

wp_localize_script('sage/main.js', 'myVar', \App::myFunc());


public static function myFunc()
    return get_field('my_field');

This is totally what I was looking for. Jesus Christ!!! Thank You so much !!!


If you get error during yarn execution, add myVar to globals object in .eslintrc.js

I haven’t tried it yet but will let you know if it works. It should though. You da man.

Now I’m starting to wonder how can I handle repeater field but will get there.

Thanks a lot.

other trick you can use is to pass the variables to the body for example as data-attributes

body data-myVar="{{$value}}"

then you just read the variables from the body class. works for me when the project is simple enough or you need only one or two values

1 Like

Oh. This is a pretty cool solution. Thanks for that.

1 Like