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

Question

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

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

任何人都可以阐明一下吗？

Answer 1

尝试在 grid.html（或为主题中的类别产品创建<ul>任何模板文件）上初始化 Infinite Scroll。 下面是一个使用 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> 

编辑：在用户报告现在正在复制类别产品的第一页后更新。 特定于 Next 链接的新标记制作路径：

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

Answer 2

一步一步的信息在这里。

有两种方法可以在您的主题中安装无限滚动。

1. 直接，我们可以使用 CDN URL 包含无限滚动。 我们需要在标签内的代码下方添加。

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

2. 安装无限滚动的 NPM 包。

使用 npm 安装：

npm install infinite-scroll

用纱线安装：

yarn add infinite-scroll

注意：直接方法可能会影响一些问题。 某些浏览器不允许使用单独的网络提取调用。 我们更喜欢使用 NPM 打包方式。

Answer 3

npm 是使用无限滚动的最佳方式

使用 npm 安装：

npm install infinite-scroll

用纱线安装：

yarn add infinite-scroll