Configuring Filtered Navigation
Filtered navigation 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 attributeattributeRange
: defines the range values for an attributeprice
: defines the price ranges
attribute
: 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 keyEach 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 valueThe
id
should be unique for this attribute since it is used to reference the filter. Thevalue
should be unique too
If the attribute is localized, it will have the following differences in the XML.
- The
localized
property should betrue
- 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 thevalue
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>
attributeRange
: 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. & 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. & 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
: 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.