如何将无限滚动添加到BigCommerce类别页面 [英] How to add Infinite Scroll to BigCommerce Category page

问题描述

我正在尝试将无限滚动添加到BigCommerce上的类别页面。 无限滚动

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

我上传了JS脚本到webdav上的内容文件并在 category.html 页面上插入HTML代码，但它不起作用。我认为因为它是一个部分页面被注入 base.html 。我已将脚本添加到该页面中无济于事。我不知道如何使用jQuery或JavaScript调用脚本，如说明中所示。

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?

推荐答案

尝试在grid.html上初始化无限滚动（或任何模板文件为该类别创建< ul> 你主题的产品）。下面是一个使用HTML初始化方法的示例，应用于Cornerstone的grid.html文件：

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

请确保您在base.html的{{head}}部分引用了Infinite Scroll .js文件，或者使用WebDAV中的文件路径，或者使用CDN链接：

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> 

修改：
用户报告现在这是复制类别产品的第一页。新标记制作特定于下一个链接的路径：

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

这篇关于如何将无限滚动添加到BigCommerce类别页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！