CODEWITHSUNDEEP
javascriptjqueryhtmlbigcommerce
Christian Dicker
Christian Dicker

Reputation: 15

How to add Infinite Scroll to BigCommerce Category page

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?

Upvotes: 0

Views: 1696

Answers (2)

Thanigaivel
Thanigaivel

Reputation: 1

Npm is the best way to use infinite scroll

Install with npm:

npm install infinite-scroll

Install with yarn:

yarn add infinite-scroll

Upvotes: -1

Karen White
Karen White

Reputation: 2153

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 }'

Upvotes: 2

Related Questions