Skip to main content

CollapsibleFilters widget

Widget renders most common filters within collapsible blocks.

stylefilter.addWidget(
  stylefilter.widgets.CollapsibleFilters({
    container: '#sidebar-filter',
  })
);

Option parameters​

filters​

Specify the list of filters you need on the page.

stylefilter.addWidget(
  stylefilter.widgets.CollapsibleFilters({
    container: '#sidebar-filter',
    filters: ['categories', 'presets', 'occasions', 'style', 'patterns', 'colors', 'brand', 'price'],
  })
);

filtersOpenByDefault​

List of filters which collapsibles will be open by default

default ['style']

stylefilter.addWidget(
  stylefilter.widgets.CollapsibleFilters({
    container: '#sidebar-filter',
    filters: ['categories', 'presets', 'occasions', 'style', 'patterns', 'colors', 'brand', 'price'],
    filtersOpenByDefault: ['style'],
  })
);

isOpenInitialy​

Whether whole filter opened or closed on page load for mobile devices.

default false

headerClearAllText​

Sets a message for "Clear all" button in the header

default 'Clear all'

styleFilterActionLabel​

Sets a message for "Clear" button that located above Mannequin Filter mannequin

default 'Clear'

showResultButtonLeft​

Left side of the "Show results" button. Before the number of found products.

default 'Show results'

showResultButtonRight​

Right side of the "Show results" button. After the number of found products.

default '' - empty string

title​

Main title in the header.

default 'Filters'

onRendered callback​

Invoked after widget rendering is finished.

onCloseClick callback​

Invoked when close click is clicked on mobile devices.

onApplyClick callback​

Invoked when "Apply filter" button is clicked.

onOpened callback​

Invoked when filter gets opened on mobile devices.

onClosed callback​

Invoked when filter gets closed on mobile devices.