Numeric facet sub-controller

This is for:

Developer
In this article

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

const productListingController = buildProductListing(commerceEngine);

const facetGenerator = productListingController.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.

isValueExcluded

Checks whether the specified facet value is excluded.

Parameters

Returns boolean: Whether the specified facet value is excluded.

isValueSelected

Checks whether the specified facet value is selected.

Parameters

Returns boolean: Whether the specified facet value is selected.

setRanges

Replaces the current range values with the specified ones.

Parameters

  • ranges:

    • end: string

      The end value of the range, formatted as YYYY/MM/DD@HH:mm:ss.

    • endInclusive: boolean

      Whether to include the end value in the range.

    • start: string

      The start value of the range, formatted as YYYY/MM/DD@HH:mm:ss.

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.

toggleExclude

Toggles exclusion of the specified facet value.

Parameters

toggleSelect

Toggles the specified facet value.

Parameters

toggleSingleExclude

Excludes the specified facet value, deselecting others.

Parameters

toggleSingleSelect

Toggles the specified facet value, deselecting others.

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.

state

The state of the Facet controller.

Properties

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

    The type of the facet.

  • 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: NumericFacetValue[]

    The values of the facet.

  • field: string

    The facet field.

  • displayName?: string

    The facet name.

  • domain?: NumericFacetDomain

    The domain of the numeric facet.

NumericFacetValue

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.

Unsubscribe

Call signatures

  • (): void;

NumericFacetDomain

Properties

  • min: number

    The minimum value of the domain.

  • max: number

    The maximum value of the domain.