Home > widget-integration > FilterConfig

FilterConfig type

Complete filter configuration using discriminated union based on valueType.

This type ensures type safety when working with different filter value types. Use the valueType property to narrow the type and access the correctly-typed values array.

Signature:

export type FilterConfig = (FilterBase & {
	valueType?: "simple";
	values: SimpleFilterValue[];
}) | (FilterBase & {
	valueType: "collection";
	values: CollectionFilterValue[];
}) | (FilterBase & {
	valueType: "rating";
	values: RatingFilterValue[];
}) | (FilterBase & {
	valueType: "tags";
	values: TagFilterValue[];
}) | (FilterBase & {
	valueType: "range";
	values: RangeFilterValue;
});

References: FilterBase, SimpleFilterValue, CollectionFilterValue, RatingFilterValue, TagFilterValue, RangeFilterValue

Remarks

Technical Support teams can extend filter configurations by checking the valueType and applying shop-specific transformations to the values.

Example 1

Type-safe filter value processing:

function processFilterConfig(config: FilterConfig) {
  if (config.valueType === 'collection') {
    // TypeScript knows config.values is CollectionFilterValue[]
    config.values.forEach(val => console.log(val.handle));
  } else if (config.valueType === 'rating') {
    // TypeScript knows config.values is RatingFilterValue[]
    config.values.forEach(val => console.log(val.from, val.to));
  }
}

Example 2

Extend FilterAPI to customize collection filters:

window.boostWidgetIntegration.extend('FilterAPI', (FilterAPI) => {
  return class extends FilterAPI {
    protected applyFilterSettings(filter) {
      const result = super.applyFilterSettings(filter);
      result.options.forEach(option => {
        if (option.valueType === 'collection') {
          // Add custom logic for collection filters
          option.values = option.values.filter(v => !v.isDisabled);
        }
      });
      return result;
    }
  };
});