Load script after pagebuilder is ready

Developers
1

Hi. I want to create a small js widget I want to use with Bricks. Preferably it would just load after pagebuilder is finished loading. Is there any way to hook into builder this way?

2

Hey,

I guess it depends what you mean by widget, but here’s some questions for you and a basic example.

  1. Do you intend to build a bricks element, or just to enqueue some javascript after page load?
  2. Will the code affect the front end content or do you intend on affecting the bricks builder itself?

Here’s a general example of how to enqueue some javascript code that only affects the frontend (not the builder), and runs after the bricks scripts have run:

Inside your child theme functions.php you should have an enqueue_scripts section like this already but just add the enqueue code for your custom script:

add_action( 'wp_enqueue_scripts', function() {
	if ( ! bricks_is_builder_main() ) {
		....
        // Notice the 'bricks-scripts' dependency
		wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom-script.js', array('bricks-scripts'), '1.0.0');
        ....
	}
} );

Then in your custom-script.js file, put something like this:

function custom-script() {
     console.log('Put your custom code here');
}

document.addEventListener("DOMContentLoaded", function (e) {
	if (bricksIsFrontend) custom-script();
});
2 Likes