Home > widget-integration > FilterUrlHelper > setQueryParamHistory
FilterUrlHelper.setQueryParamHistory() method
Sets a query parameter in the URL history.
Handles both shortened and full parameter names with multiple URL schemes. The behavior varies based on the URL scheme configuration.
Signature:
setQueryParamHistory(key: string, value: string | string[], replace?: boolean, options?: {
preventPushHistory?: boolean;
isShortenUrlParam?: boolean;
urlScheme?: number;
}): void;
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
key |
string |
The query parameter key (long form, e.g., 'pf_brand'). Will be automatically mapped to short key if URL shortening is enabled. |
|
value |
string | string[] |
The value(s) to set. Can be a single string or array of strings. Arrays are handled differently based on URL scheme. |
|
replace |
boolean |
(Optional) Whether to replace current history state instead of pushing new state. Default: false (pushes new history entry). |
|
options |
{ preventPushHistory?: boolean; isShortenUrlParam?: boolean; urlScheme?: number; } |
(Optional) Configuration options for history and URL handling |
Returns:
void
Remarks
URL scheme behaviors: - Scheme 0: Uses standard URLSearchParams.set() for single values or multiple append() for arrays - Scheme 1: Always deletes existing parameter then appends all new values - Scheme 2: Combines multiple values with separator, stores full list in sessionStorage
Scheme 2 is recommended for cleaner URLs with many filter values. It reduces URL length by combining values like pf_brand=Nike,Adidas instead of pf_brand=Nike&pf_brand=Adidas.
Example 1
Set a single filter value:
this.urlHelper.setQueryParamHistory('pf_brand', 'Nike');
// URL becomes: ?pf_brand=Nike
Example 2
Set multiple values with scheme 2:
this.urlHelper.setQueryParamHistory('pf_color', ['Red', 'Blue'], false, {
isShortenUrlParam: true,
urlScheme: 2
});
// URL becomes: ?c=Red,Blue (assuming 'c' is short key for pf_color)
// sessionStorage also stores: ['Red', 'Blue']
Example 3
Extend to add validation:
window.boostWidgetIntegration.extend('FilterUrlHelper', (FilterUrlHelper) => {
return class extends FilterUrlHelper {
setQueryParamHistory(key, value, replace, options) {
// Validate filter values before setting
if (key === 'pf_price') {
const valid = this.validatePriceRange(value);
if (!valid) return;
}
super.setQueryParamHistory(key, value, replace, options);
}
};
});