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.
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.
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). If you want to change the type of an existing filter, you'll have to set it up as a new filter, remove the old one, and re-index.
- 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
#ss360IndexFiltersDOM structure such as a
divor 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
divwith a specific
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.
Example: Now you want to get category names directly from your URLs, e.g.
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.
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:
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:
Something;My Product;https://myshop.com/my-product;https://myshop.com/my-product.jpg;Products;Product Description;;12.5;Accessories
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.
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: