Home > widget-integration > FilterController > handleProductListResponsive

FilterController.handleProductListResponsive() method

Handles responsive behavior for product list layout. Adjusts product grid columns based on viewport size and view mode (grid/list).

This method: - Listens for window resize events - Detects current view mode (grid or list) - Applies appropriate column classes for mobile/desktop - Handles grid column count based on theme settings - Manages list view layout switching

Signature:

handleProductListResponsive(): void;

Returns:

void

Remarks

Uses theme settings for productsPerRowOnDesktop and productsPerRowOnMobile to determine grid columns. The isMobile() check determines when to switch between mobile and desktop layouts.

Example

Override to add custom responsive breakpoints:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    handleProductListResponsive() {
      super.handleProductListResponsive();

      // Add tablet-specific layout
      window.addEventListener('resize', () => {
        const productList = this.document.querySelector('.boost-sd__product-list');
        if (window.innerWidth > 768 && window.innerWidth <= 1024) {
          productList?.classList.add('boost-sd__product-list-tablet-3-col');
        }
      });
    }
  };
});