Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Elements
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Elements

Filters

The <salla-filters> web component is used to filter data in a variety of ways, such as by text, by date, or by number. They can also be used to filter data based on the user's input. They are easy to use and can be customized to meet the specific needs of the Theme.

Example#

Filters image

Alert
It is important to ensure adding the filters component in the Twilight.json file, for the component to work when calling the <salla-filters> web component. Skipping this step could lead to the component's inability to work.

Usage#

HTML
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
Filters--Lists down the filter valuesFilter[]undefined

Events#

EventDescriptionType
changedThis event will be fired when the selected filter changes in its valueCustomEvent<any>

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as getFilters which gets the data for filtering.
MethodDescriptionReturn Type
applyFilters()Applies a filter to a view.Promise<void>
getFilters()Gets the data that is available for filtering.Promise<object>
resetFilters()Resets the selected filter to its default state.Promise<void>
Previous
Count Down
Next
Infinite Scroll