ProductListing

Example Implementation

product-listing.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {ProductListing as HeadlessProductListing} from '@coveo/headless/product-listing';
 
interface ProductListingProps {
  controller: HeadlessProductListing;
}
 
export const ProductListing: FunctionComponent<ProductListingProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  return (
    <ul>
      {state.products.map(({ec_name, clickUri, permanentid}) => (
        <li key={permanentid}>
          <a href={clickUri}>{ec_name}</a>
        </li>
      ))}
    </ul>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildProductListing(engine);
 *
 * <ProductListing controller={controller} />;
 * ```
 */

The ProductListing controller allows the end user to configure and retrieve product listing data.

Methods

refresh

Refreshes the product listing.

setAdditionalFields

Sets the additional fields to request in addition to the standard commerce fields.

Parameters

  • additionalFields: string[]

    The new additional fields.

setUrl

Changes the current URL used to retrieve product listing.

Parameters

  • url: string

    The new URL.

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

A scoped and simplified part of the headless state that is relevant to the ProductListing controller.

Properties

  • additionalFields: string[]

  • error: ProductListingAPIErrorStatusResponse | null

  • isLoading: boolean

  • products: ProductRecommendation[]

  • responseId: string

  • url: string

Initialize

buildProductListing

Creates a ProductListingController controller instance.

Parameters

  • engine: ProductListingEngine

    The headless engine.

  • props: ProductListingProps

    The configurable ProductListingController properties.

Returns ProductListing

ProductListingProps

The configurable ProductListingController properties.

Properties

  • options?: ProductListingOptions

    The initial options that should be applied to this ProductListing controller.

ProductListingOptions

The initial options that should be applied to this ProductListing controller.

Properties

  • url: string

    The initial URL used to retrieve the product listing.

  • additionalFields?: string[]

    The initial additional fields to retrieve with the product listing.

ProductRecommendation

Properties

  • additionalFields: Record<string, unknown>

    An object containing the requested additional fields for the product.

  • childResults: ProductRecommendation[]

    A list of child product recommendations in a product grouping context.

  • clickUri: string

    A direct link to the product in URL format.

  • documentUri: string

    Document Uri in the index. Useful for analytics.

  • documentUriHash: string

    Document UriHash in the index. Useful for analytics.

  • permanentid: string

    The SKU of the product.

  • totalNumberOfChildResults: number

    The total number of items in the group.

  • ec_brand?: string

    The brand of the product.

    From the ec_brand field.

  • ec_category?: string

    The category of the product (e.g., "Electronics", "Electronics|Televisions", or "Electronics|Televisions|4K Televisions").

    From the ec_category field.

  • ec_images?: string[]

    Additional product images in URL format.

    From the ec_images field.

  • ec_in_stock?: boolean

    The availability of the product (i.e., whether it’s in stock).

    From the ec_in_stock field.

  • ec_item_group_id?: string

    The id used for Product Grouping.

    From the ec_item_group_id field.

  • ec_name?: string

    The name of the product.

    From the ec_name field.

  • ec_price?: number

    The base price of the product or variant.

    From the ec_price field.

  • ec_promo_price?: number

    The promotional price of the product or variant.

    From the ec_promo_price field.

  • ec_rating?: number

    A rating system. Ratings range from 0-10.

    From the ec_rating field.

  • ec_shortdesc?: string

    A short description of the product.

    From the ec_shortdesc field.

  • ec_thumbnails?: string[]

    Product images in URL format.

    From the ec_thumbnails field.

Unsubscribe

Call signatures

  • (): void

What's next for me?