PopularViewedRecommendationsList
PopularViewedRecommendationsList
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
-
engine:
ProductRecommendationEngine
The headless engine.
-
props:
PopularViewedRecommendationsListProps
The configurable
PopularViewedRecommendationsList
properties.
Returns PopularViewedRecommendationsList
PopularViewedRecommendationsListProps
The configurable PopularViewedRecommendationsList
properties.
Properties
-
options?:
PopularViewedRecommendationsListOptions
PopularViewedRecommendationsListOptions
Properties
-
additionalFields?:
string[]
Additional fields to fetch in the results.
-
maxNumberOfRecommendations?:
number
The maximum number of recommendations, from 1 to 50.
Default:
5
Related Types
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