To render recommendations in a grid, do the following:

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

You will need to add the product card you created in a previous step here.

import { RecommendationGrid } from "@depict-ai/react-ui";
import { useEffect, useState } from "react";

export default function Recommendations() {
  const { fetchRecommendations } = useFetchRecommendations<YourDisplay>();

  const [recs, setRecs] = useState(new Promise<YourDisplay[]>(() => {})); // So placeholders are shown while loading

  useEffect(
    () =>
      setRecs(
        fetchRecommendations({
          type: "trending",
          // click the link above for more information on the options here
        })
      ),
    []
  );

  return (
    <>
      <h2>You might also like</h2>
      <RecommendationGrid
        recommendations={recs}
        productCard={ProductCard}
      />
    </>
  );
}

Looking for the reference?

Was this page helpful?

Rendering recommendations in a sliderIntroduction