The search engine in MyCashflow's paid plans includes search filtering tools that help customers narrow down their search to selected product categories, brands or price ranges. This article describes the implementation of search filters in a layout theme.

Learn more about MyCashflow's search engine and how it works.

The example below applies only to MyCashflow's paid plans. The free service package uses a limited search engine with no search filter tags.

Search filtering tools are usually added to the search results page, where visitors can use filters to limit the results of their search.

Search filters are printed by using the {SearchFilters} tag. By default, the tag prints all available search tools. Most often, the default output of the {SearchFilters} tag can be used without any modification to implement filtering tools, but if necessary, the tag's helper attribute can be used to specify the markup and content of the filter list more precisely.

In this example, the markup of the filter list element was placed in the helpers/search-filter.html file:

{SearchFilters(
    helper: 'helpers/search-filter'
)}

The content of the helpers/search-filter.html file can be seen below:

helpers/search-filter.html<h3>{SearchFilterName}</h3>
{SearchFilterOptions(
	before: '<ul>',
	helper: 'helpers/search-filter-options',
	after: '</ul>'
)}

In the file, the filter name is printed in the <h3> header by using the {SearchFilterName} tag. Apart from the name, every search filter is printed with search filter options in the form of a <ul> list by using the {SearchFilterOptions} tag. Below you can see the markup of filter options defined in the helpers/search-filter-options.html file:

helpers/search-filter-options.html<li>
    <a href="{SearchFilterOptionSelectUrl}">{SearchFilterOptionName}</a> ({SearchFilterOptionResultCount})
    {SearchFilterOptionRemoveUrl(
        before: '<a href="',
        after: '">{%Delete}</a>'
    )}
</li>

The following parts are printed in search filter options:

  • The search filter's selection link is printed with the {SearchFilterOptionSelectUrl} tag

    With a selection link, the customer can enable the filter. The selected filter is added to the search result page's URL as a GET parameter.

  • The name of the search filter option is printed with the {SearchFilterOptionName} tag

    The name of the option can be the name of a product category or brand, or a price range in the form of a string.

  • The number of products found with the filter is printed with the {SearchFilterOptionResultCount} tag

    The number of products takes into account all selected filters and the keyword entered by the customer.

  • And the search filter removal link is printed with the {SearchFilterOptionRemoveUrl} tag

    The removal link is printed only when a search filter is selected, so the markup defined in the tag's after / before attributes is not displayed either, if the filter is not enabled.

    In the example, we search for the text 'Poista' in the dictionary with the tag markup {%Delete}, so that the example works properly in multilingual stores as well.

Note that tags for the selection and removal links only print a URL, so they should only be used in link elements.

The default output of the {SearchFilters} tag contains all the above-mentioned features, so in most cases it can be used without any modifications to implement search tools.

If you have any questions regarding this topic, contact the MyCashflow customer service.