无限滚动.js在滚动上加载相同的产品,而不是下一页的产品 - BigCommerce 问题



我尝试了与以下链接中提到的相同代码,但由于某种原因,它仅加载(克隆(当前页面中的项目,而不是下一页中的项目????任何想法为什么?

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

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

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

看起来所有分页链接都有类.pagination-link,包括编号的链接(1,2,3 等(。正在发生的事情是,无限滚动库正在抓取该类的第一个元素,它恰好是 page=1,所以这是要附加的第一页。

尝试将代码更新为此,以指定路径链接应为"下一个"分页链接:

<ul class="productGrid" data-infinite-scroll='{ "path": ".pagination-item--next .pagination-link", "append": ".product", "history": false }'>
    {{#each products}}
    <li class="product">
            {{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1)}}
    </li>
    {{/each}}
</ul>

感谢您的提醒 - 我将在您链接到的帖子上更新我之前的答案:)

最新更新