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?

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

来源：https://stackoverflow.com/questions/49848501/how-to-add-infinite-scroll-to-bigcommerce-category-page

标签

javascript

jquery

html

bigcommerce