Recommendations
Rendering recommendations in a grid
To render recommendations in a grid, do the following:
- Fetch recommendations, see: this excerpt of the API integration guide.
- Render the recommendations using the
RecommendationGrid
function.
import {
RecommendationGrid,
onExistsObserver,
fetchDepictRecommendations,
} from "@depict-ai/js-ui";
const recommendations = fetchDepictRecommendations({
merchant: "MERCHANT_ID",
market: "MARKET", // See demo.depict.ai for available markets
locale: "en_GB", // See demo.depict.ai for available locales
type: "TYPE",
// click the link above for more information on the options here
});
const recommendationGrid = RecommendationGrid({
recommendations,
productCard, // The productCard component you created in a previous step
});
onExistsObserver("#frontpage-recommendations", (element) =>
element.append(recommendationGrid)
);
Looking for the reference?
Was this page helpful?