Elementor loops in live search breaking with the ajax filters

[kerry_avxz]

Hi there. Just wondered if there is an easy fix for when Elementor loops in live search breaking with the ajax filters? This is when a loop has additional script functionailities. Some styling seems to break too.

Search demo: https://hgtesingsite.wpenginepowered.com/search-function/ This loop is broken in style and
Results demo: https://hgtesingsite.wpenginepowered.com/?s=golf&asp_active=1&p_asid=1&p_asp_data=1&termset%5Battachment_category%5D%5B%5D=21&termset%5Battachment_category%5D%5B%5D=22&termset%5Battachment_category%5D%5B%5D=19&termset%5Battachment_category%5D%5B%5D=20&termset%5Battachment_category%5D%5B%5D=24&termset%5Battachment_category%5D%5B%5D=18&termset%5Battachment_category%5D%5B%5D=23&filters_initial=1&filters_changed=0&qtranslate_lang=0&current_page_id=83

here you will see on initial load of search result page that the loop works fine and looks good. you will notice the icons have tooltips and off-canvas widget, until ajax categories checked re selected etc then icon scripts break.

[Ernest Marcinko]

Hi,

After the filtering is finished the plugin fires the elementorFrontend.hooks.doAction(‘frontend/element_ready/loop-grid.post’) hook, where the custom scripts should be subscribed to for initialization so after the live resplacement they are re-rendered.

It looks like it’s coded that way, as when I select/deselect I’m getting the same layout with the tooltips as well: https://i.imgur.com/L4DOZ22.png

In the first case it’s broken because there are no results in the Loop and therefore Elementor does not load the loop styling at all, if you load up the page with results, it works. I think it’s their conditional CSS loader feature, I believe it can be turned off on the back-end. Or, if there are results initially, Elementor will load the styles.

[kerry_avxz]

thanks on the intial search, I will look for this css loader.
The icon you pointed out fires a off-canvas type modal when clicking that icon. but it wont after filter change. that was more my query on that screen. Thanks again for a quick reply 🙂

• This reply was modified 1 year, 3 months ago by kerry_avxz.

[Ernest Marcinko]

You are very welcome!

Oh, I’m sorry, I didn’t click that one, but the other ones, so I didn’t notice that.

Okay, that seems to be not hooked correctly and does not re-initialize. There is still hope, after running elementorFrontend.init() manually in the console it works again, so I guess all you need is a hook to do that after each search. This should do the trick:

/**
 * Reinit Elementor after results are replaced
 */
add_action('wp_footer', function () {
	?>
	<script>
	window.addEventListener("load", () => {
		document.querySelectorAll(".asp_main_container").forEach((el) => {
			el.addEventListener("asp_elementor_results", () => {
				elementorFrontend.init()
			});
		});
	});
	</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.

[kerry_avxz]

Sir! you are absolute scholar and gent! that did it thanks 🙂

[Ernest Marcinko]

Great! I’m happy it works now 🙂

If you don’t mind, I will close this topic soon and mark it as resolved, feel free to open another one if you have other questions or issues.

If you like the plugin and have not rated already, feel free to leave a rating on the wordpress plugin repository, it’s greatly appreciated.

[Author]

Posts