Home > widget-integration > FilterController > setupCoreUI

FilterController.setupCoreUI() method

Sets up and initializes all core UI components for the filter system. Handles both initial render and post-filter-update UI synchronization.

Initializes: - SEO meta tags for search engines - Currency formatting for price filters - Filter option collapse states - Product list responsive behavior - Product price display and transformations - Product swatches and variant selection - Image height uniformity - Tooltips and animations - Scroll restoration - Bulk quantity controls (if enabled) - Search result tabs (for search pages) - Infinite scroll pagination (if enabled)

Signature:

setupCoreUI(): Promise<void>;

Returns:

Promise<void>

Remarks

This method uses requestIdleCallback and requestAnimationFrame for performance optimization on mobile devices. On desktop, operations run synchronously. Post-processes are executed differently based on device type.

Example 1

Override to add custom UI initialization:

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

      // Add custom UI initialization
      this.initCustomBadges();
      this.setupProductHoverEffects();
    }
  };
});

Example 2

Modify UI setup for specific shop requirements:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    async setupCoreUI() {
      // Run base setup
      await super.setupCoreUI();

      // Add shop-specific UI modifications
      if (this.isVipShop()) {
        this.addVipBadgesToProducts();
      }
    }
  };
});