AugmentedResultList Component

The AugmentedResultList component extends the ResultList component to allow you to invoke a function to augment the raw field of result list items before rendering them.

Options

In addition to the options provided by the ResultList component, the AugmentedResultList component also provides the options listed in this section:

matchingIdField

The @-prefixed field to use to filter fetchAugmentData output. Products without this field are ignored. Typically, you will choose the field you use in matchingFunction, when you define that function explicitly.

Type: IFieldOption

Default value is @sfid, meaning that the component only uses fetchAugmentData output results that have an sfid to augment result list items.

fetchAugmentData

The function to use to fetch extra result information.

Type: (objectIds: String[]) => Promise<IPromiseReturnArgs<IAugmentData>>

Where:

  • IPromiseReturnArgs<T> has the following type: {data: T}

  • IAugmentData has the following type:

    {
      // Item specific data.
      resultData: {}[];
      // Data common to all target items.
      commonData: {};
    }
    

You will typically set this option dynamically.

By default, the function is undefined and has no impact. In that case, the AugmentedResultList component behaves as the ResultList one.

matchingFunction

The function to use to match fetchAugmentData output (filtered by matchingIdField) with result list items.

Type: (augmentData: any, queryResult: IQueryResult) => boolean

See IQueryResult.

By default, the function returns true for pairs of items whose sfid values match:

(augmentData: any, queryResult: IQueryResult) => {
  return augmentData['sfid'] === queryResult.raw['sfid'];
}

Methods

Same methods as the ResultList component.

Usage Example

See a full example of the augmented result list used to display product prices in a B2B search page.

Recommended Articles