Recommendations
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.
You will need to add the product card you created in a previous step here.
import { RecommendationSlider } 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>
<RecommendationSlider
recommendations={recs}
productCard={ProductCard}
/>
</>
);
}
Looking for the reference?
Was this page helpful?