Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. The Developer Center continues to support Commerce 6.13.0 through 7.4.1.Visit new site

Filtered navigation

Filtered navigation

Filtered navigation allows customers to find products in large categories or search results by grouping products by characteristics such as brand and price range. In the out of the box storefront, filtered navigation appears as a set of links on the left side of the product category browsing pages. A customer can click links in the filtered navigation area to filter products and narrow down their search or browsing results.

Out of the box, filtered navigation groups products by:

  • Category
  • Price range
  • Brand
  • Attribute (simple values)
  • AttributeRange (range values)

Key classes and files

In Core:

  • Filter- Defines the functions for a general filter.
  • AbstractFilterImpl- Implements of a general filter.
    • CategoryFilter - Defines functions for filtering on product category.
      • CategoryFilterImpl - Implements the category filter.
    • BrandFilter - Defines functions for filtering on product brand.
      • BrandFilterImpl - Implements the brand filter.
    • AttributeFilter- Defines the functions for filtering on an attribute.
      • AttributeValueFilterImpl - Implements the simple value filter for attributes. For simple value filters, values will be listed in a distinct list in the filtered navigation links.
    • RangeFilter- Defines the functions for filtering on a given range.
      • AttributeRangeFilterImpl - Implements the range filter for attributes. Only attributes of type "Integer", "Decimal" or "Short-Text" can define a range.
        Note:

        Short-Text ranges can only used for alphabetical sorting. For example, sorting by Author Name: A - D, E - F, G - K, and so on.

      • PriceFilter - Defines functions for filtering on product price.
        • PriceFilterImpl - Implements the range filter for prices.

In Store Assets:

  • breadcrumbs.vm - Shows the bread crumbs for the applied filters on the current search/browsing results.
  • sidemenu.vm - Shows all the available filtered navigation links.

How it works

  1. A customer views a category that contains products or executes a search.
  2. Storefront gets the products and displays products in a sorted grid.
  3. Storefront creates a filtered navigation menu with products grouped by:
    • Category
    • Price
    • Brand
    • Attributes
  4. A customer clicks on a filtered navigation link to filter the product results.
  5. Storefront displays the filtered list of products in a sorted grid.
  6. Storefront updates the Browser title to include the filter. For example, Digital Cameras Under 2.0 MP
  7. Storefront updates the Browser URL to included the filter For example, http://www.mystore.com/digital-cameras/under-2-0-megapixels/
  8. Storefront updates the filtered navigation menu.

Configuration

To configure filtered navigation, see Configuring Filtered Navigation.