Bigcommerce自定义PLP页面Infinite scroll筛选搜索后失效问题求助

Got it, let’s break down why your infinite scroll stops working after faceted search on your custom Bigcommerce Product Listing Page (PLP), then walk through concrete fixes that should get it running smoothly again.

Why This Happens #

Infinite scroll relies on two core pieces: scroll event listeners and state tracking (like current page number). When you run a faceted search, Bigcommerce replaces or appends new product content to the DOM, and:

• Your original scroll listeners might be bound to elements that got replaced during the filter update
• The pagination state (e.g., current page) from before the filter isn’t reset, leading to mismatched product loads
• The infinite scroll logic isn’t reinitialized to recognize the new filtered content set

Step-by-Step Fixes #

1. Re-Initialize Infinite Scroll After Faceted Search #

Bigcommerce’s faceted search emits an afterUpdate event once filters are applied and content is refreshed. Hook into this to re-run your infinite scroll setup every time filters change.

First, wrap your infinite scroll logic in a reusable function (if it isn’t already):

// Core infinite scroll initialization function
function initInfiniteScroll() {
  let currentPage = 1;
  const productContainer = document.querySelector('.your-product-list-container');
  let isLoading = false;

  // Remove existing scroll listener first to avoid duplicate triggers
  window.removeEventListener('scroll', handleScroll);

  function handleScroll() {
    if (isLoading) return;

    // Check if user is near the bottom of the page (adjust the 200px buffer as needed)
    const scrollTriggerPoint = document.body.offsetHeight - window.innerHeight - 200;
    if (window.scrollY >= scrollTriggerPoint) {
      isLoading = true;
      currentPage++;

      // Fetch next page of filtered products (pass current filter params)
      const filterParams = new URLSearchParams(window.location.search);
      filterParams.set('page', currentPage);

      fetch(`/api/storefront/products?${filterParams}`)
        .then(res => res.json())
        .then(data => {
          // Append new products to the container (replace with your actual product card markup)
          data.data.forEach(product => {
            productContainer.innerHTML += `<div class="product-card">${product.name}</div>`;
          });

          isLoading = false;

          // Stop listening if there are no more pages to load
          if (currentPage >= data.meta.pagination.totalPages) {
            window.removeEventListener('scroll', handleScroll);
          }
        })
        .catch(err => {
          console.error('Failed to load products:', err);
          isLoading = false;
        });
    }
  }

  // Add fresh scroll listener
  window.addEventListener('scroll', handleScroll);
}

Then, hook into the faceted search event to re-run this function:

// Initialize infinite scroll on page load
document.addEventListener('DOMContentLoaded', initInfiniteScroll);

// Re-initialize after faceted search updates the content
if (window.bc?.facetedSearch) {
  bc.facetedSearch.on('afterUpdate', () => {
    initInfiniteScroll();
  });
}

2. Reset Pagination State #

Make sure every time filters are applied, your pagination state resets to 1. If you’re using global variables for state, reset them inside the afterUpdate callback:

bc.facetedSearch.on('afterUpdate', () => {
  // Reset global pagination state if your logic uses it
  window.currentPLPPage = 1;
  initInfiniteScroll();
});

3. Use Event Delegation for Persistent Listeners #

If your infinite scroll uses a "Load More" button instead of scroll-based triggering, use event delegation on a parent element that doesn’t get replaced during faceted search:

// Bind to a persistent parent container instead of the button itself
document.querySelector('.plp-wrapper').addEventListener('click', (e) => {
  if (e.target.matches('.load-more-btn')) {
    // Run your load-more product logic here
  }
});

This way, even if the "Load More" button is replaced after filtering, the listener stays active.

4. Validate DOM Elements After Filtering #

Ensure any DOM elements your infinite scroll relies on (like product containers, loading spinners) are re-selected after filtering, instead of using cached references from the initial page load.

Key Notes #

• Always pass the current filter parameters to your product fetch request (using window.location.search) to ensure infinite scroll loads filtered products, not the original unfiltered set.
• Remove old event listeners before adding new ones to prevent duplicate scroll triggers that can cause bugs.

内容的提问来源于stack exchange，提问作者Hari