Bricks Builder filtering compatibility issues

[thebizpixieParticipant]

I am in the process of retheming my site from Divi to Bricks Builder. I am having some issues with the re-rendering of content on the search results page, on using the filters.

(Note: It currently says our support is expired, but we renewed today for another six months.)

1. On re-render, no images are displayed
2. IGNORE THIS, NOW FIXED – When using Bricks pagination to move through results, the filter settings are forgotten (Note: the pagination block is outside of the re-rendered results div)
3. If no results are available, all results are shown

Can you please let me know how to improve this plugin’s capability with Bricks so that I can restore this to full functionality?

IGNORE –I am happy to use a different pagination element/code if need be.–

We have full control of the content of page, IDs can be added to any block, etc, I just need to know what to change.

I would appreciate any pointers to get me in the right direction.

Thank you.

• This topic was modified 7 months, 1 week ago by  . Reason: Fixed one issue
• This topic was modified 7 months, 1 week ago by  .

[thebizpixieParticipant]

You cannot access this content.

[thebizpixieParticipant]

Note: A good test is to search for the word “stress” and filter to videos and “Knowledge Hub” for pagination purposes.

Whitepapers also shows 2 results and no images. Products and services should show 3 results, but seems to return nothing (shows everything).

[Ernest MarcinkoKeymaster]

Hi,

I guess there is a custom script image lazy loader feature enabled on the results widget somewhere.

Either way, I found a possible event listener, which should trigger the “loading” of the images as it signals that the ajax search is complete and bricks will start loading the images afterwards:

add_action('wp_footer', 'asp_custom_footer_script', 99999);
function asp_custom_footer_script() {
	?>
	<script>
	document.addEventListener("DOMContentLoaded", (event) => {
		document.querySelectorAll(".asp_main_container").forEach(function(el){
		  el.addEventListener("asp_search_end", function(event) { 
			document.dispatchEvent(new Event("bricks/ajax/load_page/completed"));
		  });
		});
	});
	</script>
	<?php
}

Try adding this code via the Code Snippets plugin or to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

I have opened an issue on the tracker to make sure this is patched for the upcoming release, as it is a very simple solution.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[thebizpixieParticipant]

You’re absolutely spot on that it was a lazy loading issue. Thanks for picking this up.

Because in Bricks you can build anything from scratch, even search results content, all I had to do was switch loading from lazy to eager on the image in my search results layout that I’d created.

But I really appreciate you sourcing and writing that code for me as well.

Now, about my second issue – the fact that instead of showing nothing when there are no results, but instead showing everything.

Any ideas on that front? Happy for you to just make suggestions for me to explore further.

[Ernest MarcinkoKeymaster]

I think I know why – the structure of the page changes when there are no results, and the results container element no longer exists, so the plugin can’t do a “replacement”, as it’s no longer in the response.

Usually a recommend a different DOM selector for the settings, but in this case it might be a bit more complicated, as the whole container needs to be selected. That may not be ideal, but you can try this selector:

#brx-content

You can change that here: https://i.imgur.com/jhwyOPA.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[thebizpixieParticipant]

Yes, OK, that makes sense.

I will try the ID you suggested and play with it, now that I have a sense of what’s going wrong.

Thanks for the pointers.

[Author]

Posts