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

Question

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

我已将 JS 脚本上传到 webdav 上的内容文件，并在 category.html 页面上插入 HTML 代码，但它不起作用。我认为是因为它是被注入(inject)到 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}} 部分中的无限滚动 .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 }'