Category facet sub-controller

This is for:

Developer
In this article

Create facet sub-controllers using FacetGenerator sub-controller of the Search controller.

const searchController = buildSearch(commerceEngine);

const facetGenerator = searchController.facetGenerator();
for (const facet of facetGenerator.facets) {
  switch (facet.type) {
    case 'regular':
      // facet will be typed as RegularFacet, render it...
      break;
    case 'dateRange':
      // facet will be typed as DateFacet, render it...
      break;
    case 'numericalRange':
      // facet will be typed as NumericFacet, render it...
      break;
    case 'hierarchical':
      // facet will be typed as CategoryFacet, render it...
  }
}

Methods

deselectAll

Deselects all facet values.

isValueSelected

Checks whether the specified facet value is selected.

Parameters

Returns boolean: Whether the specified facet value is selected.

showLessValues

Sets the number of values displayed in the facet to the originally configured value.

showMoreValues

Increases the number of values displayed in the facet to the next multiple of the originally configured value.

toggleSelect

Toggles the specified facet value.

Parameters

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

type

The type of the facet.

facetSearch

Provides methods to search the facet’s values.

Methods

clear

Resets the query and empties the values.

Performs a facet search.

select

Selects a facet search result.

Parameters

updateText

Updates the facet search query.

Parameters

  • text: string

    The query to search.

state

The state of the Facet controller.

Properties

  • type: 'regular' | 'dateRange' | 'numericalRange' | 'hierarchical'

    The type of the facet.

  • facetSearch: FacetSearchState

    The state of the facet’s searchbox.

  • canShowLessValues: boolean

    true if fewer values can be displayed and false otherwise.

  • canShowMoreValues: boolean

    true if there are more values to display and false otherwise.

  • facetId: string

    The facet ID.

  • hasActiveValues: boolean

    true if there is at least one non-idle value and false otherwise.

  • isLoading: boolean

    true if a search is in progress and false otherwise.

  • values: CategoryFacetValue[]

    The values of the facet.

  • field: string

    The facet field.

  • displayName?: string

    The facet name.

  • activeValue?: CategoryFacetValue

    The currently active value in the category facet.

  • selectedValueAncestry?: CategoryFacetValue[]

    An array of the selected values in the ancestry of the category facet.

  • facetSearch: CategoryFacetSearchState

    The state of the category facet’s search box.

CategoryFacetValue

Properties

  • numberOfResults: number

    The number of results that have the facet value.

  • state: 'idle' | 'selected' | 'excluded'

    Whether a facet value is filtering results (selected) or not (idle).

  • value: string

    The facet value.

SpecificFacetSearchResult

Properties

  • count: number

    An estimate of the number of result items matching both the current query and the filter expression that would get generated if the facet value were selected.

  • displayValue: string

    The custom facet value display name.

  • rawValue: string

    The original facet value, as retrieved from the field in the index.

CategoryFacetSearchState

Properties

  • isLoading: boolean

    Returns true if the facet search is in progress, and false if not.

  • moreValuesAvailable: boolean

    Whether more values are available.

  • query: string

    The current query in the facet search box.

  • values: CategoryFacetSearchResult[]

    The facet search results.

CategoryFacetSearchResult

Properties

  • count: number

    An estimate of the number of result items that match both the current query and the filter expression which would be generated if the facet value were selected.

  • displayValue: string

    The custom facet value display name.

  • path: string[]

    The hierarchical path to the facet value.

  • rawValue: string

    The original facet value, as retrieved from the field in the index.

Unsubscribe

Call signatures

  • (): void;