Home > widget-integration > FilterUrlHelper > appendQueryParamHistory

FilterUrlHelper.appendQueryParamHistory() method

Appends a value to a query parameter in the URL.

Used for multiple selection filters to add new values without replacing existing ones. This is different from setQueryParamHistory which replaces all values.

Signature:

appendQueryParamHistory(key: string, value: 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

The single value to append. Must be a string.

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

For URL scheme 2, checks sessionStorage for existing values and appends the new value to the list, preventing duplicates. For other schemes, uses standard URLSearchParams.append().

Example 1

Append a brand to existing selection:

// Current URL: ?pf_brand=Nike
this.urlHelper.appendQueryParamHistory('pf_brand', 'Adidas');
// URL becomes: ?pf_brand=Nike&pf_brand=Adidas (scheme 0/1)
// or: ?pf_brand=Nike,Adidas (scheme 2)

Example 2

Extend to limit number of values:

window.boostWidgetIntegration.extend('FilterUrlHelper', (FilterUrlHelper) => {
  return class extends FilterUrlHelper {
    appendQueryParamHistory(key, value, replace, options) {
      const params = this.getParamsHistory();
      const existing = params.paramList.find(p => p.key === key);
      if (existing && existing.values.length >= 10) {
        console.warn('Maximum 10 values allowed');
        return;
      }
      super.appendQueryParamHistory(key, value, replace, options);
    }
  };
});