进行分面搜索后,Bigcommerce 无限滚动不起作用

问题描述

无限滚动到我们的自定义 PLP 页面仅适用于页面加载。选择分面搜索后,无限滚动功能在附加分面响应后不起作用。请有人帮助我们在附加分面搜索结果后使无限滚动功能正常工作。

提前致谢

解决方法

BigCommerce 默认不提供无限滚动功能,因此我假设您已遵循本指南:https://medium.com/bigcommerce-developer-blog/how-to-add-infinite-scroll-to-category-pages-6c991750a8d5

要记住的是,当应用过滤器时,类别页面会通过 AJAX 重新加载。对此的修复应该就像在 this.facetedSearch 函数中复制 infiniteScroll 函数一样简单。

在您的 category.js 文件中查找以下代码:

this.facetedSearch = new FacetedSearch(requestOptions,(content) => {
    $productListingContainer.html(content.productListing);
    $facetedSearchContainer.html(content.sidebar);

    $('html,body').animate({
        scrollTop: 0,},100);
});

并在此处添加无限滚动功能:

this.facetedSearch = new FacetedSearch(requestOptions,(content) => {
    $productListingContainer.html(content.productListing);
    $facetedSearchContainer.html(content.sidebar);
    function infiniteScroll() {
        const elem = document.querySelector('.productGrid');
        const infScroll = new InfiniteScroll(elem,{
        // options
            path: '.pagination-item--next .pagination-link',append: '.product',history: false,});
         return infScroll;
    }
    infiniteScroll();
    $('html,100);
});