Home > widget-integration > FilterRender
FilterRender class
Rendering service for filter widget UI components.
Manages all DOM rendering operations for the filter widget, including filter options, refine-by tags, view more buttons, collection headers, and mobile/desktop layouts. Coordinates with FilterStore for state management and FilterHelper for utilities.
Signature:
export declare class FilterRender
Remarks
This service handles complex rendering logic including: - Filter option rendering (list, box, swatch, rating, multi-level) - Dynamic "View More" state management - Mobile vs desktop layout differences - Collapse/expand state persistence - Filter tree lazy loading - Collection header rendering
Technical Support teams can extend this service to customize rendering behavior, add shop-specific UI elements, or modify filter display logic.
Example 1
Extend to customize filter option rendering:
window.boostWidgetIntegration.extend('FilterRender', (FilterRender) => {
return class CustomFilterRender extends FilterRender {
async renderOptionList(params) {
// Add custom badge to filter options
await super.renderOptionList(params);
const container = params.dom.querySelector('.boost-sd__filter-option-list');
if (container) {
container.insertAdjacentHTML('afterbegin', '<div class="custom-badge">New</div>');
}
}
};
});
Example 2
Override collection header rendering:
window.boostWidgetIntegration.extend('FilterRender', (FilterRender) => {
return class extends FilterRender {
async renderCollectionHeader() {
await super.renderCollectionHeader();
// Add custom collection description
const header = document.querySelector('#boost-sd__collection-header');
if (header) {
header.insertAdjacentHTML('beforeend', this.getCustomDescription());
}
}
};
});
Constructors
|
Constructor |
Modifiers |
Description |
|---|---|---|
|
Creates a new FilterRender instance. |
Properties
|
Property |
Modifiers |
Type |
Description |
|---|---|---|---|
|
|
string |
Horizontal offset applied to noUi handles in RTL mode. | |
|
|
Map<string, () => void> |
Tracks drag-listener cleanup functions per filter option. Keyed by filterOptionId (stable across DOM swaps) so that document-level mouseup/touchend listeners are always removed before re-registering, even when the slider Element itself is replaced by lazyLoadFilterTree. |
Methods
|
Method |
Modifiers |
Description |
|---|---|---|
|
Adds selected class to filter box option | ||
|
Adds selected class to filter list option | ||
|
Adds selected class to filter option based on display type | ||
|
Adds selected class to swatch filter option | ||
|
|
Adds a filter option to the selected filters (multiple selection) Appends to existing filters and updates URL with new value | |
|
addRangeValueToFilterTree(filterTree, option, action, horizontalHasApplyButton) |
|
Adds range value to filter tree |
|
Applies filter option changes Handles scrolling, closing horizontal options, and resetting filter state | ||
|
|
Applies a CSS translate transform to a handle's parent origin element. | |
|
|
Applies parallax effect to collection header image Migrated from collection-header/parallax.js | |
|
|
Applies a validated slider value: updates state, syncs DOM, persists to store, and commits the filter tree change. Called by keyboard and blur interactions. Protected to allow override in shop-specific integrations. | |
|
|
Attaches a blur handler that validates the typed value and calls applySliderValue when the committed value differs from the current slider state. Uses blur (not change) so it only fires on actual user interaction. | |
|
|
Attaches keyboard arrow-key navigation to a slider handle. Moves the handle by sliderStep on ArrowLeft/ArrowRight, debounced to 500 ms. | |
|
Navigates back in mobile filter tree Resets mobile filter state to show all filter options | ||
|
|
Binds search event for filter option | |
|
|
Binds toolbar for mobile filter style Updates title and clear button | |
|
Sets the Updates both desktop and mobile DOM containers for a filter option with the | ||
|
|
Builds background color from label (extracts last segment after hyphen) | |
|
Sets Attaches collapse/expand metadata to the toggle button and its SVG child elements for both desktop and mobile layouts, enabling event delegation. | ||
|
|
Collects all DOM references and computed settings into a single context object. Returns null if the slider DOM node is not present in the container. | |
|
|
Builds swatch settings from filter settings | |
|
|
Builds a URL with a localization prefix when necessary. Detects a 2-letter ISO locale code (e.g., | |
|
Clears all active filters and resets the filter state. Removes all selected filters from state, clears all URL query parameters, emits | ||
|
|
Clears selected filter UI immediately, including the active mobile panel. | |
|
Clears one or more filters from the active filter state Removes filters from the filter tree, updates URL, and triggers API call if needed | ||
|
|
Clears refine-by containers that otherwise retain old labels until AJAX render completes. | |
|
clearResetFilterOptionDomState(keys, removedFilters, remainingFilters, target) |
|
Clears selected UI for one mobile filter option before AJAX results return. |
|
Closes all horizontally opened filter options Updates collapse state to close any open options | ||
|
Closes mobile filter tree | ||
|
|
Commits a resolved filter tree to the store, emits FILTER_RESET for vertical layouts, and dispatches the range-slider-change analytics event. | |
|
|
Returns the CSS translate-X percent that positions a handle at the given value. | |
|
Creates a clear or clear-all button element for the mobile filter toolbar. Generates a | ||
|
|
Creates the three drag event handlers (pointerdown, pointermove, pointerup equivalents). Drag state is shared between the handlers through closure variables. | |
|
|
Determines the appropriate scroll target based on layout and sticky settings Returns scroll options for the current filter configuration | |
|
|
Dispatches a | |
|
|
Dispatches analytics event for collection view | |
|
Expands or collapses multi-level filter options Manages state persistence for multi-level filter option expansion | ||
|
Fills filter tree with complete data from available options Enriches selected filters with missing display values and metadata | ||
|
|
Formats from-to key for price/percent filters | |
|
Formats currency symbols for range slider unit elements. This method is public to allow FilterController to delegate currency formatting. | ||
|
|
Formats number with thousand separator (delimiter from sliderDelimiter) | |
|
Generates filter data object for range filters | ||
|
| ||
|
| ||
|
|
Returns DOM roots that can contain selected filter state during mobile fullscreen mode. | |
|
|
Gets collection data for header Migrated from collection-header/index.js | |
|
|
Gets toggled state for closing a filter option Helper method for closeFilterOptionHorizontalOpening | |
|
Returns a slice of option values up to the given size limit. | ||
|
Gets the number of items to show before the "View More" button. Returns the configured threshold for the view more button, which may be customized globally via | ||
|
Returns a lookup map of currently selected filter value keys. Builds a | ||
|
Applies a single collapse action to the filter tree DOM. Adds or removes CSS classes on the target elements specified in the action object, scoped to the current filter tree parent element. | ||
|
Applies the current collapse state to all filter option DOM elements. Iterates over stored | ||
|
Main handler for collection option clicks. Routes collection filter selections to the appropriate handler based on current page context. On collection pages, redirects to the selected collection. On search pages, updates filters to show products from the selected collection. | ||
|
|
Handles the actual filling of filter tree with option data | |
|
Handles responsive behavior for filter tree Manages display switching between mobile and desktop layouts | ||
|
Handles showing results for off-canvas filter Closes the off-canvas filter when clicking result button, close button, or overlay | ||
|
|
Toggles classes on target elements Used for expand/collapse functionality | |
|
| ||
|
Initializes collapse/expand state for all active filter options. Computes and sets the initial | ||
|
|
Sets initial handle transforms and z-indexes from persisted slider state. | |
|
initSliderOption(option, filterTree, inputLower, inputUpper) |
|
Initializes slider option from filter tree state |
|
|
Checks if the current page is a collection page. | |
|
|
Checks if display type is supported | |
|
Checks if the option uses "view more" pagination. | ||
|
|
Keeps state for multiple level option items | |
|
Lazy loads the filter tree to improve initial page load performance. Implements progressive rendering by initially loading a limited number of filter options (LIMIT_FIRST_LOAD), then rendering remaining options asynchronously. This prevents blocking the main thread during filter initialization. | ||
|
Manages view more state and rendering for filter options. Controls the "View More" / "View Less" functionality that shows/hides additional filter values when there are many options. Updates state and re-renders the affected filter option with the appropriate number of values displayed. | ||
|
|
Normalizes a numeric slider value with proper snapping to sliderStep. Protected to allow override in shop-specific integrations. | |
|
Handles filter option list selection/deselection. Main handler for list-style filter option clicks. Manages both single-select and multi-select filter types, updating state, URL parameters, and triggering API calls to refresh product results. | ||
|
|
Persists the current sliderOption into the rangeFilter store entry. | |
|
reCalcWidthFilterOptionHorizontal(filterTreeHorizontalStyle, filterLayout) |
|
Recalculates width for horizontal filter options Adapts position left or right based on viewport |
|
|
Redirects to collection page (for collection page context) | |
|
Removes the filter option DOM element when it has no values. Removes both desktop and mobile DOM nodes for a filter option when its | ||
|
Removes selected class from filter box option | ||
|
Removes selected class from filter list option | ||
|
Removes selected class from filter option based on display type | ||
|
Removes selected class from swatch filter option | ||
|
|
Removes range value from filter tree | |
|
Renders the collection header with title, description, and metadata. Dynamically generates the collection header HTML including the collection name, description, image, and product count. Handles both collection pages and collection-filtered search results. | ||
|
|
Renders filter option based on display type | |
|
Renders a complete filter option with all its values and controls. Main rendering method that orchestrates the display of a single filter option, including its title, values, search box (if enabled), and view more controls. Routes to specialized rendering methods based on display type. | ||
|
|
Sets up lazy loading for filter option | |
|
|
Main rendering logic for list options | |
|
|
Main rendering logic for multi-level collection | |
|
|
Main rendering logic for multi-level tag | |
|
Unified renderOptionBox with lazy loading and full render support | ||
|
Renders filter option values using the box/grid template. Generates HTML for box-style filter options displayed in a grid layout. Commonly used for visual filters like size or style options. | ||
|
Unified renderOptionList with lazy loading and full render support | ||
|
Renders filter option values using the list template. Generates HTML for list-style filter options with checkboxes and labels. Supports document count display and selected state management. | ||
|
Renders multi-level collection filter with hierarchical structure. Generates HTML for nested collection filters that support parent-child relationships. Includes expand/collapse controls for subcollections. | ||
|
Renders multi-level tag filter with hierarchical structure. Generates HTML for nested tag filters supporting parent-child relationships. Similar to multi-level collections but for product tags. | ||
|
Renders range slider for price/rating filters. Orchestrates DOM initialization, keyboard/blur/drag interaction wiring, and listener cleanup for the custom range slider widget. | ||
|
Renders rating filter options with star displays. Generates HTML for review rating filters, showing star icons and product counts for each rating level. Commonly used with review integration services. | ||
|
Unified renderOptionSwatch with lazy loading and full render support | ||
|
Renders filter option values using the swatch template. Generates HTML for color/image swatch filter options. Supports different swatch shapes (circle/square) and layout types (grid/list). | ||
|
|
Unified option rendering logic Handles list, box, and swatch display types | |
|
|
Main rendering logic for rating options | |
|
Renders the "Refine By" section showing active filter selections. Displays all currently selected filters as removable tags, allowing users to see and clear their active selections. Includes a "Clear All" button when multiple filters are selected. | ||
|
|
Renders "Refine By" section for horizontal layout | |
|
|
Renders "Refine By" section for mobile layout | |
|
|
Renders "Refine By" section for vertical layout | |
|
Renders selected options in the filter tree UI Adds selected class to their DOM elements | ||
|
|
Renders single swatch value with background color/image | |
|
|
Main rendering logic for swatch options | |
|
Renders the updated filter option values when view more is toggled. Retrieves the current view more state, determines which values to display (limited or all), and re-renders the filter option using the appropriate template (list, box, or swatch). | ||
|
|
Replaces prefix value based on option settings | |
|
Resets a specific filter option Removes the filter from state, updates URL params, and triggers API refresh | ||
|
|
Sanitizes sliderStep/sliderRange inputs, applying NaN fallbacks and the max-step cap. | |
|
| ||
|
|
Handles collection filter in search page context | |
|
|
Elevates the active handle to z-index 5 and lowers the inactive one to 4. | |
|
| ||
|
|
Replaces filter option selection (single selection) Removes existing values for the key and sets new value | |
|
|
Sets up lazy loading for multi-level collection | |
|
|
Sets up lazy loading for multi-level tag | |
|
|
Sets up lazy loading for option box | |
|
|
Sets up lazy loading for list options | |
|
|
Sets up lazy loading for rating options | |
|
|
Sets up lazy loading for swatch options | |
|
| ||
|
| ||
|
Shows or hides the search box for a filter option based on platform settings. Removes the search input DOM node for desktop when | ||
|
Shows/toggles mobile filter tree Handles display toggle, scroll lock, and lazy loading | ||
|
|
Writes a value to a text input with delimiter formatting; no-ops safely when the input is null. | |
|
Toggles aria-expanded attribute on an element | ||
|
Toggles desktop filter tree button visibility and state Handles horizontal, vertical expand, and vertical off-canvas layouts | ||
|
|
Toggles filter tree icon active state Updates tabindex for accessibility when filter button is clicked | |
|
|
Toggles hidden class on filter option item wrappers | |
|
Updates only the product count inside the collection header. Used after sort/filter changes to avoid full re-render flicker. | ||
|
|
Updates value display from swatch settings Replaces raw values with configured swatch text | |
|
Filters XSS-unsafe values from option values up to the given size. Iterates option values and excludes any whose label, displayName, or key contains potentially malicious content as detected by |