search-filter-scroll-loading icon positionning in infinite scroll?

Anonymous

#128313

any answer?

Trevor

#128329

Hi Sebastien. Ross will be back in the office later this evening. It was a long national holiday weekend last weekend, so he is catching up with the outstanding threads right now, tonight and tomorrow.

Anonymous

#128385

Ok, no problem,
Thanks

Ross Moderator

#128735

Hi Sebastian

I’ve made some updates… so a couple of things… 🙂

1) I have fixed the plugin
So the loader is now automatically added as li if its inside a ul or ol.

However, in my experience, with ordered lists like this, its normally quite essential to have a class attached to that li, like product or post for example. I don’t think its a good place (to add in the UI) even more fields and inputs to do this.

So, S&F is fixed, but, for more advanced integrations, our built in loader just won’t do.

2) Figuring out what type of load event has occurred
So, back to the original plan from above 🙂

What I did was, in the JS event sf:ajaxstart, I attached some data, about the type of loading – so now you can tell if the loading is an infinite scroll event, or a regular load results event.

Again, this has been programmed into the update I linked. Please see this example on correct usage (I’ve tested this locally and it works)

(function ( $ ) {
	
	"use strict";
	
	var $loader = $('<div />', {
		'class': 'search-filter-scroll-loading'
	});
	
	//detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(e, event_data){
	  
		if(event_data.type == "load_more"){
			//show your loader
			$('ul.products').after($loader)
		}
	  
	});

	//detects when the ajax request has finished and the content has been updated
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(e, event_data){
		//hide your loader
		$loader.remove();
	});
	
}(jQuery));

3) Positioning of the loader

You can now place your loader ANYWHERE, you can place it inside your results list using append(), or you can place it directly after your results list (which I think is best, so its always underneath) using after().

In fact you can attach it before, inside, after, any html element on your entire page, just use the code above as a starting point (I have used the .after() the products list as I think this is the best positioning).

I hope that helps, and let me know how you get on 🙂

Thanks

[Author]

Posts