How to add Infinite Scroll to BigCommerce Category page

Question

I am trying to add infinite scroll to the category page on BigCommerce. Infinite Scroll

I have uploaded the JS script to the content file on webdav and inserted the HTML code on the category.html page but it won't work. I think because it's a partial page that gets injected into the base.html . I have added the script into that page to no avail. I am not sure how to call the script with jQuery or JavaScript as shown in the instructions.

Can anyone shed some light?

Answer 1

Try initializing Infinite Scroll on grid.html (or whichever template file creates the <ul> for the category products in your theme). Here's an example using the HTML initialization method, applied to the grid.html file from Cornerstone:

<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-link", "append": ".product", "history": false }'>
{{#each products}}
<li class="product">
    {{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
</li>
{{/each}}

Just be sure that you are referencing the Infinite Scroll .js files in the {{head}} section of base.html, either with the path to the file in WebDAV, or using the CDN link:

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> 

Edit: Updating after a user reported that this is now duplicating the first page of category products. New markup making path specific to Next link:

data-infinite-scroll='{ "path": ".pagination-item--next .pagination-link", "append": ".product", "history": false }'

Answer 2

Step by step information here .

There are two ways to install infinite scroll in your themes.

1. Directly, we can include infinite scroll using CDN URLs. We need to add below the code inside the tag.

   <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>

2. NPM package to install infinite scroll.

Install with npm:

npm install infinite-scroll

Install with yarn:

yarn add infinite-scroll

Notes: The direct method may affect some issues. Some browsers are not allowed to use separate network fetch calls. We prefer to use the NPM package method.

Answer 3

Npm is the best way to use infinite scroll

Install with npm:

npm install infinite-scroll

Install with yarn:

yarn add infinite-scroll