Skip to main content

Filters Example

This demo shows filters next to embedded search results. Search for ice cream, then narrow the results by tag or with the range 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.

See Filters for all filters options.

window.ss360Config = {
   siteId: 'spoonacular.com', /* 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 DOM element you want to use */
      }
   },
   layout: {
      mobile: {
         type: 'grid'
      },
      desktop: {
         type: 'grid'
      }
   },
   style: {
      additionalCss: '.ss360-data-point__cell--value{font-weight: 700}'
   },
   filters: {
      enabled: true,
      position: 'left' /* Use position 'top' to change the position */
   }
};
{"siteId":"spoonacular.com","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"layout":{"mobile":{"type":"grid"},"desktop":{"type":"grid"}},"style":{"additionalCss":".ss360-data-point__cell--value{font-weight: 700}"},"filters":{"enabled":true,"position":"left"}}