时间戳

首页 > 解决方案 > Bigcommerce 无限滚动在进行多面搜索后不起作用

infinite-scroll - Bigcommerce 无限滚动在进行多面搜索后不起作用

问题描述

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

提前致谢

标签： infinite-scrollbigcommercefaceted-search

解决方案

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

要记住的是，当应用过滤器时，类别页面会通过 AJAX 重新加载。解决这个问题应该很简单，就像在 this.facetedSearch 函数中复制无限滚动函数一样简单。

在您的 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, body').animate({
        scrollTop: 0,
    }, 100);
});

推荐阅读