Elementor Loop Item link not working

[Carles Barra]

Hi,

I’m using your plugin in combination of Elementor Pro Loop Grids to show the results. The thing is that if I use the loop grid in a standard elementor pro query the links of each result work, but when i’m using your plugin to filter the query none of them work.

You can see the first example here (standard loop grid): https://pubillatge.cat/agenda-2/
And the second one here (loop grid + ajax search pro): https://pubillatge.cat/agenda-3/

Thanks!

[Ernest Marcinko]

Hi,

It is a known issue with some specific loop grid setups, that has being addressed in the upcoming release.

I’m attaching a patched version to this reply, please install it. After updating and clearing the cache the issue should be resolved.

[Carles Barra]

Hi again,

I have installed it (although it says that is the same version that I have but I replaced it anyway), cleared the cache and still does not work.

Thanks!

[Ernest Marcinko]

Thanks for the feedback!

Are you using a custom plugin to make the whole elementor columns clickable? It does not seem like a core Elementor behavior. I suspect their script does not recognize the change in the content and does not make it clickable.
If it’s a 3rd party plugin, can you let me know which one it is?

[Carles Barra]

Wops! I forgot, the plugin is Make Column Clickable Elementor.

[Ernest Marcinko]

Yea, okay. I checked the event handler, it does not re-attach when the items are reloaded unfortunately. I have extracted their code to re-attach the event listener, I hope they can fix it in the future. For now, use this custom code:

add_action(
	'wp_footer',
	function () {
		?>
		<script>
			jQuery(function() {
				const handler = function(e) {
					var wrapper = jQuery(this)
						, url = wrapper.data('column-clickable');
					if (url) {
						if (jQuery(e.target).filter('a, a *, .no-link, .no-link *').length) {
							return true;
						}
						if (url.match("^#elementor-action")) {
							let hash = url;
							hash = decodeURIComponent(hash);
							if (hash.includes("elementor-action:action=popup:open") || hash.includes("elementor-action:action=lightbox")) {
								if (0 === wrapper.find('#make-column-clickable-open-dynamic').length) {
									wrapper.append('<a id="make-column-clickable-open-dynamic" style="display: none !important;" href="' + url + '">Open dynamic content</a>');
								}
								wrapper.find('#make-column-clickable-open-dynamic').click();
								return true;
							}
							return true;
						}
						if (url.match("^#")) {
							let hash = url;
							jQuery('html, body').animate({
								scrollTop: jQuery(hash).offset().top
							}, 800, function() {
								window.location.hash = hash;
							});
							return true;
						}
						window.open(url, wrapper.data('column-clickable-blank'));
						return false;
					}
				}
				document.querySelectorAll(".asp_main_container").forEach((el) => {
					el.addEventListener("asp_search_end", (event) => {
						jQuery(document).on('click', 'body:not(.elementor-editor-active) .make-column-clickable-elementor', handler);
					});
				});
			});
		</script>
		<?php
	},
	999
);

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.

[Carles Barra]

Wow! I was expecting something like “well, this is not our fault, we can’t help you” but your support is gold. I’m glad I have paid for this plugin.

It works perfect. Thanks for your help Ernest!

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts