Prints the tools for selecting product filter values.

Kuvaus

The tag is available starting from the Basic plan.

See the detailed instructions on how to implement product filters in a 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.

Syntaksi

{FilterOptions(
    helper: 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.

after/before:

By using the after and before attributes you can define content that is output either after or before the tag's output.

Allowed values:HTML and Interface markup.

E.g.

  • before: '<p>Tämä merkkaus näkyy ennen tagin omaa sisältöä.</p>'
  • after: '<p>Tämä taas näkyy tagin oman sisällön jälkeen.</p>'

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

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:HTML and Interface markup.

E.g. or:'Sisältöä ei löytynyt.'