Dynamic Post Sliders in Bricks with BricksExtras and WP Grid Builder

This article provides the answer to

We are going to set up a Bricks query loop that shows the posts of a Custom Post Type with BricksExtras‘ Pro Slider in the loop. When the CPT items are filtered by their taxonomy using WP Grid Builder, the sliders will not appear (they will still take up space).

I initially tried to solve this using the change event, but the correct one to use is appended.

Quoting WP Grid Builder developer, Loïc Blascos:

About the slider, you should not use “change” event but “appended” event: https://docs.wpgridbuilder.com/resources/event-facet-appended/
The DOM will only be available on appended.

When you filter, the old content is removed from the page and the new content is appended.
So you can’t refresh something. You have to initialize the script again for it to work.
And this can only be done when the new content is present in the page (appended event).

Here’s how the CPT archive template is structured:

The Facet element is via WPGB’s Bricks’ add-on.

The two Slide elements in the Pro Slider were deleted, Gallery mode was enabled and a Pro Slider Gallery element was added inside set to

{acf_testimonial_gallery}

where testimonial_gallery is a Gallery type of custom field attached to testimonials using ACF Pro.

Add the JavaScript that calls the BricksExtras’ function that creates the slider.

Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts:

<script>
window.WP_Grid_Builder &&
WP_Grid_Builder.on("init", function (wpgb) {
    wpgb.facets &&
    wpgb.facets.on("appended", function (args) {
        doExtrasSlider(document.getElementById("brxe-roadst"))
    })
})
</script>

where brxe-roadst is the ID of the query loop’s parent Container.

If you prefer adding the JS via the child theme instead of adding it in the Bricks template, in child themes functions.php inside the anonymous function hooked to wp_enqueue_scripts, add:

if ( is_post_type_archive( 'testimonial' ) ) {
			wp_enqueue_script( 'testimonial', get_stylesheet_directory_uri() . '/assets/js/testimonial.js', [], filemtime( get_stylesheet_directory() . '/assets/js/testimonial.js' ), true );
		}

and the code in assets/js/testimonial.js:

document.addEventListener("DOMContentLoaded", () => {
  window.WP_Grid_Builder &&
	WP_Grid_Builder.on("init", function (wpgb) {
	  wpgb.facets &&
		wpgb.facets.on("appended", function (args) {
		  doExtrasSlider(document.getElementById("brxe-roadst"))
		})
	})
})