InstantProducts

This is for:

Developer
Note

This component was introduced in version 2.66.0.

The InstantProducts controller allows the end user to manage instant products queries.

Methods

clearExpired

Clears all expired instant products queries.

interactiveProduct

Creates an InteractiveProduct sub-controller.

Parameters

  • props: Omit<InteractiveProductCoreProps, 'responseIdSelector'>

    The properties for the InteractiveProduct sub-controller.

Returns InteractiveProduct: An InteractiveProduct sub-controller.

promoteChildToParent

Finds the specified parent product and the specified child product of that parent, and makes that child the new parent. The children and totalNumberOfChildren properties of the original parent are preserved in the new parent.

This method is useful when leveraging the product grouping feature to allow users to select nested products.

For example, if a product has children (such as color variations), you can call this method when the user selects a child to make that child the new parent product, and re-render the product as such in the storefront.

Note: In the controller state, a product that has children will always include itself as its own child so that it can be rendered as a nested product, and restored as the parent product through this method as needed.

Parameters

  • child: Omit<BaseProduct, 'children' | 'totalNumberOfChildren'>

    The child product that will become the new parent.

updateQuery

Updates the specified query and shows instant products for it.

Parameters

  • query: string

    The query to get instant products for. For more precise instant products, query suggestions are recommended.

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

state

The state of the InstantProducts controller.

Properties

  • error: CommerceAPIErrorResponse | SerializedError | null

    An error returned when executing an instant products request, if any. This is null otherwise.

  • isLoading: boolean

    Determines if a search is in progress for the current query.

  • products: Product[]

    The instant products for the current query.

  • query: string

    The current query for instant products.

  • totalCount: number

    The total number of products that match the current query.

Initialize

buildInstantProducts

Creates an InstantProducts controller instance.

Parameters

  • engine: CommerceEngine

    The headless commerce engine.

  • props: InstantProductsProps

    The configurable InstantProducts properties.

Returns InstantProducts

InstantProductsProps

The configurable InstantProducts properties.

Properties

InstantProductsOptions

Properties

  • cacheTimeout?: number

    Number in milliseconds that cached products will be valid for. Defaults to 1 minute. Set to 0 so that products never expire.

  • searchBoxId?: string

    A unique identifier for the search box.

HighlightKeyword

Properties

  • length: number

    The length of the offset.

  • offset: number

    The 0 based offset inside the string where the highlight should start.

InteractiveProduct

Properties

  • warningMessage?: string

  • beginDelayedSelect: function

    Prepares to select the result after a certain delay, sending analytics if it was never selected before.

In a DOM context, it’s recommended to call this method on the touchstart event.

  • cancelPendingSelect: function

    Cancels the pending selection caused by beginDelayedSelect.

In a DOM context, it’s recommended to call this method on the touchend event.

  • select: function

    Selects the result, logging a UA event to the Coveo Platform if the result wasn’t selected before.

In a DOM context, it’s recommended to call this method on all of the following events:

  • contextmenu * click * mouseup * mousedown

Product

Properties

  • position: number

    The 1-based product’s position across the non-paginated result set.

    For example, if the product is the third one on the second page, and there are 10 products per page, its position is 13 (not 3).

  • additionalFields: Record<string, unknown>

    The requested additional fields for the product.

  • children: Omit<BaseProduct, 'children' | 'totalNumberOfChildren'>

    The child products of the product, fetched through product grouping.

  • clickUri: string

    The URL of the product.

  • ec_brand: string | null

    The brand of the product.

    From the ec_brand field.

  • ec_category: string[]

    The category of the product (for example, "Electronics;Electronics|Televisions;Electronics|Televisions|4K Televisions").

    From the ec_category field.

  • ec_color: string | null

    The color of the product.

  • ec_description: string | null

    The description of the product.

    From the ec_description field.

  • ec_gender: string | null

    The gender the product is intended for.

  • ec_images: string[]

    The URLs of additional product images.

    From the ec_images field.

  • ec_in_stock: boolean | null

    Whether the product is currently in stock.

    From the ec_in_stock field.

  • ec_item_group_id: string | null

    The ID used for the purpose of product grouping.

    From the ec_item_group_id field.

  • ec_listing: string | null

    The listing that the product belongs to.

  • ec_name: string | null

    The name of the product.

    From the ec_name field.

  • ec_price: number | null

    The base price of the product.

    From the ec_price field.

  • ec_product_id: string | null

    The product ID.

  • ec_promo_price: number | null

    The promotional price of the product.

    From the ec_promo_price field.

  • ec_rating: number | null

    The product rating, from 0 to 10.

    From the ec_rating field.

  • ec_shortdesc: string | null

    A short description of the product.

    From the ec_shortdesc field.

  • ec_thumbnails: string[]

    The URLs of the product image thumbnails.

    From the ec_thumbnails field.

  • permanentid: string

    The SKU of the product.

  • totalNumberOfChildren: number | null

    The total number of child products fetched through product grouping.

  • excerpt?: string | null

    The contextual excerpt generated for the product.

  • excerptsHighlights?: HighlightKeyword[]

    The length and offset of each word to highlight in the product excerpt string.

  • nameHighlights?: HighlightKeyword[]

    The length and offset of each word to highlight in the product name.

Unsubscribe

Call signatures

  • (): void;