To render recommendations in a slider, do the following:

  1. Fetch recommendations, see: this excerpt of the API integration guide.
  2. Render the recommendations using the RecommendationSlider function.
import {
  RecommendationSlider,
  onExistsObserver,
  fetchDepictRecommendations,
} from "@depict-ai/js-ui";

const recommendations = fetchDepictRecommendations({
  merchant: "MERCHANT_ID",
  market: "MARKET",
  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?

Was this page helpful?

Complete - categories & collections addedRendering recommendations in a grid