Using Facets to filter a product list

In this tutorial, you will learn how to set up a facet based filter on an Ecommerce Product Catalog, enabling users to filter the products with, for instance, radio buttons, checkboxes or dropdown menus (Figure 1.1).

 

Figure 1.1 Facet filters in action - here in the form of checkboxes

We will start from zero with:

  • Creating a new repository
  • Creating a new index
  • Creating a query
  • Creating facets
  • Adding the facets to your front end

Simply follow this step-by-step guide, and you’re set.

A repository is a kind of top folder for indexing configuration files – each repository can contain a number of indexes, queries etc.

Create a new repository:

  • Go to you Settings
  • Right click on the Repositories node and Click New Repository
  • Name it 
  • Click OK

 

This creates a new repository and opens the configuration page (Figure 2.1).​

Figure 2.1 Your new empty repository should look like this

Next, you must index your content – in this case your products. This is a fairly complicated process, but of course it only needs to be done once, after which the index can be automatically rebuilt at intervals.

Creating a working index requires you to add the elements in the proper order – Index > Instance > Build > Fields.

  • Click Add index
    • Name it
    • Click OK
  • Click Add instance
    • Name it
    • Select the LuceneIndexProvider
    • Provide a folder name
    • Click OK
  • Click Add Build
    • Name it
    • Select the Dynamicweb.eCommerce.Indexing.ProductIndexBuilder
    • Select Full as your builder action
    • Click OK
  • Click Add field
    • Select field type Schema extender
    • Select ProductIndexSchemaExtender as your type
    • Click OK
  • Save your index, then build it (click the "build"-button next to your build. It has the the same name as your instance)
  • Save and close your index – it should look like Figure 3.1
Figure 3.1 Your index should look like this

Once you have an index configured and built, you can start querying it – asking it to return information to you.

We will be building a simple query matching active products with from a particular manufacturer passed to the query by a facet control.

  • Click Add query
    • Name it
    • Select your index as data source
    • Click OK
  • Click Add parameter
    • Name it (e.g. Manufacturer)
    • Select System.String as type
    • Click OK
  • Click Expressions > Add group
    • In the dropdowns, select the Active field and the Equal operator.
    • Click the pencil and select Constant and System.Boolean. Set value to true.
    • Click Add expression
      • Select the Manufacturer ID field
      • Select Match any as the operator
      • Click the pencil and select Parameter > Manufacturer
  • Save and close your query
Figure 4.1 Your expressions should look like this

Q: I'm using facets alongside Ecom navigation, and my facets disappear when I click on a subgroup in the navigation. Why?

A: You need to make sure you pass on a GroupID parameter to your query, as in Figure 4.2

Figure 4.2 Making Ecom navigation and facets work together

 Technically, a facet is a mapping between a query parameter (e.g. Manufacturer) and a list of values from a field in the index (e.g. Manufacturer name) – selecting one of the values then passes the value to the query, and the filtered query result is then returned to frontend.

Facets are created inside facet groups.

To create a facet group:

  • Click Add facets to create a facet group
    • Name it
    • Select your query as the query for the facet
    • Click OK

This opens the facet group interface, from which you can create the facets you want to use:

  • Click Add field facet – a field facet will pull all the values from the Manufacturers field and make them into facet options (a drop down menu, in this case).
    • Name it (e.g. Manufacturers)
    • Select the field Manufacturer ID from the dropdown
    • Select the query parameter Manufacturer you created before
    • Click OK
  • Save and close your facets window
Figure 5.1 Your field facet should look like this

To add your facet to the front end:

  • Go to the Product Catalog module settings on your paragraph
  • Under the Show settings, select Index
  • Under the Index settings, select your query
  • In the Facet Groups selector area, move your facet from left to right
  • Under Templates, modify the template you want the facets to show up in using the Facets loop – see example below.
<form method="get" action="/Default.aspx"> <input type='hidden' name='ID' value='@Pageview.Page.ID' /> <h4>@Translate("FilterResult", "Filter your results")</h4> <table> @foreach (LoopItem group in GetLoop("FacetGroups")) { foreach (LoopItem facet in group.GetLoop("Facets")) { <tr> <td><i>@facet.GetString("Facet.Name")</i></td> <td> <select name="@facet.GetString("Facet.QueryParameter")"> <option value="">@Translate("None", "None")</option> @foreach (LoopItem option in facet.GetLoop("FacetOptions")) { var value = option.GetValue("FacetOption.Value"); var selected = option.GetBoolean("FacetOption.Selected"); var label = option.GetString("FacetOption.Label"); var count = option.GetInteger("FacetOption.Count"); <option value="@value" selected="@selected"> @label (@count) </option> } </select> </td> </tr> } } </table> <input type="submit" value="Apply filter" class="btn btn-primary" /> <a href="/Default.aspx?ID=@Pageview.Page.ID">Clear</a> </form>

The template above renders all facets in the facet group in the same way, but you can change the template above to switch which type of control to render, based on the data type of the value, or simply the name of the facet.

Which html elements to use, and which type of behavior they should have, is completely up to the implementer. Dynamicweb does not provide any predefined html elements for things like ranges or lists.

  • Save and close your module settings

And that’s it. You’re done!

Click Show page and start using your facets.