问题描述
无限滚动到我们的自定义 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);
});