Facet bucketing with custom attributes

Facet bucketing refers to the grouping of similar facet values into buckets and representing them by a common value. Listing all the facet values results in lengthy lists in your user interface. Facet bucketing improves the user experience by simplifying the choices when filtering. With Algolia for Salesforce B2C Commerce, you can implement facet bucketing with custom attributes.

Examples: sizes and colors

Apparel often comes in specific shades like ruby, crimson, scarlet, burgundy, or cherry. Using the color attribute for faceting would create too many options. Each option might then return only a few results. Instead, you can use the essential color red as attribute for faceting. Another example is shoe size, where the same sizes can be expressed in multiple formats:

Letters: S, M, L
Numerical systems: Mondopoint, EU, UK, US
Alphanumeric: B10

Instead of using the size attribute for faceting, you can choose common values that represent the same physical sizes. First, create your custom attribute for the Product system object. Go to Business Manager > Administration > Site Development > System Object Types > Product. Select a custom attribute such as refinementColor or refinementSize. For example, the custom attribute refinementColor has the type enum of string. It has predefined values to choose from, and you can change the list of values. You can select any type supported by Salesforce B2C Commerce.

Screenshot of the 'Attribute Definition Details' page with 'Value Type' set to 'enumerated strings' and a list of color values.

To make faceting work, fill this attribute with a value for every product that you want to filter by this attribute:

Screenshot of a drop-down menu in the 'Facet Bucketing' section showing color options, with 'pink (Pink)' selected.

Add custom attributes to additional product attributes

Go to the Algolia BM module (BM > Merchant Tools > Algolia > Algolia). Add your custom attribute to the Additional Product Attributes field. Use the pre-configured name if the attribute is part of the configurable attributes. Otherwise, use its full path, such as custom.myCustomAttribute.

To index a complex custom attribute or make transformations before export to Algolia, declare the attribute explicitly.

After creating the custom attribute, adding the values to your products, and exporting it to Algolia, you can create a new refinementList widget. This widget lets your users filter the search results based on this new attribute. Create a new refinementListWithPanel widget in instantsearch-config.js:

JavaScript

refinementListWithPanel({
    container: '#algolia-refinement-color-list-placeholder',
    attribute: 'refinementColor',
    templates: {
        item: ''
            + '<a class="{{cssClasses.link}}" href="{{url}}" style="white-space: nowrap; {{#isRefined}} font-weight: bold; {{/isRefined}}">'
            + '    {{#isRefined}}'
            + '      <i class="fa fa-check-square"></i>'
            + '    {{/isRefined}}'
            + '    {{^isRefined}}'
            + '      <i class="fa fa-square-o"></i>'
            + '    {{/isRefined}}'
            + '    <span class="{{cssClasses.label}}">{{label}}</span>'
            + '</a>',
    },
    panelTitle: algoliaData.strings.colorPanelTitle
}),

Add the placeholder div element for your new widget in the file searchResultsNoDecorator.isml as well. After adding the new refinementList widget, your users can filter products by the more generic color groups. The following example shows a storefront with two filtering options. The first Colors widget (refinementList) lists specific shades and color terms. The second Colors widget (custom.refinementColor) only lists primary colors:

Salesforce B2C Commerce

Facet bucketing with custom attributes

Examples: sizes and colors

Create custom attributes for facet bucketing

Add custom attributes to additional product attributes

Create a new `refinementList` widget

​Examples: sizes and colors

​Create custom attributes for facet bucketing

​Add custom attributes to additional product attributes

​Create a new refinementList widget

Examples: sizes and colors

Create custom attributes for facet bucketing

Add custom attributes to additional product attributes

Create a new `refinementList` widget