Filters

Filter Selection uses dynamic filters returned from the initial Product List response. Subsequent filter selections are applied to the initial set of filters rather than limiting the user to only the filters available after filtering.

Screen

Filter Selection presents the available and selected filters from the Product List state.

The 'Apply Filters' button is sticky presented at the bottom as part of the screen. Tapping it dismisses the screen and applies changes if there are any.

The 'Clear all' button is presented on the navigation bar to allow the user to clear their new selection. This button is disabled unless there are changes.

Preset or Preselect Filters

The Product List is completely powered by filters. When the Product List is opened for a search query, an initial search filter is added to the initial state. Similarly, when the Product List is opened for a category, an initial category filter is added. Initial filters are not exposed to the Filter Selection screen but are instead applied directly to requests.

If you want to preselect filters you can set the initial selected filters. These must be returned by the initial response otherwise may not work properly.

Filter Types

Filters are presented as cells within a main table view. They are sent to the backend as query parameters with their id key and their value.

The SDK supports the following core filter types and views to present them.

List Filters

List filters are presented as a link and are selected on a separate screen. Filter Selection handles this navigation using the SDK Selection screen with multi-selection.

When the user selects and saves the options they are shown in pills / chips on the list filter. These can be tapped to remove a specific option.

A list filter value is sent as a , separated array of its selected option id values.

Price Filters

Price filters are presented using a range slider with two sticks to adjust the min and max values of the range. They are accessible to users, allowing selection and adjustment of the two sticks separately.

Tapping the 'Clear' button resets the price range to it's original state.

Price filters are sent as two query parameters: minPrice and maxPrice with integer values.

Toggle Filters

Toggle filters are presented as a simple toggle control field tinted based on your apps theme.

Toggle filter data is not boolean as expected; it is similar to list filters with two options (for on and off). Their values are sent as their toggled options id.