[Résolu] Infinite scrolling replaces first 10 posts but thereafter works properly

[Auteur]

Publications

[Shreyas Khatri]

I have several views (Views and Archive Views) that uses Infinite Scroll. However none of them work as expected. The first page disappears (fades out) and is replaced by second page.

Thereafter infinite scroll works correctly.

This is exactly as per the post mentioned over here:
https://toolset.com/forums/topic/infinite-scroll-changing-page/

I had previously raised support ticket over here:
https://toolset.com/forums/topic/infinite-scroll-replaces-the-first-page-of-pagination-instead-of-scrolling/

The website has more than 70 active plugins. However it is not possible for me to disable any of them. At the moment, I can not duplicate site since the database is very large.

To identify the issue, you can look at:

1) Recent section at the end of the homepage:
hidden link

2) Shop section:
hidden link

The problem happens even on the archive view with infinite scroll. I have replaced infinite scroll with normal pagination on archive pages.

You can look at the video over here:
hidden link

At 0:07 seconds, the pagination will flicker and load the second page (replace the first page).

Thereafter the pagination loads properly.

[Christian Cox]

Hi, this is strange. I see duplicate IDs in your page source. Please see the attached screenshot.

<div class="row " id="search-results-parameters">
<div class="col-sm-12" id="search-results-parameters">...

Do you know how these IDs are added to your rows and cells? Check in Layouts and your View Loop Output or Content Templates. If you can find these IDs, please keep the 1st id (the row) and delete or change the 2nd id (the column). Let me know the results.

[Shreyas Khatri]

Dear Christian,

I've renamed the row id to: 'search-results-parameters-wrapper'.

However, I do not think that is an issue as the infinite scroll not working as expected happens not only on the homepage (Recent section):
hidden link

but also on other pages (which did not have the row: 'search-results-parameters'), such as the Shop section (WooCommerce).

As mentioned in my post, it used to happen on category archive infinite scroll as well. But due to the on-going issue, I have changed it to manual pagination.

Look forward for your continued support.

[Christian Cox]

Based on the plugins the other ticket author had active when the ticket was created, the only two plugins I see that are common between your sites are Jetpack and WP Custom Widget Area. I realize it's not possible to disable all your plugins to test, but if possible I would recommend trying at least these two.

Can you tell me more about how these Views are added to your homepage and shop page - as a Layout cell, or a shortcode, or other way?
Can you share any code or shortcode that was used to insert each View?
Can you share the structure of any Layout where these Views are placed as View Cells?
Can you share a screenshot showing the settings for each View, the Loop Output Editor, and the Filter Controls for each View?

[Shreyas Khatri]

Dear Christian,

Thanks for looking into this.

This is issue is sort of fixed. Minification of HTML from CloudFlare was the culprit.

So as you had asked, I disabled both the plugins: JetPack as well as WP Custom Widget Area, however the problem did not resolve.

While relooking at the issue, I realized two things were also happening:

1) When the homepage is first loaded for the first time (say in Incognito), the issue does not happen, but it happens if I again visit the page (either refresh or otherwise). So if the user has already been on that page, then the issue happens. For first time visitors, it does not.

2) The spinner graphic (indicating infinite scroll) also does not load.

So just before hitting submit button for this post, I decided to check if the issue can be due to any settings at CloudFlare. After toggling various settings, could point it to HTML minification.

Now I need your help to get the spinner icon that notifies user that infinite scroll exists which currently does not appear.

For both, homepage and the shop section, the view is embedded using a layout cell.

See attached two screenshots:
1) Homepage layout which shows view embedded using 'View' cell
2) Entire screenshot of 'Recent' View settings

p.s.: Further, it would be great if you can reproduce infinite scroll error with HTML minified as it is important from Google PageSpeed perspective.

Many thanks once again for your persistence on this.

[Christian Cox]

In your Advanced Settings for this View, what do you have set for caching and preloading? You shouldn't expect to see the spinner if caching and pre-loading are on. There is a bug, though, as custom spinners are not working in any case. Our developers are aware that a couple of users have reported the custom spinner not working as expected, and will hopefully resolve that issue ASAP. I can keep you up-to-date here as that work progresses.

For the Cloudfare issue, are you able to disable minification for certain parts of the HTML payload, or is it an all-or-nothing setting? For instance, if it's possible to exclude some parts of HTML from the minifier, it would be helpful for me to know which part is causing the problem with infinite scrolling.

[Shreyas Khatri]

Dear Christian,

I'm able to see the spinner/progress bar with caching and pre-loading disabled in Views' advance settings.

Many thanks for the info.

There is no option of partial caching in CloudFlare.

Thanks for all your help, time and support. You may close the ticket. It will be great however if the root cause of infinite scroll not working with HTML minified could be found of for benefit of the community and the same be included in the future release.