PopularViewedRecommendationsList

This is for:

Developer

Example Implementation

popular-viewed.fn.tsx

import {
  PopularViewedRecommendationsList as HeadlessRecommendationList,
  loadClickAnalyticsActions,
  ProductRecommendation,
} from '@coveo/headless/product-recommendation';
import {useEffect, useState, FunctionComponent, useContext} from 'react';
import {AppContext} from '../../context/engine';
import {filterProtocol} from '../../utils/filter-protocol';
 
interface RecommendationListProps {
  controller: HeadlessRecommendationList;
}
 
export const RecommendationList: FunctionComponent<RecommendationListProps> = (
  props
) => {
  const engine = useContext(AppContext).productRecommendationEngine;
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  if (state.error) {
    return (
      <div>
        <div>Oops {state.error.message}</div>
        <code>{JSON.stringify(state.error)}</code>
        <button onClick={() => controller.refresh()}>Try again</button>
      </div>
    );
  }
 
  if (!state.recommendations.length) {
    return <button onClick={() => controller.refresh()}>Refresh</button>;
  }
 
  const logClick = (recommendation: ProductRecommendation) => {
    if (!engine) {
      return;
    }
 
    const {logProductRecommendationOpen} = loadClickAnalyticsActions(engine);
    engine.dispatch(logProductRecommendationOpen(recommendation));
  };
 
  return (
    <div>
      <button onClick={() => controller.refresh()}>Refresh</button>
      <ul style={{textAlign: 'left'}}>
        {state.recommendations.map((recommendation) => (
          <li key={recommendation.permanentid}>
            <article>
              <h2>
                {/* Make sure to log analytics when the recommendation is clicked. */}
                <a
                  href={filterProtocol(recommendation.clickUri)} // Filters out dangerous URIs that can create XSS attacks such as `javascript:`.
                  onClick={() => logClick(recommendation)}
                  onContextMenu={() => logClick(recommendation)}
                  onMouseDown={() => logClick(recommendation)}
                  onMouseUp={() => logClick(recommendation)}
                >
                  {recommendation.ec_name}
                </a>
              </h2>
              <p>{recommendation.ec_shortdesc}</p>
            </article>
          </li>
        ))}
      </ul>
    </div>
  );
};

The PopularViewedRecommendationsList controller recommends the most viewed products.

Methods

refresh

Gets new recommendations for popular viewed items.

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 PopularViewedRecommendationsList controller.

Properties

  • error: SearchAPIErrorWithStatusCode | null

    An error returned by the Coveo platform when executing a recommendation request, or null if none is present.

  • isLoading: boolean

    Whether a recommendation request is currently being executed against the Coveo platform.

  • maxNumberOfRecommendations: number

    The maximum number of recommendations.

  • recommendations: ProductRecommendation[]

    The products recommended by the Coveo platform.

Initialize

buildPopularViewedRecommendationsList

Creates a PopularViewedRecommendationsList controller instance.

Parameters

Returns PopularViewedRecommendationsList

PopularViewedRecommendationsListProps

The configurable PopularViewedRecommendationsList properties.

Properties

PopularViewedRecommendationsListOptions

Properties

  • additionalFields?: string[]

    Additional fields to fetch in the results.

  • maxNumberOfRecommendations?: number

    The maximum number of recommendations, from 1 to 50.

    Default: 5

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

    This parameter is no longer used by the Coveo Usage Analytics service.

  • 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 (for example, "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 (that is, 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