Filters

Filters are a key feature in any (e-commerce) search engine. You can 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 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 Filters and Sorting in the Control Panel.

  • Create a Data Point if you don't have any yet. Data points will be used for defining the values for the filter.

  • Click on Create new 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 data source for your filter data. You can select any of the previously created Data Points as a source of information here.
    Remember that the range filters will work with numerical values only!

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

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

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.
    If there are some issues here - please modify the Data Point that serves as a source of info for the Filter.

  • 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 and displayed to your end-users.
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:

var ss360Config = {
   /* Your configuration*/,
   filters: {
      enabled: true, // whether to generate and show filter options, default: false
      position: "top", // where to place the filter view, one of the following: "top", "left"; "top" - filters will be shown above the search results, "left" - filters will be shown to the left of search results + "show filter" button will be added for mobile devices
      label: "Filter", // the label of the filter column, will be also used as screen reader text
      showCounts: true, // whether to show result counts for multiple choice filters
      showQuickDelete: true, // whether to show a "Quick Delete" bar summarizing active filter options and providing a "delete all" option
      deleteAllLabel: "Clear All", // the label of the "delete all" option
      settings: {} // range filter settings, e.g. {Price: {unit: '$', step: 1, drawHistogram: false}}
   }
}

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 an 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:

var ss360Config = {
   /* Your configuration */,
   filters: {
      enabled: true,
      settings: {
         Price: { // referenced by view name
            unit: '$', // show $ as the filter unit
            step: 1, // the step size
            drawHistogram: false // don't show the price histogram
         },
         'fid#2': { // referenced by filter key
            step: 10
         }
      }
   }
}

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: