Conditionally Load Javascript Based on Presence of ACF Field

• deejmer

• January 22, 2020 at 1:38 am

I’ve followed this thread in order to conditionally load javascript based on the presence of a field: https://wordpress.stackexchange.com/questions/245109/conditionally-loading-javascript-based-on-the-advanced-custom-fields-in-the-post

Here is the challenge. I’ve built a pretty complex ‘page builder’ using the Flexible Content field that is used on about 80% of the website. There is a Layout in this ‘page builder’ that contains a Repeater field in which a File field is held. I wanted to only load a certain javascript on the front-end if the File field, within the Repeater, within the Layout is populated.

It seems that on any page that the ‘page builder’ is used that this javascript is loading. So it doesn’t seem to be loading if that very specific field is populated, but instead if the ‘page builder’ (Flexible Content) is present on the page at all. Is there a tweak to this code that would allow for more granular targeting?

	// enqueue script and stylesheet when ACF field is present
	// https://wordpress.stackexchange.com/questions/245109/conditionally-loading-javascript-based-on-the-advanced-custom-fields-in-the-post
	 add_action( 'wp_enqueue_scripts', 'laptopvideo', 5 );
		function laptopvideo() {
				wp_register_style( 'laptopvideocss', get_stylesheet_directory_uri() . '/css/video-laptop.css', array(), filemtime( get_stylesheet_directory() . '/css/video-laptop.css'), 'screen' ); // the css we are going to register
			}

			add_filter('acf/load_field/name=feature_video', 'load_field_feature_video'); // Swap out w/ACF field name (in this case; 'feature_video')
		   function load_field_feature_video( $field ) { // Again, swap out ACF field name (in this case; 'feature_video')
				wp_enqueue_style( 'laptopvideocss' ); // Call the instance that we registered above
		    return $field;
			}

• John Huebner

• January 22, 2020 at 9:06 am

The acf/load_field hook is fired every time a field is referenced, even if that field has no value. This is not a good hook to use for this purpose. Generally you would to so when you output the value

$value - get_sub_field('your-field');
if ($value) {
  // enqueue script to be inserted in the page footer
}

But that will not help you. The file that you’re trying to enqueue is a CSS file which needs to be in the head of the html. There isn’t any way to know if a specific field nested that deep has a value in when it needs to be enqueued, you basically need to traverse the fields to discover this.

The only option that I can think of is to use output JavaScript when the field is actually displayed that will dynamically insert the stylesheet link in the html head, but this seems like a lot of work.

Another option is to insert a custom meta value not related to ACF when then post is saved if there is a value when the post is saved that indicates if the style sheet should be loaded on the page. Knowing this still requires traversing the fields to discover if that nested field has a value. Again, a lot of work.

If this style sheet only has a few lines of CSS you’re probably better off just adding it to the sites main CSS file.

• deejmer

• January 23, 2020 at 6:50 am

Thanks, I took your advice and just injected the CSS into my main file. I also had to include a JS file so used your suggestion if looking for the presence of the field value which seems to work well.