Rendering recommendations in a slider

To render recommendations in a slider, do the following:

Fetch recommendations, see: this excerpt of the API integration guide.
Render the recommendations using the RecommendationSlider function.

import {
  RecommendationSlider,
  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 recommendationSlider = RecommendationSlider({
  recommendations,
  productCard, // The productCard component you created in a previous step
});

onExistsObserver("#frontpage-recommendations", (element) =>
  element.append(recommendationSlider)
);

Looking for the reference?

⌘I