The Bricks team has recently added some more AJAX functionality, some still marked as ‘experimental’ and in its early stages, but we know many users are using BricksExtras elements inside post loops and will want to try the new filters or search with these loops. We’ve added compatibility, let’s have a look at what this means..
What does this mean?
From BricksExtras v1.4.1+, you’ll be able to use BricksExtras elements inside any content that is being fetched via AJAX by Bricks (aside from things like back to top button, header notification that wouldn’t be used inside of a loop).
Whether that’s inside of a query loop that is being filtered, in some AJAX search results, or inside popup content that has been set to ‘load by AJAX’.
Common examples with BricksExtras elements being used in loops..
- Using a Pro Slider inside of a query loop displaying some gallery images for each post, and also a lightbox that appears when the user clicks the images.
- You have a query loop showing a list of items, each one has a popover element to quickly display more information.
- A list of FAQs created with the Pro Accordion with the accordion items being looped.
What this doesn’t mean
The new AJAX filters are specifically for use with post queries for use with blocks, divs, containers & the post element. In a handful of BricksExtras elements, we’re also using a query loop internally to allow for a convenient way to enter dynamic data to build certain things based on that data.
For example, the dynamic table, and the dynamic chart elements. In these cases, this query loop isn’t something that the filters will be targeting to change (there are no post elements to add/remove by the filters, the data from the loop is being used internally in the element to output something else).
Update – for filterable tables, check out the new nestable table element.
For the Future
Now that Bricks is going in this direction, for future elements we’ll be adding in support for the filters as much as possible. This is already true for our coming Media Player elements, where the Media Playlist element doesn’t contain an internal playlist, but instead is a single item that can be looped and filtered/searched. The upcoming Dynamic Maps element is the same.
Wait, what is AJAX again?
The short version, just for clarity for how to think about it if not familiar – it’s the method in which Bricks is fetching content dynamically.
In the case of the popup, it means that the content of the popup isn’t added to the page when the page first loads. Only if the popup is triggered, then all the content is fetched at that moment.
With the filters, it’s a similar thing, where certain posts in the loop don’t exist on the page at first. Only if the user uses the filters, then the content for specific posts is added/removed as needed.
It’s generally a good thing for performance. (very different from the isotope type filters, that are often used with galleries, where everything is loading on the page at once and is hidden with CSS) but it’s important to get a general sense of what is happening when using AJAX because if you’re adding custom code or using other WP plugins inside that content, it’s very likely that it won’t behave correctly out of the box if not taken into consideration.
A common example of this would be using shortcodes from plugins, ‘Buy Buttons’ from certain membership plugins, or some lightbox solutions. As far as these plugins are concerned, the element don’t exist on the page and so the needed functionality just isn’t added. Workarounds are often needed or support added by that specific plugin. (which is exactly what we’re adding in here for BricksExtras elements)