Designers can now implement an out-of-the-box Filtered Navigation (aka Reductive Navigation) in the Premium Webstore.  This gives consumers the ability to navigate through products on the site by selecting the criteria that matters to them, such as a color, brand or price range. An example of how this might be implemented is shown below.

Prerequisites

• Storefront Design

Tasks to Complete

Storefront Setup:

Update AppConfig Settings in ASPDotNetStorefront as shown below:

Inventory Setup

Filtered Navigation in the Premium Webstore works based on attributes that are assigned values in your inventory.  These attributes and values are then sent to the Premium Webstore and stored as departments.  In the example shown below, a product would have up to four attributes in which it would have a value.  For example a shoe might be a White Adidas Basketball shoe that sells for $90.  In this case, we could create four new attributes: Filterednavigation1, Filterednavigation2, Filterednavigation3, and Filterednavigation4 and assign the following values:

1. Add Filtered Navigation attributes to your inventory and populate with the appropriate values. (See Example Above) - You will need to send these values to the Premium Webstore in the following format: "value::value::value::value".  The most common way to accomplish this will be to use the following business rule: 
• JOIN("::",$filterednavigation1,$filterednavigation2,$filterednavigation3,$filterednavigation4)
  
  filterednavigation1, filterednavigation2, filterednavigation3, and filtered navigation4 are custom attributes in your inventory. While this specific business rule is limited to joining eight (8) values, it can be nested to allow for additional values.  
   
• Color/White::Brand/Adidas::Style/Basketball::Price/$80-$100
  
  This rule will create one long string of all filterednavigation values for the product. In our example above, it would result in the following string for our product:
      
2. Assign the Business Rule to Your Premium Webstore Department field.
3. Additional Details
• The number of filtered navigation attributes is  not limited to four (4).  This example only uses four for simplicity. 
• Note that the name of the attribute is not important.  We chose Filterednavigation# so that the purpose of the inventory attribute is clear to anyone viewing it.  
• Filter categories can be deeper than one level.  For example, "White" may be divided into "Bright" and "Dull".  If this is the case, and our shoe is considered "Bright White", our value would now be "Color/White::Color/White/White/Bright".  In this way, the shoe will appear when the parent filter "white" is selected and if the child filter "bright" is then selected after that.  Note that "White" is repeated intentionally as the attributes must be entered in pairs. The "Color/White/White/Bright" entry can be read "This product is available when the user selects the 'White' filter under 'Color' and then selects the 'Bright' filter under 'White'"
• Adding these attributes to your inventory can be done in a variety of ways.  Most users will want to export their data to a spreadsheet and re-upload it after adding the Filternavigation attributes. 

Design

•  In the template.ascx file, place the following code in the location that you would like to render the filtered navigation menu: 
  
  (!XmlPackage Name="filterednav"!)
   
• Filtered Navigation is now enabled on your site.  You may choose to modify various AppConfig settings to vary the appearance.  To further change the look and behavior of the filtered navigation,  your designer can modify the filterednav.xml.config package.