Twilight
EngineWeb components

salla-filters-widget

One collapsible filter group of the product listing filters (for example brands, a variant, or the price range).

Used inside salla-filters

<salla-filters> renders this component for you. You rarely use it directly.

One collapsible filter group of the product listing filters (for example brands, a variant, or the price range). Used inside salla-filters, which renders one widget per filter option and handles its changed event; a theme rarely places it directly.

What it renders depends on option.type: values gives checkboxes, minimum and variants give radio buttons, and range gives a salla-price-range. A filter with the key rating shows stars. A search box appears when the option has more than 5 values, and a show more link when it has more than 10 values (never for the price key). Clicking the title collapses or expands the group.

Use it

In HTML or JSX, use the tag <salla-filters-widget> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaFiltersWidget } from '@salla.sa/twilight-components-react/filters-widget';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Example

import { SallaFiltersWidget } from '@salla.sa/twilight-components-react/filters-widget';

export function Example() {
  return (
    <SallaFiltersWidget
      option={{ key: 'brand_id', label: 'Brands', type: 'values', values: [{ key: '1', value: 'Nike', count: 12 }] }}
      filtersData={{}}
      onChanged={e => console.log(e.detail.value)}
    />
  );
}

Properties

PropertyAttributeDescriptionTypeDefault
filtersDatafilters-dataThe currently selected filters, used to check the matching inputs. Keyed by option.key: an array of values for values filters, a single value for minimum filters, { min, max } for a range filter, and variants[option.key] for variants filters.object
optionoptionThe filter to show: { key, label, type, values }. type is one of values, minimum, variants or range. Each value is { key, value, count } (the label is value, count is optional), or a plain number for the rating filter. Range filters use { from, to, count } values instead.Filter
withLoadMorewith-load-moreWhether the show more link is displayed. The component sets this itself when it connects (and again after its first render), based on the number of values, so a value you pass is overwritten.boolean

Events

Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).

EventDescriptionDetail
changedFires when the user selects or clears an option. For values, minimum and variants filters event.detail is { event, option, value }, where event is the native input event, option is the filter and value is the option's key (or value). For range filters it is the detail of the salla-price-range event, with value as { min, max }.any

Methods

Call these on the element or a React ref.

reset() => Promise<void>

Clears the selection: unchecks every input inside the widget and resets the price range for range filters. It does not emit changed. Resolves with no value.

setWidgetHeight(delay?: number) => Promise<void>

Sets the height of the widget content to its current content height, allowing for smooth transitions. This function is often used in scenarios where the widget's content changes dynamically, and animating the height adjustment is desired for a smoother user experience.

ParameterTypeDescription
delaynumberOptional. The delay (in milliseconds) before updating the widget height. Defaults to 250 milliseconds.
// Set widget height with the default delay (250 milliseconds)
await setWidgetHeight();

// Set widget height with a custom delay (e.g., 500 milliseconds)
await setWidgetHeight(500);

showMore() => Promise<void>

Toggles between the short list (10 items) and the expanded list (15 items, scrollable beyond that). Resolves with no value.

toggleWidget() => Promise<void>

Expands or collapses the whole filter group, the same as clicking its title. Resolves with no value.

Slots

SlotDescription
(default)Extra content shown at the top of the values area, before the filter options.

Renders: <salla-rating-stars>, <salla-price-range>.

Used inside: <salla-filters>.

On this page

Use itExamplePropertiesEventsMethodsreset() => Promise<void>setWidgetHeight(delay?: number) => Promise<void>showMore() => Promise<void>toggleWidget() => Promise<void>SlotsRelated