Custom facets in the marketing overview

5 min

Many ecommerce sites have many active campaigns and promotions. Facets in Optimizely Commerce Connect let users filter campaigns and discounts (promotions) to locate specific items in the Campaign view.

Classes in this topic are available in the following namespace:

EPiServer.Commerce.Shell.Facets

FacetGroup

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

public FacetGroup(string id, string name, IEnumerable<FacetItem> items, FacetGroupSettings settings) {
  Id = id; // the id of facet group
  Name = name; // the name of facet group
  Items = new List<FacetItem>(items); // the list of facet items
  Settings = settings; // settings that configure the facet group
}

FacetGroup settings

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

public FacetGroupSettings(
  FacetSelectionType selectionType,
  int itemsToShow,
  bool collapsible,
  bool hasIcons,
  bool showMatchingItems,
  IEnumerable<string> dependsOn) {
  SelectionType = selectionType; // Determine the selection type of facet group, single or multiple through FacetSelectionType enum
  ItemsToShow = itemsToShow; // The number of facet items shown by default. If more facet items exist, a Show more option becomes available.
  Collapsible = collapsible; // Determine the facet group is collapsible or not
  HasIcons = hasIcons; // Determine the icon of facet items are displayed or not
  ShowMatchingItems = showMatchingItems; // Determine the number of matching filtered items are shown or not
  DependsOn = dependsOn; // List of facet groups that the current group depends on. Changes to those groups can affect the number of matching filtered items in the current group.
}

FacetItem

FacetItem contains properties that identify a facet item in the facet group, which represents a value used to filter a campaign. Initialize these properties through a constructor:

public FacetItem(string id, string name, string iconClass = "") {
  Id = id; // the id of facet item that display in the url as a value
  Name = name; // the name of facet item that shown in the facets widget
  IconClass = iconClass; // the CSS class that determines the icon of the facet item. Empty by default.
}

Custom facets

To customize facet groups, create a class inheriting from FacetGroupModifier, then register it on one of your initialization modules.

The following 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;
    }
  }
}

The following example registers the facet:

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