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

Anonymous

#125399

I added the css code but nothing happens!!!

the loader is not appearing…

Why?
Thanks

Trevor

#125434

It is very difficult for me to do this for you, because:

1. The site is live (yes?) and I cannot experiment on live sites. I will only work on a site that is a copy, for safety. If I break anything, there is no pain or loss.
2. The CSS is minified/combined.

Is it possible for you to copy the site to a staging site, switch off all caching, minification, asset combining and CDN, and let me know where you entered this custom CSS?

Anonymous

#125714

Hello, impossible for me to do that, I do not have the time.

I put the css code into the style.css of my child theme (like all my own styles)

I put the !important; on each lines but nothing changes…

Could you please tell me where is located the css in the core files?

Thanks

Trevor

#125731

This reply has been marked as private.

Anonymous

#125828

Trevor, could you please see with Ross if he has a solution?

I cannot stay like that with the loader not displaying…

You can give me some advice to see, I can investigate from myself into the code.

Thanks for your help,

Best

Trevor

#125832

This reply has been marked as private.

Ross Moderator

#127324

Hi Sebastian

I had a look..

Ok so a couple of things…

I can see the loader here for example (just below your products, in your footer on the grey):

But of course this is not sitting right. One thing I noticed in fact, was that the all your products are part of a list <li>, however our loader is attached as a <div> –

So this will not work :/ Our loader was only supposed to basic / quick to setup, so for now I won’t add support for li, but we do have an alternative:

Make your own loader using our JS events – https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

In this case you can disable our loader, and create your own, somewhere on the page (you can even use our class .search-filter-scroll-loading to get the animated icon, but you will have to manually show / hide the loader yourself and integrate with your markup.

Something like:

(function ( $ ) {
	
	"use strict";
	
	//detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  console.log("ajax start");
	  //show your loader
	});

	//detects when the ajax request has finished and the content has been updated
	// - add scripts that apply to your results here
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//hide your loader
	});

	
}(jQuery));

(I’m assuming you know some jQuery to follow the above)

Let me know if all makes sense 🙂

Best

Anonymous

#127727

Hi Ross,

Thanks for your help,

However, if I use the ajax method it is good but it also shows the loader when the search is loading and I don’t want.

It is bad that you cannot integrate the loader into the <li> as it seems that all the woocommerce products are into <li>…

DO you have another alternative?

Best

Anonymous

#127729

Hi again,

I think that the loader should be integrated into the <li> because it should load at the same time the products load.

At the moment, if I scroll down the products, the loader stay at the top and goes over the screen, normally if I scroll down the loader should follow me and display still at the bottom, right?

Thanks for your help,
Best

Anonymous

#128313

any answer?

[Author]

Posts