Infinite Scroll Pagination Loading Out of Order and Duplicating Products

Design help Layout & Design
1

I’m having trouble getting this code to behave in the way I’d like:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
   $.noConflict();
   jQuery(document).ready(function($) {
       $('.collection-list-7').infiniteScroll({ // selector for the CMS collection list      
           path: '.w-pagination-next', // selector for the paged navigation      
           append: '.product-item', // selector for all items you'll retrieve      
           animate: true,
           loadingText: "",
           maxPage: undefined,
       });
   });

</script>

See the tutorial here: A guide to infinite scroll in Webflow | Webflow Blog

The issue I’m seeing is that the pagination doesn’t scroll in the order it should. For example, when you scroll the pagination should change depending on what page is next and end once there are no further category items:

/category/all
/category/all?e864e130_page=2
/category/all?e864e130_page=3
/category/all?e864e130_page=4
Etc…

But what I’m experiencing is, the pagination can jump all over the place when I scroll and repeat products that I’ve already passed. Example:

/category/all
/category/all?e864e130_page=24
/category/all?e864e130_page=8
/category/all?e864e130_page=2
Etc…

On page load, it might seem that it’s going in order but when you look at the products you’ll see that they repeat and it’s not in the order I have it set up as in my category settings. Also when you scroll back up and down again it starts jumping around and loads unpredictably.

Here is somebody who has implemented it and it seems to work correctly: https://www.youtube.com/watch?v=8_zElpQZaGM&t=93s

Can anybody point me in the right direction to solve this?

Please and thank you,
J

Here is my site Read-Only: Webflow - thePopmill

2

I figured out what the issue was. I had 2 instances of my collection list on the page and it was messing it up. Fixed!