Stop Infinite scroll after a filter is applied

Anonymous

#274927

Hello Trevor!

Could you help me please with one question?

I have this site with search and filter and results set up on the same page. Infinite scroll is set up on results page.
When i don’t apply any filter, i scroll down, and new posts shows up, which is correct.
Suppose we have a category with 2 available posts. We select this category, and those 2 posts show up. Everything is correct at this point. But if we scroll down a little bit, infinite scroll is activated, and many more posts show up. Which is not what i want. Because filter is set up, so i expect to see only posts from the selected category (only 2 posts in this example).

I wonder if this is a bug or normal S&F behavior.
Please have a look at this short video > https://gyazo.com/772f60408439b192c7d4514aa70339fc
This is the concerned site page > https://www.haldugroep.nl/vacatures/
And maybe you want to have a look at the filter set up, it’s here > https://prnt.sc/y04vky , https://prnt.sc/y04vzi , https://prnt.sc/y04wwg
If you need credentials to access the site, please let me know, i can provide those.

Thanks for your time,
Have a good day!

Trevor

#274944

As a test, if you set aside the customised results.php file you are using, and instead use our default results-infinite-scroll.php (renamed to results.php), does the issue still happen?

I am wondering if it is the structure of the HTML of your customised version that is the issue.

Anonymous

#274966

Thanks for the quick reply!
And i apologize for my late response…

I’ve tested it as you advised > https://prnt.sc/y0f3ke
Result > https://gyazo.com/fc4bb68038c9619474c9ec6b175bf8dd
Indeed it displays the only 2 posts in this category.

But on the customized template where i display the results, i am using the results shortcode, as follows > https://prnt.sc/y0fzp5 Am i doing something wrong here?

Is there another way to display the results beside results shortcode?

Thanks!

Trevor

#275108

But you have customised the results.php file, yes? Can you share that customised file with me? IF you post the content directly here, please post any code inside code ticks (one before the code, one after)? On my UK Windows keyboard, the code tick key is next to the 1 key in the standard part of the keyboard. If you do this Google search and look at the images, they show various keyboards and where the key is located:

https://www.google.com/search?q=back+tick+code+key

Alternatively, you could share the file with me via a file sharing site.

Anonymous

#275186

Hi Trevor,

No, i don’t use results.php file to display my results.
I display all my results with the S&F results shortcode, in a page with specific template > tpl-vacatures.php .
Here’s the entire template, including filter shortodes (search form shortcode and results shorcode) > https://www.codepile.net/pile/7YgDrapv
Then i set up the search form to display results using shortcodes in this page > https://www.haldugroep.nl/vacatures/
https://prnt.sc/y49e7t

I followed the shortcodes setup instruction to set it up correctly. Effectively results are loaded on my page.
Hope i didn’t miss anything…

Trevor

#275195

The form itself is set to the ‘Shortcode’ display results method, as you show here is this screenshot:

https://prnt.sc/y49e7t

You must be using the results.php template file. Let me explain.

In this screenshot:

https://prnt.sc/y0fzp5

You show on line 141 that you are calling the ‘results’ for the form with that shortcode.

So, the page is using the tpl-vacatures.php template, but that shortcode then includes in to the page the results.php file.

The results that appear on the page, and the infinite scroll loop, are coded in that results.php template file, which should be in a search-filter folder in your child theme folder.

Anonymous

#275200

Ohh i see what you mean,

Sorry,
My fault,
Here’s the results template customized by me a while ago > https://www.codepile.net/pile/jEwp8KA1

I’ve noticed the `data-search-filter-action=’infinite-scroll-end’ attribute in results-infinite-scroll.php,
I’ve replaced it with pagination <div> in my results template, but the infinite scroll on main page stopped working > https://gyazo.com/2e867ba65472292cb4ff3e7f12d4a04e
Also, i tried to replace it with this section > https://prnt.sc/y4ohs4 , still not working…
What am i doing wrong?

Anonymous

#275228

Hello again Trevor!

I’ve paid more attention to the results-infinite-scroll.php template and adjusted it as needed to my old customized template.
It didn’t work at first,
but then i remembered about Ajax pagination settings, namely:
-Post / Result Selector: div.search-filter-result-item
-Infinite Scroll Container: div.search-filter-results-list
so i completed them as well > https://prnt.sc/y5an0f

Now it works like a charm! > https://gyazo.com/eb3f8779bd4c185c8a65710a2f59c590

So thanks a lot for pointing out to the infinite-scroll template.
And thanks for your time!

Best regards!

Trevor

#275284

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts