WPGridBuilder is the go-to when it comes to adding real-time faceted search to query loops in Bricks. Their free Bricks-addon means it can now be set up all inside Bricks easily using their facet element.
Update – Since BricksExtras v1.2.4 this tutorial is no longer needed. There is now built-in support for our elements with WPGB’s facets.
Adding in Dynamic Elements
Besides post content, you may wish to sometimes use some more dynamic elements inside of the filtered loops such as accordions, lightboxes, read more, or even sliders. If you’ve tried adding native Bricks’ elements inside the query loop, you will have noticed this is not something that works out of the box when using their facets to filter or search the posts.
This is mainly due to how WPGB adds the posts dynamically to the page after the page has loaded, so any functionality that was intended to be added at page load isn’t going to function for these new posts.
Using WPGridBuilder Events
WPGB’s solution for this, is to provide it’s own JS events, one that triggers the moment that the facet’s append new content to the page.
Here’s the code provided by WPGridBuilder that can be used to run any function the moment it adds in the new posts (ie when the facets are being used to append new content)
window.WP_Grid_Builder && WP_Grid_Builder.on('init', onInit);
function onInit(wpgb) {
wpgb.facets.on('appended', (content) => {
/* Do something here when the content is appended */
})
}
Using BricksExtras Functions
BricksExtras comes with a bunch of built-in functions that can be used for exactly this purpose, for some of our dynamic elements that could commonly be used inside of post loops.
Using WPGB’s code above, we can add in our functions to make sure the functionality of the elements is preserved, even when being dynamically added to the page by the filters.
Adding this inside the page/template settings where you’re using WPGB will ensure compatibility with these elements..
<script>
window.WP_Grid_Builder && WP_Grid_Builder.on('init', onInit);
function onInit(wpgb) {
wpgb.facets.on('appended', (content) => {
content.forEach((container) => {
/* Pro Accordion */
if (typeof doExtrasAccordion == 'function') {
doExtrasAccordion(container)
}
/* Pro Slider */
if (typeof doExtrasSlider == 'function') {
doExtrasSlider(container)
}
/* Read More / Less */
if (typeof doExtrasReadmore == 'function') {
doExtrasReadmore(container)
}
/* Dynamic Lightbox */
if (typeof doExtrasLightbox == 'function') {
doExtrasLightbox(container, true)
}
})
})
}
</script>Note – at the time of writing, WPGB are are currently offering 50% off their lifetime pricing as part of a Black Friday Sale
That’s it
The same functions can be used if using other facet/filter plugins, you’d just need to check the plugin documentation to find out the equivalent JS event for their filters, to know when to run those same functions. (or point their support team to this tutorial and they’ll understand what you are asking for, if it’s not mentioned/obvious in their docs)