Enqueue_scripts() in custom widgets

Developers
1

Hi there,

Current situation:
I’ve made custom widget that provides a Lottie integration. All is working well and its almost ready. At this point I add the lottie-player.js and the lottie-interactivity.min.js (both CDN) in the render code of the widget, this way its not added when the widget is not in use on the page.

Problems:
By doing it this way I have 2 problems.

  1. This is not the best place to add the scripts. It would be better to register them to the head when needed.
  2. If I have 2 lotties in my page, the scripts get added 2 times.

Question:
On the documentation I noticed 2 things: The var $scripts at the top and the function ‘public function enqueue_scripts()’. The thing is. In all the examples they just add scripts by a name. I can’t figure out how to add scripts the right way. Especially scripts that have to be added once, even if the same widget is used multiple times.

Any ideas?
Thanks!

2

Hi @PandaGerrie

Not sure if you solved your problem yet but to include scripts in your custom element you can do :

public $scripts = [];

public function enqueue_scripts()
{
	wp_enqueue_script('script_name', 'script_url.js', ...);
}

To load it only once, this should work :

public function enqueue_scripts()
{
   if (wp_script_is('script_name', 'enqueued')) {
           return;
   }

	wp_enqueue_script('script_name', 'script_url.js', ...);
}

Hope this helps.

2 Likes
3

Not able to test it at the moment but awesome, thanks!

4

Hey,

Just throwing my two cents in here but you can register the script before you need it and then you can call it as needed like bricks does.

For example, outside your element code, you’d write something like this:

add_action( 'wp_enqueue_scripts', function() {

	// Enqueue on the canvas & frontend, but not the builder panel
	if ( ! bricks_is_builder_main() ) {

        // Notice the wp_register_script function
		wp_register_script( 'lottie-player', plugin_dir_url( __FILE__ ) . 'assets/js/libs/lottie-player.js', array('bricks-scripts'), '5.9.6');
	}
} );

and then inside your element code you’d do something like this:

	public function enqueue_scripts() {
		wp_enqueue_script( 'lottie-player' );
	}

The part you’re probably getting confused by is near the top of the element file. I’ll try to explain it. Well, you know how you probably run something like this in your JS to initialize all the Lotties on the page?

document.addEventListener("DOMContentLoaded", function (e) {
	if (bricksIsFrontend) setupLotties();
});

Well, that function needs to be called manually by Bricks itself if you want it to work in the Builder Canvas, which is why you need something like this in your element file:

public $scripts      = ['setupLotties'];

This way Bricks will manually run your initialization for you. I’m not 100% on why it works like this. I just know that it does because I recently built my own Lottie Plugin and ran into the very same issues.

5

Interessting! I’ll take a look at this. Wasen’t able to test, but with these 2 answers it looks resolved to me. Thanks!