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

Question

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

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

任何人都可以解释一下吗？

Answer 1

尝试在 grid.html 上初始化 Infinite Scroll（或为主题中的类别产品创建 <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 link:

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

编辑： 在之后更新，这现在正在复制类别产品的第一页。特定于 Next link:

的新标记制作路径

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

Answer 2

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

使用 npm 安装：

npm install infinite-scroll

用纱线安装：

yarn add infinite-scroll

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

How to add Infinite Scroll to BigCommerce Category page

html

javascript

jquery

bigcommerce