Bigcommerce Infinite scroll not working after faceted search is made - infinite-scroll

Question

Infinite scroll to our Custom PLP page is only working for page load alone. After selecting the faceted search, the infinite scroll feature is not working after the faceted response is appended. Please someone help us to have the Infinite scroll feature working after the faceted search result is appended.
Thanks in Advance

Answer 1

BigCommerce does not offer an Infinite Scroll feature by default, so I'm going to assume you followed this guide: https://medium.com/bigcommerce-developer-blog/how-to-add-infinite-scroll-to-category-pages-6c991750a8d5
The thing to keep in mind is that the category page gets reloaded via AJAX when a filter is applied. The fix for this should be as simple as duplicating the infiniteScroll function inside the this.facetedSearch function.
Look for the following code in your category.js file:
this.facetedSearch = new FacetedSearch(requestOptions, (content) => {
$productListingContainer.html(content.productListing);
$facetedSearchContainer.html(content.sidebar);
$('html, body').animate({
scrollTop: 0,
}, 100);
});
And add the infinite scroll function here as well:
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);
});