UseProductGroupFilters hook

const productGroupFilters = useProductGroupFilters();

When a content element add-on is located on a product group page, it may need to access data about the filters available for filtering products on that page.

The useProductGroupFilters hook provides information about product group filters for content elements. This hook returns an object with filter data or null if it�s not being used on a product group page.

The data contains following properties:

Property	Type	Description
filters	Array<Filter>	Collection of all filters.
selectedFilters	Array<SelectedFilter>	Collection of selected filters.
multiSelect	boolean	Indicates whether the filter multi-selection is enabled.
applyFiltersSelection	(selectedFilters: Array<FilterSelection>) => void	A function to apply selected filters.

The Filter type contains the following properties:

Property	Type	Description
id	string	The filter unique identifier.
title	string | null	The filter title.
values	Array<FilterValue>	Collection of filter values.

The FilterValue type contains the following properties:

Property	Type	Description
value	string	The original filter item value which wasn`t translated and processed.
title	string	The filter item title.
strippedTitle	string	The filter item title without HTML markup.
selected	boolean	Indicates whether the value selected for filtering.

The SelectedFilter type contains the following properties:

Property	Type	Description
id	string	The filter unique identifier.
values	Array<SelectedFilterValue>	Collection of selected filter values.

The SelectedFilterValue type contains the following properties:

Property	Type	Description
value	string	The original filter item value which wasn`t translated and processed.
title	string	The filter item title.
strippedTitle	string	The filter item title without HTML markup.

The FilterSelection type contains the following properties:

Property	Type	Description
id	string	The filter unique identifier.
values	Array<string>	Collection of selected filter values.

Example

const productGroupFilters = useProductGroupFilters();
if (!productGroupFilters)
  return null;

const { 
  filters,
  selectedFilters,
  multiSelect,
  applyFiltersSelection,
} = productGroupFilters;