Prints the tools for selecting product filter values.

Kuvaus

The tag is available starting from the Basic plan.

Also read the detailed instructions for implementing product list filters in the theme.

By default, the tag prints a <ul> list of available product filter values. You can format the selection tools according to your preferences in the helper attribute.

With the selected_only attribute, you can implement a list of buttons that allow you to disable filters.

Syntaksi

{FilterOptions( helper: string, selected_only: boolean, separator: string )}

Näkyvyys

Toimii näkyvyydessä: product-list-filter

Näkyvyyshelper-attribuutissa: product-list-filter-option

The tag is used only in the {ProductListFilters} tag's helper attribute.

Implementing product list filters

Below you can see a simple implementation of product filters on a product category's product list:

{ProductListFilters( before: '<div class="ProductListFilters">', helper: {{ {Filtername(before: '<span class="FilterName {FilterClass}">', after: '</span>')} {FilterOptions( before: '<ul class="FilterOptions">', helper: {{ <li> <a href="{FilterOptionSelectUrl}">{FilterOptionName} ({FilterOptionResultCount})</a> </li> }}, after: '</ul>' )} }}, after: '</div>' )} {Products}

Filters are added before the product list by using the {ProductListFilters} tag.

The list includes the name of each filter ({FilterName}) and available values ({FilterOptions}).

For each available value, the following are printed:

The implementation in this example doesn't exclude the option to disable filters. For this, see detailed instructions on how to implement product filters in a theme.

Attribuutit

helper:

Defines the content and output format of a single list element.

Allowed values: the Interface and HTML markup that define the output's markup and content.

The helper attribute can be used in two ways:

  • you can indicate the desired markup directly as the attribute's value, or
  • you can indicate a reference to a file with the desired markup as the attribute's value. The reference should be indicated in relation to the theme's root directory.

See also detailed instructions on using the helper attribute.

selected_only:

Sets the tag to print only the filters selected by the user. With the attribute, you can implement, for example, a list of buttons that allow the visitor to remove filters.

Sallitut arvot: true/false. The default value is false.
separator:

Sets a delimiter character between the filters to be printed.

Sallitut arvot: merkkijono tai yksittäinen merkki (esim. |)
before/after:

With the before and after attributes, you can define content that is output before or after the content produced by the tag.

Allowed values: text that may contain HTML and Interface markup.

E.g.

  • before: '<p>This markup appears before the tag's own content.</p>'.
  • after: '<p>This appears after the tag's own content.</p>'

If the tag does not produce any content, the content of the before and after attributes will also not be displayed.

escape:

Adds an escape character before quotation marks in the output. The attribute makes it easier to process the tag-produced content when using JavaScript.

Allowed values: true/false. The default value is false.

or:

Defines alternative content that is displayed if the tag itself does not produce any content.

Allowed values: text that may contain HTML and Interface markup.

E.g. or:'Content not found.'