Home > widget-integration > FilterHandler
FilterHandler class
Handler service for filter widget user interactions and UI state management.
This service orchestrates all user interaction handlers for the filter system including product clicks, sorting, pagination, view switching, and filter tree interactions. It acts as the central event router that processes DOM events and translates them into filter state changes and custom events. Can be extended by Technical Support teams to customize interaction behaviors for shop-specific requirements.
Signature:
export declare class FilterHandler
Remarks
Key responsibilities: - Product item click handling and redirect logic - Sort dropdown interaction and state management - Pagination controls (default, load more, infinite scroll) - View-as controls (grid/list view switching) - Filter tree toggle and mobile interactions - Limit list (products per page) controls - Legacy metadata action routing - Event emission for filter state changes
All public methods emit events through EVENT_NAMES which can be intercepted by extended implementations for additional custom logic.
Example
Extend to add custom product click analytics:
window.boostWidgetIntegration.extend('FilterHandler', (FilterHandler) => {
return class CustomFilterHandler extends FilterHandler {
handleClickProductItem(target) {
// Track product clicks for analytics
const productItem = target.closest('.boost-sd__product-item');
if (productItem) {
const productId = productItem.getAttribute('data-product-id');
this.sendAnalytics('product_click', { productId });
}
return super.handleClickProductItem(target);
}
};
});
Constructors
|
Constructor |
Modifiers |
Description |
|---|---|---|
|
(constructor)(appService, filterHelper, filterStore, domHelper, filterService) |
Constructs a new instance of the |
Properties
|
Property |
Modifiers |
Type |
Description |
|---|---|---|---|
|
(target: any) => void |
Handles closing the quick add to cart popup. Hides the quick add to cart option selection popup and returns focus to the select option button for accessibility. Override this method to customize close behavior or add cleanup logic when the popup closes. |
Methods
|
Method |
Modifiers |
Description |
|---|---|---|
|
|
Calculates the new page number based on action. Determines the target page number from pagination actions like 'prev', 'next', or direct page number strings. Ensures page numbers don't go below 1. Override this method to add custom page calculation logic, such as skipping pages or implementing custom pagination behaviors. | |
|
|
Gets the index of a product item within the product list. Searches through all product items in the boost-sd__product-list container to find the index position of the specified target item. This is used for pagination calculations and analytics tracking. Override this method to customize how product indices are determined (e.g., filtering out specific items). | |
|
Routes individual action types to their corresponding event handlers. Central action dispatcher that emits appropriate EVENT_NAMES events based on the action type. This is called by handleMetadataActions and handleActionMapping to process both legacy metadata actions and action mapping system actions. Override this method to intercept specific action types or add custom action handling logic. | ||
|
|
Handles action mapping system for legacy filter tree actions. Maps data-action attributes to their corresponding handler functions stored in the actionMapping state. This legacy system uses attributes in the format "key.id" to look up action handlers. Override this method to customize action mapping lookup logic or add preprocessing for mapped actions. | |
|
Handles clicks outside the limit list dropdown to close it | ||
|
Handles clicks outside the quick add to cart mini popup to close it. Closes any open quick cart selection popup when clicking outside of it, except when clicking the select option button itself. This provides a better user experience by allowing easy dismissal of the popup. Override this method to customize popup closing behavior or add additional close triggers. | ||
|
Handles clicks outside the sort dropdown to close it | ||
|
Handles click events on product items in the product list. This method processes product item clicks, handling special cases like banner links, embedded bundles, volume bundles, and wishlist buttons. For standard product clicks, it constructs the product detail URL with variant information and navigates to it, while also tracking the selected product page for analytics. Override this method to customize product click behavior or add shop-specific tracking. | ||
|
Handles mousedown events on product items to update anchor hrefs to canonical URLs. This ensures that right-click → "Open in new tab" uses the canonical product URL (without collection path) rather than the original href. The | ||
|
Handles clicking on a limit list option Updates the limit, saves to local storage, and resets filter to apply new limit | ||
|
|
Handles metadata actions from data-metadata attributes. Routes legacy metadata actions from DOM elements to appropriate event handlers. This supports the legacy filter tree system where elements have data-metadata attributes containing action configuration objects. Each action type triggers a corresponding EVENT_NAMES event. Override this method to add custom action types or modify action routing logic. | |
|
Handles pagination click events Determines the new page based on the clicked element and triggers pagination action | ||
|
Handles sort dropdown interaction and state changes. Manages the sort dropdown UI state and processes sort option selection. Handles opening/closing the dropdown, selecting sort options, and triggering filter resets when sort changes. Override this method to customize sort behavior or add validation logic for specific sort options. | ||
|
Handles toggling the limit list dropdown Manages show/hide state and triggers UI update | ||
|
Handles clicking on a view-as icon (grid/list view toggle) Updates the viewAs setting and triggers filter refresh | ||
|
Tracks the selected product page for analytics and session storage. Calculates and stores the actual page number where a product was selected, accounting for different pagination types (default, load_more, infinite_scroll). This information is used for maintaining user context when returning from product detail pages. Override this method to customize page tracking logic or add additional analytics tracking. | ||
|
Updates the limit list dropdown UI based on current state This should be called when LIMIT_LIST_CHANGED event is emitted | ||
|
Updates the sort dropdown UI based on current state This should be called when SORT_CHANGED event is emitted |