Here you can learn how to create product filters for product lists in MyCashflow themes.

Adding product filter support to a theme

  1. In the admin panel, go to Products > Product features.
  2. Define the necessary filters, their values and product features.

    Learn more about managing filters and assigning product features to products.

    Product filters won't be enabled in an online store if at least one of them is not visible.

  3. Add the <ProductListFilters supported="true"/> setting to the theme.xml file.

    The example below illustrates theme settings with support for product filters.

    ...
<Features>  
    <ProductListFilters supported="true"/>
    <BrandProductListFilters supported="true"/>
    <CampaignProductListFilters supported="true"/> 
</Features>
...

    If you'd like to use product filters on brand and campaign pages as well, you must also add the following settings:

    • <BrandProductListFilters supported="true"/>
    • <CampaignProductListFilters supported="true"/>

    Lue tarvittaessa lisää teeman asetuksista.

    Enabling the product filter setting changes the functioning of the {Products} tag. See the next section to learn more.

  4. Add the {ProductListFilters} tag to the theme before product lists.

    The tag is enabled for all pages, but you may want to use it especially in connection with main product lists on product category, brand and campaign pages.

    See also the list of product filter tags.

    Within the same page, the {ProductListFilters} tags can be applied to only one product list.

    Product filters can be added only to product lists that have been created by using the {Products} tag.

    When you implement filters, you can also use filters from the search result page (if they have been implemented in the online store's theme).

    The tags on the search result page work in the same way. Simply change the tags' names to save time and effort during the implementation.

  5. Format filters according to your preferences.

How product filters impact product lists

When product filters are enabled in the online store and supported in the store theme, a number of attributes normally used for defining list contents become disabled for the {Products} tag.

The contents of the lists that use product filters can be managed in the store settings.

The following attributes can still be used with the {Products} tag even when product filters are enabled in the store:

  • type
  • list_type
  • list_classes
  • classes
  • helper

The {Products} tag's aliases (e.g. {CategoryProducts}, {DiscountProducts} etc.) work as usual. These tags cannot be used with product filters.

Displaying product features on product pages

MyCashflow's in-built default theme Barebones includes in-built support for the feature.

You can set product features' values to be displayed on product pages by using the product filter Display as product feature on product pages setting.

In the product template, add the following markup to the location where you'd like to display product features:

{ProductFeatures(
  helper: {{
    {ProductAttributeValues(
      before: {{ <p class="ProductAttribute-{ProductAttributeId}"> }},
      after: {{ </p> }}
    )}
  }}
)}

See the individual parts of the example explained below:

  • The {ProductFeatures} tag creates a list that contains the product's features. The helper attribute defines how each feature should be displayed.
  • By default, {ProductAttributeValues} prints feature values as a comma-separated list.

    You can define the separator yourself by using the separator attribute or define the entire markup for each value by using the helper attribute.

  • For each feature, the {ProductAttributeId} tag adds a feature identifier, which is defined in the admin panel. This information can be used, for example, for writing CSS styles or scripts.