Introducing Filters

Filters are a key feature in any (e-commerce) search engine. You can now use Site Search 360 filters to empower your site visitors to search more precisely and to find what they need even faster than before.

Filter Types

At Site Search 360 we currently offer two types of filters:

  • range filters
  • multiple choice or multi-select filters

The multiple choice filters, in turn, support two different types of logic:

  • Results should match all selected values.
  • Results should match at least one selected value.

With these rather simple but incredibly powerful options you can enhance your search engine to satisfy even the most demanding user.

How To Create Custom Search Filters

To integrate filters into your search interface, you will first need to define them in your Control Panel. This can be done in a few simple steps:

  • Open the Filter tab in the Control Panel.
  • Click New filter to create a filter.
  • Give the filter a name (which will be visible to your visitors). You can update it later.
  • Select the filter type (and the filter logic for multi-select filters). You can update this later, but a re-index will be necessary.
  • Define the source for your filter data. We'll look into all the available options in more detail later in this post, but for now here they are:
    • Use XPaths
    • Use URL patterns (regular expression)
    • Leave it blank in case the filter options should not be extracted from the page's content. This applies when you send your pages via our API, upload a CSV feed, or if the filter options are already present in a #ss360IndexFilters DOM structure such as a div or another HTML element of your page, as explained in our knowledge base.

    To update the source later, a re-index will again be necessary.

  • Save and re-index your entire site once you've created all your desired filters.

How To Define Filter Values

There are four ways you can populate the filter values with Site Search 360.

1. Page Content

The first option, and probably the most convenient one, is sourcing information from your website pages and documents while the site is being crawled (indexed). There are also two possibilities here:

  • You can define an XPath to tell the indexer to look for a specific element in your HTML structure (e.g. a div with a specific class or id). Its content is then extracted as a filter value.
  • Alternatively you can set a URL pattern for the indexer to extract the value directly from your page URLs. With this method, a regular expression is applied and the first group will be matched.

You can also combine both options and have multiple data sources for each filter.

Example: Let's say you want to extract prices from all your product pages and they are always featured in a span with the price id (<span id="price">$13</span>). In this case, you can use the XPath //span[@id="price"] to extract the price values.

If you also need to remove the dollar sign, you can apply a postprocessing expression like this: (\$(.*)). Our indexer tries to extract numeric values automatically (so that removing the dollar sign is not really necessary), but sometimes a postprocessing expression might come in handy.

set up filter with XPath

Example: Now you want to get category names directly from your URLs, e.g. https://myshop.com/category1/product1.html and https://myshop.com/category2/product2.html. To do so, you can select URL Pattern in the drop-down menu and use the following regular expression to extract category1 and category2 at the same time: myshop.com/(.*)/(.*).html. Note that only the first matched group of the regular expression - (.*) in the example above - will be used as a filter source.

set up filters from URLs

2. API

If you index your documents using the Site Search 360 API (/pageJson), you can provide the filter options in the request body by referencing the id of the filter you've created. The id is assigned after the filter is saved and will be shown above all the other filter settings:

find filter id

Here is how a request with filter options will look:

3. DOM Element

If you don't want to manually define filter data sources or send your documents via our API, you can also simply inline the filter values in a hidden DOM element with the ss360IndexFilters id. The same rules as for the filters sent via the API are applied:

4. CSV Feed

Finally, if you update your search index by providing a CSV feed, you can simply specify the filter value(s) in their respective column. The column should be marked by the filter id in the header line. For instance, let's say that the fid#1 filter is the price and the fid#2 filter the category:

ArticleNumber;Name;Url;ImageUrl;ContentGroup;Content;DataPoints;fid#1;fid2
Something;My Product;https://myshop.com/my-product;https://myshop.com/my-product.jpg;Products;Product Description;;12.5;Accessories  

Fine-tuning

All set up? Now it's time to check your filter values and put everything in its place:

  • Re-order your filters with a simple drag-and-drop. Filters will be displayed to your users in the same order as arranged in the control panel.
  • Check your range filter minimum and maximum values to make sure the extraction is valid.
  • Evaluate multiple choice filter values and remove any unwanted ones.
 

How to Add Filters to the Site Search 360 JavaScript Plugin

By default no filters will be generated. To enable them, you need to adjust your ss360Config by adding the filters object and setting the enabled property to true. The full filter configuration and the default values are explained in the code snippet below:

Adjusting Range Filters

Range filters are generally based on a numeric value, and thus non-numeric information such as the price unit might get lost during the extraction process. For this reason, you might want to provide the relevant unit ($, €, etc.), define the step size, or maybe hide the histogram. A histogram is generated by default and gives your users a quick overview of how many results are available in a specific range.

In order to adjust these parameters, you'd need to add a settings object to your filters configuration. Your range filter can either be referenced by the filter name (the one that's shown in the user interface) or by the generated filter id:

 

Demo

Curious to see Site Search 360 filters in action? Check out our demo shopping site, our docs example with some code snippets, or just watch the three videos below:

search filters on top search filters on the left search filter on mobile