Hi Eamon

If I take a look at that page, I can see there are various Javascript errors (coming from the slider)

It looks like the “weeks” slider is not initialising properly.

What are you setting as min / max for your weeks? If you have “auto detect” for min / max of the weeks, and your results don’t have data for those fields, that might be why its causing an issue.

Try setting your min / max for the weeks field manually and see if you get the issue?

Thanks

Hey Eamonn

You’re lucky you caught me working on a sat night 😉

Take a look at the setup instructions for ajax:
https://www.designsandcode.com/documentation/search-filter-pro/search-results/#Setting_Up_Ajax

Depending on if your layout needs JavaScript to work this might not be straight forward.

Anyway, if you want to use ajax, you must specify a valid “ajax container”, it looks like you could try using #content as your ajax container to get it working, but I think a better option is below:

If you are using an EDD downloads shortcode [downloads] then you would wrap this in a div with an ID (goto html view in WP Editor), so it would become : <div id="sf-results">[downloads]</div>

Then in S&F, under display results you would set your ajax container to #sf-results

This would get Ajax working..

However… If your layout needs JavaScript to work properly (I can’t remember if EDD does), then you will need to re-initialise the javascript that is needed here (its a bit more complicated and requires adding some JS to your theme).

Anyway, as its EDD I am happy to look into to find out, if it is required.

(I may not be back on this weekend to reply but I’ll try to keep my eye out for this one)

Best

Hi Eamonn

I’ve spent a good while looking at this now.

Essentially its what I described above.

When you load the page for the first time, your get the nice grid layout. This is because Marketify runs some JavaScript when the page loads to do this.

When we do an ajax request with Search & Filter, we replace the html for the results, but what hasn’t happened is the re-layout magic that Marketify does on a page load.

Fortunately, we have a javascript event to detect when results are loaded in via ajax:

(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//need to re-intialise the code for doing the Marketify layout here
	});
}(jQuery));

What we need to do is add the javascript code that Marketify uses for laying out the grid where it says //need to re-intialise...

I’ve gone through their code to see if I can see the magic snippet but no luck.

Perhaps you can open a thread on their forums, referencing this one, and hopefully they can provide the code snippet we need.

Hope that helps

Hi Eamonn

I’m afraid I had already got that far.

What we need is the JavaScript function, and I’ve gone through their JS files already, but can’t really make heads or tails of it.

What we need is the JS function to initialise the masonry layout on the shop, which I would hope would be something like:

$('selector').masonryFunction();

The best people to find this out would be the devs of Marketify.

I can’t see how to do it, therefor for now I have to say at this time it looks like its not possible to reload items in the shop using Ajax in Marketify (and I suspect this would be the same for any other plugin wanting to do some dynamic reloading of the shop, as they too would need access to this function).

Hope that helps – my hands are tied in this instance.

Best

Yup perfect

Add this to your themes JS:

(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		var grid;
		$(el).find($('.edd_download.content-grid-download')).attr('style', '');
		grid = document.querySelector(el);
		salvattore['register_grid'](grid);
	});
}(jQuery));

Let me know that works ok, its working locally just fine 🙂