Home > widget-integration > FilterHelper
FilterHelper class
Central helper service providing utility functions for the filter module.
This service acts as a unified facade for filter-related operations, delegating to specialized helper services (URL, Format, Storage, Validation) while also providing core utilities for JSON parsing, debouncing, event management, template handling, and product URL construction. It can be extended by Technical Support teams to customize filter behaviors, add shop-specific logic, or override default implementations.
Signature:
export declare class FilterHelper
Remarks
Key responsibilities: - Event management system (on, off, emit) for filter state changes - Template resolution and customization - Product URL construction with collection/variant handling - Delegation to specialized helpers (URL, Format, Storage, Validation) - Utility functions (debounce, JSON parsing, equality checks, sorting) - Session/localStorage management - Handler wrapper system for customization hooks
The FilterHelper provides a convenient single point of access for most filter operations while maintaining separation of concerns through specialized helpers.
Example
Extend to customize URL building logic:
window.boostWidgetIntegration.extend('FilterHelper', (FilterHelper) => {
return class CustomFilterHelper extends FilterHelper {
buildProductDetailUrl(handle, hasCollection, currentTags) {
// Add custom tracking parameter to all product URLs
const baseUrl = super.buildProductDetailUrl(handle, hasCollection, currentTags);
return baseUrl + '?utm_source=filter';
}
};
});
Constructors
|
Constructor |
Modifiers |
Description |
|---|---|---|
|
Constructs a new instance of the |
Properties
|
Property |
Modifiers |
Type |
Description |
|---|---|---|---|
|
(isShortenUrlParam?: boolean) => boolean | |||
|
<T extends Record<string, unknown>>(obj: T) => { [K in keyof T]: Primitive | T[K]; } |
Normalizes object values by attempting to coerce string values into proper primitive types using | ||
|
<T>(value: T) => T | Primitive |
Converts string literals to their proper primitive types when possible. - "true"/"false" => boolean - "null" => null - "undefined" => undefined - numeric strings (strict decimal format) => number - otherwise returns original value |
Methods
|
Method |
Modifiers |
Description |
|---|---|---|
|
Adds B2B parameters to query params if B2B is enabled | ||
|
Adds locale parameter to query params if available | ||
|
Appends a value to a query parameter in the URL Used for multiple selection filters to add new values without replacing existing ones | ||
|
Builds a product detail URL with optional collection context. Constructs the product detail page URL, optionally including collection context in the path for better navigation and SEO. Handles locale prefixes, collection handles, and tag-based URLs. This is a key extensibility point for customizing product navigation behavior. Override to implement shop-specific URL structures, add tracking parameters, or modify collection context logic. | ||
|
buildProductDetailUrlWithVariant(product, hasCollection, currentTags, variantId) |
Builds a product detail URL with variant parameter. Constructs a complete product URL including the variant query parameter when needed. Automatically appends ?variant={id} for split products or when a specific variant ID is provided. This ensures the correct variant is selected when the customer lands on the product page. Override to customize variant parameter handling or add additional query parameters. | |
|
Builds a URLSearchParams object from filter API parameters | ||
|
|
Converts stock status values for API requests. Transforms stock status filter values into boolean format for the API. Converts 'out-of-stock' to false and all other values to true. Handles both single values and arrays. Override this method to customize stock status conversion logic for shop-specific requirements. | |
|
Wraps a callback function to handle customization logic. Checks if custom handler functions are defined for the callback name and block type, and wraps the original callback to call them before/after. Allows overriding default handlers or injecting logic before/after calls. | ||
|
Creates a debounced version of a function that delays execution until after a specified time. Useful for optimizing performance by delaying expensive operations (like API calls or DOM updates) until after rapid consecutive calls have finished. The timer resets on each new invocation. Override this method to customize debounce behavior or add logging for debugging. | ||
|
Deletes a query parameter from the URL and updates browser history Handles both shortened and full parameter names, sessionStorage cleanup, and URL schemes | ||
|
Detects device type by width (mobile and/or tablet portrait) | ||
|
Flattens nested tag structure into a flat object mapping tag to displayName | ||
|
Formats a currency value according to shop settings | ||
|
Formats money value according to specified format options | ||
|
Generates a cache key from query parameters | ||
|
Generates a unique ID | ||
|
Gets the mobile breakpoint from TAE configuration. Used for detecting strictly mobile devices (phones). | ||
|
Gets the tablet portrait max breakpoint from TAE configuration. Used as the default breakpoint for | ||
|
Gets collection ID by handle key | ||
|
Gets collection tag from slug key | ||
|
Gets customer ID from window object | ||
|
Gets a value from localStorage | ||
|
Parses URL search parameters and extracts filter params, sort, and pagination Handles both shortened and full parameter formats | ||
|
Gets session ID for tracking | ||
|
Gets a specific template by key with customization support. Retrieves templates for rendering filter UI components, checking for customized versions in | ||
|
Fetches templates from API with caching support. Retrieves templates by their IDs from the template API, with automatic localStorage caching for performance. Checks cache first before making API calls. This method is useful for dynamically loading templates that aren't included in the initial app configuration. | ||
|
Checks if multi-variant price should be displayed based on translation template | ||
|
Checks if a node has nested children (tags or subTags) | ||
|
Checks if current page is a search within collection page | ||
|
Checks if device is mobile based on breakpoint. Default breakpoint is | ||
|
|
Checks if current page is a generic page type (not product/collection). Determines whether the current URL is a Shopify page (e.g., About, FAQ) by checking for '/pages/' in the path. This affects URL construction logic. Override this method to customize page type detection for shop-specific structures. | |
|
Checks if price transformation has already been applied to element | ||
|
isSamePrice(priceMin, priceMax, compareAtPriceMin, compareAtPriceMax) |
Checks if product has same min and max prices | |
|
Checks if current page is a search page | ||
|
|
Checks if current page is a tag page. Determines whether the current page is displaying tagged products by checking for '/tagged/' in the URL path or the presence of currentTags array. This affects how product URLs are constructed. Override this method to customize tag page detection logic for shop-specific URL structures. | |
|
Validates if HTML contains actual price data (has digits) | ||
|
Checks if current page is a vendor page | ||
|
Parses filter tree to flat parameters object - delegates to service | ||
|
Extracts and processes HTML response | ||
|
Removes a specific value from a query parameter in the URL This is different from deleteQueryParamHistory which removes the entire parameter | ||
|
Removes specific values from multiple query parameters in the URL Handles both shortened and full parameter names with multiple URL schemes | ||
|
Replaces trailing dot/comma and zeros from number string | ||
|
Rewrites the URL with new filter parameters, sort, and pagination Clears existing filter params and sets new ones based on provided data | ||
|
Safely parses JSON string with optional type guard validation. Provides safe JSON parsing that catches exceptions and returns null on failure. Supports optional type guard function for runtime type validation. This is essential for parsing user-provided data, metadata attributes, and API responses. Override this method to add logging, custom error handling, or preprocessing of JSON strings. | ||
|
Saves collection ID by handle to session storage | ||
|
Saves collection tags to session storage | ||
|
Sets a value in localStorage | ||
|
Sets the pagination page in session storage | ||
|
Sets a query parameter in the URL and updates browser history Supports multiple URL schemes and shortened parameter names | ||
|
Slugifies a text string for URL usage Delegates to FilterValidationHelper | ||
|
Sorts an array by a specified key Handles numeric (for numbers) and string values with lexical comparison (for strings, including numeric-looking strings) Mixed number/string: attempts numeric if string is numeric, else lexical | ||
|
Sorts data by a specified key Works with both arrays and objects | ||
|
Sorts an object by a specified key in its values | ||
|
Strips HTML tags from string (delegated to validationHelper for consistency) | ||
|
Converts string to range value object Handles colon-separated range strings | ||
|
Converts range value to string representation Handles both object {lower, upper} and primitive values |