Visitors' search and filters of loop grids.
A loop keeps its state in the query string of the page, under its key (its CSS ID, or its node id): page, text search, order and one entry per filtered field.
?catalog[q]=boots&catalog[category][]=Shoes&catalog[price][min]=20000&catalog[sort]=-price&catalog[page]=2| Param | Filter |
|---|---|
key[page] | the page (see the pagination of ElementorexCms.Blocks.Loop) |
key[q] | text in any searchable field (ElementorexCms.Source.searchable/1) |
key[sort] | field (ascending) or -field (descending), a sortable field |
key[field]=value | the field is the value |
key[field][]=a&key[field][]=b | the field is any of them |
key[field][min], key[field][max], key[field]=min..max | a range |
key[filter]=value | a filter of the source with logic of its own (custom: true) |
Only fields the source marks filterable (and sortable, to order) are
used, and values are cast to the type of the field, so the query string can
never reach other columns. Empty values are ignored. The loop's own query
(its filters, the scope of the source) always applies too.
The Filters block (ElementorexCms.Blocks.Filters) is a form with these
params: its fields (search, choices, range, toggle, sort) are blocks too,
and so can yours be. Inside a filter form, a block reads its form with
name/2, value/2, checked?/3 and options/2, imported in every block:
<input type="checkbox" name={filter_name(assigns, [@field, ""])} value="red"
checked={filter_checked?(assigns, @field, "red")} />Without JavaScript the form reloads the page; with the runtime of the site
(ElementorexRuntime / initElementorex()) the loop is filtered in place.
Summary
Functions
Whether the visitor filtered (or searched) the loop.
The query of a loop with the visitor's state applied: its filters, search
and order, validated against the fields of source.
Whether option is the value (or one of the values) of an entry.
The field key of the form's source, or nil.
What the fields of a filter form get in ctx.form: the loop's key, its
state, its source and its node id.
The params of the other loops of the page as hidden inputs ({name, value}),
so a filter form of one loop keeps the state of the others.
A query string ("?catalog[page]=2") for the loop with key: changes are
put in its state (nil removes an entry; :reset clears it). The state of
the other loops of the page is kept; other params are not.
The key of a loop in the query string: its CSS ID, or its node id.
The choices for the target of a filter form in the editor: [{label, node_id}].
The loop grids of a document that can be filtered (in no other loop).
The name of an input of the form of a block: name(assigns, "q") is
"catalog[q]", name(assigns, ["category", ""]) is "catalog[category][]"
(several values) and name(assigns, ["price", "min"]) is
"catalog[price][min]". nil outside a filter form.
The options of a field of the form's source: [%{label: text, value: value, count: count | nil}], from ElementorexCms.Source.values/3.
The state of the loop with key in params (a map, empty if none).
The loop grid a filter form filters: the loop with node id target in the
document, or its first one when target is empty. Only loops that are in no
other loop take filters. %{node: loop, key: key, source: source} or nil.
The value the visitor gave to an entry of the form (nil if none).
Functions
Whether the visitor filtered (or searched) the loop.
@spec apply(ElementorexCms.Source.Query.t(), map(), ElementorexCms.Source.t()) :: ElementorexCms.Source.Query.t()
The query of a loop with the visitor's state applied: its filters, search
and order, validated against the fields of source.
Whether option is the value (or one of the values) of an entry.
@spec field(map(), String.t()) :: ElementorexCms.Source.Field.t() | nil
The field key of the form's source, or nil.
What the fields of a filter form get in ctx.form: the loop's key, its
state, its source and its node id.
A query string ("?catalog[page]=2") for the loop with key: changes are
put in its state (nil removes an entry; :reset clears it). The state of
the other loops of the page is kept; other params are not.
The key of a loop in the query string: its CSS ID, or its node id.
@spec loop_choices( map(), ElementorexCms.Registry.t() | nil, ElementorexCms.Sources.t() | nil ) :: [ {String.t(), String.t()} ]
The choices for the target of a filter form in the editor: [{label, node_id}].
@spec loops(map(), ElementorexCms.Registry.t() | nil) :: [map()]
The loop grids of a document that can be filtered (in no other loop).
The name of an input of the form of a block: name(assigns, "q") is
"catalog[q]", name(assigns, ["category", ""]) is "catalog[category][]"
(several values) and name(assigns, ["price", "min"]) is
"catalog[price][min]". nil outside a filter form.
The options of a field of the form's source: [%{label: text, value: value, count: count | nil}], from ElementorexCms.Source.values/3.
The state of the loop with key in params (a map, empty if none).
The loop grid a filter form filters: the loop with node id target in the
document, or its first one when target is empty. Only loops that are in no
other loop take filters. %{node: loop, key: key, source: source} or nil.
The value the visitor gave to an entry of the form (nil if none).