Prints a list of filters available for a product list, with which visitors can browse products that use product features.

Kuvaus

Using the tag is subject to the following, plan-based limitations:

  • The tag is available starting from the Basic plan.
  • Basic: The tag prints a max. of 3 product filters.
  • Advanced and above: The tag prints, by default, a max. of 10 product filters (if you'd like to display more filters, contact our customer service).

The tag prints a filter menu only for product features that were set to be used as product filters using the product attribute's Display as product filter in the store setting.

By default, the tag prints the name of each filter and the default implementation of filter tools. You can further define the structure and properties of product filters in the tag's helper attribute by using product filter tags.

This tag is used only for creating filters for product lists, e.g. in the product list template. The list of product features is created using the {ProductFeatures} tag.

See the detailed instructions on how to implement product filters in a theme.

Syntaksi

{ProductListFilters(
    helper: string
)}

Näkyvyys

Toimii näkyvyydessä: globaali

Näkyvyyshelper-attribuutissa: product-list-filter

The tag is only used for product lists.

You can use the tag in the following templates, for instance, although the tag can be used in connection with a product list in any template:

Front pagethemes/shop/THEME/homepage.html
Campaignthemes/shop/THEME/campaign-list.html
Display windowthemes/shop/THEME/category-front.html
Product listthemes/shop/THEME/product-list.html
Brandthemes/shop/THEME/brand-list.html

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.'