ACF Javascript API

[mellis84]

Hi Guys,

I have looked around and still haven’t had any luck loading the Javascript ACF API into my Sage site, I still get a acf undefined, in my setup.php I have:

add_action('acf/input/admin_enqueue_scripts', function () {
  $handle = 'sage/main.js';
  $src = get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/input.min.js';
  $deps = array('acf-input');
  
  wp_enqueue_script($handle, $src, $deps, false, true);
});

In my .eslintrc.js file I have added acf to my globals too.

Just trying to run something as simple as:

setTimeout(() => {
      var acfVersion = acf.get("acf_version");
      console.log(acfVersion);
    }, 4000);

But yeah, get the reference error, really stumped on this.

[greeneggmedia]

As far as I can tell, the ACF JS API is automatically loaded on any page where the ACF Form is rendered. In the admin, this is basically any page or post with ACF fields. In my Sage site, I am able to operate on the acf JS object using my console without adding anything to my setup.php as long as I am on a page where ACF fields are actually rendered. Can you confirm that you are able to use the acf object from such pages?

If that is working correctly, you just need to make sure your add_action function is correct, which it probably isn’t at the moment. Unless I am much mistaken, the $src variable is not the path to the ACF input script; rather, it is the path to your script where you are using the acf object. Declaring the acf-input dependency ensures that the the ACF input JS is loaded before your script executes. Also, note that the $handle is just a name for your script, not a path. (See the wp_enqueue_script docs.) For instance, acf-input is the registered name of a script. By naming your script, it allows you to reference it elsewhere in WP using just its name, without its path.

NOTE: Since this uses the admin_enqueue_scripts hook, this is only available on admin pages.