Filters

This demo shows filters next to the search results. Search for chicken, then narrow the recipes by diet, cuisine, or the calorie and time sliders. View the ss360Config to check the configuration.

• Filters come from your project's data. Set them up first in the Control Panel, see Filters.
• filters.enabled: true turns them on in the search results. filters.position is 'left' (next to the results) or 'top' (above them). On mobile, filters open with a Filter results button.
• filters.settings adds a unit to a range slider, for example kcal for Calories.
• contentGroups.exclude leaves out the product group, so only the recipe filters show here.

In Design & Publish: Settings → Results → Filters → Show filters.

For sorting, see the Product Search demo. See Filters for all filters options.

window.ss360Config = {
   siteId: '83460', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* Replace with the css selector of your search box */
   },
   results: {
      embedConfig: {
         contentBlock: '.example__page-content-block' /* Replace with the css selector of the element the results go into */
      }
   },
   contentGroups: {
      exclude: ['Grocery Products']
   },
   filters: {
      enabled: true,
      position: 'left',
      settings: {
         Calories: {
            unit: 'kcal'
         },
         Minutes: {
            unit: 'min'
         }
      }
   }
};

{"siteId":"83460","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"contentGroups":{"exclude":["Grocery Products"]},"filters":{"enabled":true,"position":"left","settings":{"Calories":{"unit":"kcal"},"Minutes":{"unit":"min"}}}}