Filters ​
General ​
This addon includes several prebuilt but easily modifiable filters. Each filter is a Livewire component that can be placed anywhere on your page. They are minimally styled using TailwindCSS. To avoid conflicts with other Livewire components, all components in this addon are prefixed with lf-
.
Properties ​
To function properly, each filter requires a few properties:
- blueprint: Specify the collection and the blueprint containing the field in the format
collection.blueprint
. For instance, if you have a collection with the handlepages
and a blueprint with the handlepage
, set the property asblueprint="pages.page"
. - field: The handle of the field you wish to filter by. For example,
field="title"
. - condition: The condition for filtering. For instance
condition="contains"
. A comprehensive list of conditions can be found in Statamic's documentation. Usecondition="taxonomy"
for filtering by a taxonomy, andcondition="query_scope"
for filtering entries using a query scope.
Double check your conditions!
If your conditions are not applicable, it may result in unexpected behavior. While the addon is designed to alert you to obvious errors, such as incorrect field handles, it's crucial to be aware that using unsuitable conditions for a field or making typographical errors can lead to misleading outcomes. In such cases, the addon might appear to function correctly, but the results and filters could be incorrect or inconsistent.
Additional Properties for Specific Filters ​
- Taxonomy filters: These can utilize the
modifier
property to set the relationship asany
,all
, ornot
. - Query scope filters: You need to use the
modifier
property to set the query scope to use. - Range Filter: This filter uses the
max
andmin
properties to define the range of available values. - Dual Range Filter: This filter supports the
min
andmax
properties as well as thestep
property that sets the step between values as well as aminRange
property that sets the minimum range between min and max. Thecondition
is not needed here as it's predefined but you can pass it along as amodifier
. - Toggle Filter: This filter needs a
preset_value
variable that sets the value to apply and alabel
filter that is the text for the toggle field label.
Sorting filter values ​
You can sort the values of taxonomy
, select
, radio
, and checkbox
filters. This is especially useful for taxonomy terms, as Statamic doesn't offer a way to order them, while the options for the other filters can be ordered in the Blueprint editor.
To sort the values, use the sort
property as you would in a collection tag, separating the attribute to sort by and the direction with a colon (:
). For example:
{{ livewire:lf-radio-filter
blueprint="rooms.room"
field="rooms_amenities"
condition="taxonomy"
sort="slug:desc"
}}
The available options for sorting are as follows:
key
orslug
will sort by the array key or the term slug, respectively.label
ortitle
will sort by the array label or the term title field, respectively.- For taxonomies, you can use any field from its blueprint to sort. For example,
sort="order:asc"
will sort the options by anorder
field. This allows you to create a custom order for your taxonomy terms or sort them by any additional value.