Area: Episerver Commerce
Applies to versions: Commerce 10.4 and higher
Other versions:

Customizing facets in Campaign view

Recommendations [hide]

Facets in Episerver Commerce allow users to apply filters to campaigns and discounts, for easier location of specific items in the Campaign view. This topic describes how to customize the facets.

How it works

Facet Group

FacetGroup contains properties that identify a group of items by which to filter a campaign and settings to configure a group. Initialize a FacetGroup through a constructor.

Facet Group Settings

FacetGroupSettings contains properties to configure a facet group. Initialize these properties through a constructor.

Facet Item

FacetItem contains properties that identify a facet item in the facet group, which is a value to a filtered campaign. Initialize these properties through a constructor. 

Custom facets in Campaign view (Commerce 12.10 and later)

To customize facet groups in Commerce version 12.10 and up, create a class inherited from FacetGroupModifier, then register it on one of your initialization modules.

This example displays four markets by default in the market facet group, instead of three:

public class CustomFacetGroupModifier : FacetGroupModifier
    public override IEnumerable<FacetGroup> ModifyFacetGroups(IEnumerable<FacetGroup> facetGroups)
        var marketFacetGroup = facetGroups.FirstOrDefault(f => f.Id == CampaignFacetConstants.MarketGroupId);
        if (marketFacetGroup != null)
            marketFacetGroup.Settings.ItemsToShow = 4;
        return facetGroups;

And then registers it.

public void ConfigureContainer(ServiceConfigurationContext context)
    var services = context.Services;
    services.AddSingleton<FacetGroupModifier, CustomFacetGroupModifier>();

Custom facets in Campaign view (Commerce 12.9 and earlier)

First, you need a custom facet based on a campaign facet. In this article, we create a custom facet that

  • clears all built-in groups
  • has a facet group that filters by a campaign's last modified date. This user can choose last modified day, week, or month.

This example shows that the last modified facet group is single selection with three options: day, week, or month.

new FacetGroupSettings(FacetSelectionType.Single, 0, true, true, true /*showMatchingItems*/, Enumerable.Empty<string>())

Note: To show a item numbers that indicate how many campaigns are filtered, in FacetGroupSettings, set showMatchingItems to true.

To use a CustomFacet, follow these steps.

  1. Create a rest store named "customfacet" that returns a custom facet.

    Note: To show matching items, use the facet query handler to calculate matching numbers.

  2. Register the custom facet store and override the existing store "epi.commerce.facet". Create a module initializer. If an initializer exists, edit it.
  3. If you do not register a module initializer, you need to update or create the project's module.config file, as shown in the example below.

    After following the steps above, Campaign view has a custom facet on the left side, and the built-in groups have disappeared. We can interact in the UI, but still need to filter campaigns.

  4. Create a function to filter campaigns by last modified date, based on GetContentsByFacet.
  5. Customize the query to return GetCampaignsByLastModified, by overriding GetSalesCampaignChildrenQuery

    Here is an example of the customized Campaign view.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Mar 16, 2017

Recommendations [hide]