salla-filters

Renders the product filter panel (one salla-filters-widget per filter option) on listing pages. Use it once on a product listing page, as the container for the filter widgets. It keeps the selected filters in the page URL as filters[...] query parameters and tells the rest of the page when they change. Filters normally arrive from the filters::fetched event, so you rarely set filters by hand. The element hides itself (display: none) when the filters::hidden event fires.

Use itCopy Anchor Link

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

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

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.

ExampleCopy Anchor Link

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

export function Example() {
  useEffect(() => {
    document.querySelector('salla-filters').addEventListener('changed', (e) => {
      console.log('selected filters', e.detail);
    });
  }, []);

  return (
    <SallaFilters />
  );
}

PropertiesCopy Anchor Link

EventsCopy Anchor Link

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

MethodsCopy Anchor Link

Call these on the element or a React ref.

applyFilters() => Promise<void>Copy Anchor Link

Writes the selected filters to the page URL as filters[...] query parameters (using history.pushState), then emits the global salla-filters::changed event and the component's changed event. The work runs after a 300ms delay. Does nothing until the component has finished loading.

getFilters() => Promise<any>Copy Anchor Link

Returns the currently selected filters.

Returns Promise<any>: Promise resolving to the selected-filters object, keyed by filter key (empty object when nothing is selected).

removeFilter(chip: any) => Promise<void>Copy Anchor Link

Removes a single applied filter and applies the result. Used by salla-applied-filters to remove one chip.

resetFilters() => Promise<void>Copy Anchor Link

Clears all selected filters and removes the filters[...] query parameters from the URL. Also emits the global salla-filters::reset event and then applies the (now empty) filters.

RelatedCopy Anchor Link

Renders: <salla-filters-widget>.