Product Search

This demo searches the products of an online shop, with price and category filters and a sorting menu. Search for chocolate or milk, then sort by price or narrow the results by category. View the ss360Config to check the configuration.

• Products come from a product feed. Each product shows its price, and the filters and sorting options come from the feed's attributes.
• contentGroups.include limits the results to the product group, here Grocery Products. Leave it out to show products next to your pages.
• The sorting menu appears as soon as sorting options are set up, see Sorting. results.sorting picks the option that's selected by default.

In the Control Panel: set up filters and sorting options in Filters and Sorting, then turn filters on in Design & Publish under Settings → Results → Filters.

On Content + Product Search projects, the search uses the ecommerce API. If you configure the plugin yourself, add ecom: true to the configuration.

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: {
      include: ['Grocery Products']
   },
   layout: {
      mobile: {
         type: 'grid'
      },
      desktop: {
         type: 'grid',
         gridColsXl: 3
      }
   },
   filters: {
      enabled: true,
      position: 'left',
      settings: {
         Price: {
            unit: '$'
         }
      }
   }
};

{"siteId":"83460","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"contentGroups":{"include":["Grocery Products"]},"layout":{"mobile":{"type":"grid"},"desktop":{"type":"grid","gridColsXl":3}},"filters":{"enabled":true,"position":"left","settings":{"Price":{"unit":"$"}}}}