Skip to main content
The <ws-filter-toggle> component provides a toggle switch that switches a filter between the modes Include (eq – show products with the selected values) and Exclude (neq – exclude products with the selected values). The component automatically links to the matching <ws-filter> via the name attribute.

​
Requirement

  • A <ws-filter> with the same name attribute must be present.
  • JavaScript bundle ws-search-component-<version-number>.js from version 1.9.1.

​
Component

The component can be embedded as follows on the category and search result page:
  • Attributes
    • name: Filter name; must match the name attribute of the associated <ws-filter>.
    • label-on: Label text when the switch is ON. Default: Include
    • label-off: Label text when the switch is OFF. Default: Exclude
    • default-checked: Initial state of the switch; true = switch ON. Default: true
    • invert: Inverts the logic of the switch. Default: false
      • false: Switch ON = Include (eq), Switch OFF = Exclude (neq)
      • true: Switch ON = Exclude (neq), Switch OFF = Include (eq)
    • container-class: CSS class for the container.
    • switch-class: CSS class for the switch.
    • label-class: CSS class for the label.
Toggling the switch resets the selected options of the associated filter.

​
CSS & styling

Styling is done via the container-class, switch-class, and label-class attributes, which let you assign your own CSS classes (e.g. Bootstrap classes as in the example) to the generated elements.