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

This version of Elastic Path Commerce is no longer supported or maintained. To upgrade to the latest version, contact your Elastic Path representative.

Configuring Filtered Navigation

Configuring Filtered Navigation

Filtered navigation is a set of links in the storefront (by default, on the left side of the pages) that allows customers to filter the list of products based on certain configurable product characteristics, such as price and size.

The filtered navigation configuration consists of an XML document stored in the Commerce Manager system setting COMMERCE/STORE/FILTEREDNAVIGATION/filteredNavigationConfiguration. The setting is store-specific, so it can be configured differently for each store.

There are 3 types of filters that can be defined in the document:

  • attribute - defines the simple value filters for an attribute.
  • attributeRange - defines the range values for an attribute.
  • price - defines the price ranges.

Attribute Simple Value Filter

This defines the simple value filter for an attribute. It starts with the "attribute" tag as shown in the following example.

<attribute key="A00551" localized="false">
  <simple id="01" value="CCD" />
  <simple id="02" value="CMOS" />
  <simple id="03" value="Super HAD CCD" />
  <simple id="04" value="Live MOS" />
  <simple id="05" value="3CCD" />
  <simple id="06" value="LBCAST" />
</attribute>
  • key="A00551" is the reference to the attribute key. Each attribute can only be defined once in the XML file.
  • localized="false" means that the this attribute is not localized.
  • <simple id="01" value="CCD" /> defines each available value. The "id" should be unique for this attribute since it is used to reference the filter. The "value" should be unique too.

If the attribute is localized, it will have the following differences in the XML.

  • The "localized" property should be "true".
  • For each simple value, it should have the "language" property defined.
  • The "id" should be unique for this attribute since it is used to reference this filter, but the "value" can be the same for different languages.

The following is a localized attribute example.

<attribute key="A00556" localized="true">
  <simple id="01" value="TFT active matrix" language="en" />
  <simple id="02" value="Matrice active TFT" language="fr" />
  <simple id="03" value="LCD passive matrix" language="en" />
  <simple id="04" value="LCD à matrice passive" language="fr" />
  <simple id="05" value="None" language="en" />
  <simple id="06" value="Aucun(e)" language="fr" />
  <simple id="07" value="LCD" language="en" />
  <simple id="08" value="LCD" language="fr" />
</attribute>

Attribute Range Filter

This defines the range value for an attribute. Only attributes with type "Integer", "Decimal" or "Short-Text" can have ranges defined. It starts with the "attributeRange" tag. The range filter can have subranges defined.

<attributeRange key="A00140" localized="false">
  <range lower="" upper="1.9" id="_1.9">
    <display language="en">
      <value>1.9 in. &amp; Under</value>
      <seo>1.9in-and-under</seo>
    </display>
    <display language="fr">
      <value>1.9 in. et dessous</value>
      <seo>1.9in-et-dessous</seo>
    </display>
  </range>
  <range lower="2" upper="2.9" id="2_2.9">
    <display language="en">
      <value>2 to 2.9 in.</value>
      <seo>2-to-2.9in</seo>
    </display>
    <display language="fr">
      <value>2 et 2.9 in.</value>
      <seo>2-et-2.9in</seo>
    </display>
  </range>
  <range lower="3" upper="" id="3_">
    <display language="en">
      <value>3in. &amp; Up</value>
      <seo>3in-and-up</seo>
    </display>
    <display language="fr">
      <value>3in. et Plus</value>
      <seo>3in-et-plus</seo>
    </display>
  </range>
</attributeRange>

The attribute range filter also has the "key" property and "localized" property. Each "range" tag represents one range, which may have the "lower" value and "upper" value set. If the "lower" value is not set, then there is no minimum allowed value for the attribute filter. If the "upper" value is not set, then the there is no maximum allowed value for the attribute filter.

Within each defined range, the value set for "lower" is inclusive, while the value set for "upper" is exclusive. For example, in the above sample file, you'll notice that two ranges have been set for "$100-$200" and "$200-$300". A product with a price of exactly $200 will fall into the second range ($200-$300).

The "display" tag contains the information to display the filter on the Filtered Navigation links.

Price Filter

This defines the range value for the price. It starts with the "Price" tag. The range filter can have subranges defined.

<price currency="USD" localized="false">
  <range lower="" upper="100" id="_100">
    <display language="en">
      <value>Under $100</value>
      <seo>under-$100</seo>
    </display>
    <display language="fr">
      <value>au-dessous de $100</value>
      <seo>au-dessousd-de-$100</seo>
    </display>
  </range>
  <range lower="100" upper="300" id="100_300">
    <display language="en">
      <value>$100 to $300</value>
      <seo>$100-to-$300</seo>
    </display>
    <display language="fr">
      <value>$100 et $300</value>
      <seo>$100-et-$300</seo>
    </display>
    <range lower="100" upper="200" id="100_200">
      <display language="en">
        <value>$100 to $200</value>
	<seo>$100-to-$200</seo>
      </display>
      <display language="fr">
        <value>$100 et $200</value>
	<seo>$100-et-$200</seo>
      </display>
    </range>
    <range lower="200" upper="300" id="200_300">
      <display language="en">
        <value>$200 to $300</value>
	<seo>$200-to-$300</seo>
      </display>
      <display language="fr">
        <value>$200 et $300</value>
	<seo>$200-et-$300</seo>
      </display>
    </range>
  </range>
  <range lower="300" upper="" id="300_">
    <display language="en">
      <value>More than $300</value>
      <seo>more-than-$300</seo>
    </display>
    <display language="fr">
      <value>au-dessous de $300</value>
      <seo>au-dessousd-de-$300</seo>
    </display>
  </range>
</price>

The price filter has the "currency" and "localized" property. Each "range" tag represents one price range, which may have the "lower" and "upper" values set. If the "lower" value is not set, then there is no minimum allowed value for the price filter. If the "upper" value is not set, then there is no maximum allowed value for the price filter.

The "display" tag contains the information to display the filter on the Filtered Navigation links.