Functions are exported from @depict-ai/js-ui.

​
RecommendationSlider function

Renders a slider of product cards, to be used for displaying recommendations. See this guide for how to fetch recommendations to provide as recommendations.

The following table shows the RecommendationSlider’s configuration properties, their types, and descriptions:

recommendations
Promise<T[]>

A promise resolving to an array of recommendations.

productCard
(display: YourDisplay | null) => HTMLElement | HTMLElement[]

The product card function to use for rendering products.

columnsAtSize
SDKColsAtSize?
default: "[[2, 901], [3, 1024], [4]]"

How many columns to show at each media size.

gridSpacing
SDKGridSpacing?
default: "2%"

The spacing between products.

Returns: A HTMLElement.

​
RecommendationGrid function

Renders a grid of product cards, to be used for displaying recommendations. See this guide for how to fetch recommendations to provide as recommendations.

The following table shows the RecommendationGrid’s configuration properties, their types, and descriptions:

recommendations
Promise<T[]>

A promise resolving to an array of recommendations/displays.

productCard
(display: YourDisplay | null) => HTMLElement | HTMLElement[]

The product card function to use for rendering products.

gridSpacing
(string | { horizontal: string; vertical: string; })?
default: "2%"

The spacing between the product cards.

maxRows
number?

The number of rows to limit the grid to. Won’t work if columnsAtSize is an empty array as it is used to calculate the number of rows dynamically depending on screen size.

columnsAtSize
[number, number?][]?
default: "[[2, 901], [3, 1024], [4]]"

How many columns to show at each media size. For example, [[2, 901], [3, 1024], [4]] means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.

viewMoreButton
{ text: string; startRows?: number; rowsPerClick?: number; }?

Optional configuration for the view more button. If unset, all products will be shown by default. Otherwise, a view more button with the given text will be shown. With the properties startRows and rowsPerClick, you can configure how many rows should be shown initially and how many rows should be added on each click.

Looking for a translation for the view more button? The locales exported from @depict-ai/js-ui/locales should have a view_more_ property that you can use.

Returns: A HTMLElement.

Was this page helpful?

API clientReact UI Reference