Question

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

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

任何人都能解释一下吗？

Answer 1

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

<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链接：

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

修改在user reported之后更新，现在正在复制类别产品的第一页。新标记使路径特定于下一个链接：

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

如何将无限滚动添加到BigCommerce类别页面

1 个答案: