Setting up your product card
Requirements
For both search and categories & collections, you need to set up your product card component.
That component will receive a display of the type YourDisplay (see previous page) OR null.
If display is null, it means that there’s no data for this product card yet, and you should display a product card as close to the dimensions as the one you’ll display when you’ll have data, we’ll call this a “placeholder”. The placeholder serves as a loading indicator for users as well as enabling scroll restoration when going back and minimizing content shift.
Example expected output of your product card component
`display` is `null`
`display` is `HoudiniDisplay`
Provided Placeholder components
To make it easier for you to create a placeholder, we provide you with a few components that you can use to create a placeholder.
You can understand their usage from the example below or read the reference.
Displaying color swatches
export interface YourDisplay {
/**
* The index of the variant to show in the variant_displays array
*/
variant_index: number;
/**
* All variants for that product - here you can, for example, get the color of each variant to display color swatches
*/
variant_displays: YourVariantDisplay[];
// … other properties
}
Code example
You probably have an existing product card which you just can add placeholder functionality for. Here’s an example of how it could look like:
import { ImagePlaceholder, TextPlaceholder } from "@depict-ai/react-ui";
export function ProductCard({ display }: { display: null | YourDisplay }) {
const variant_to_show = display?.variant_displays[display?.variant_index];
return [
<Link
href={variant_to_show?.page_url || "#"}
className="rec_outer"
{...(variant_to_show && "recommendation_id" in variant_to_show
? { "data-recommendation-id": variant_to_show.recommendation_id }
: {})}
>
{variant_to_show ? (
<div className="image_container">
<img src={variant_to_show.image_urls[0]} />
</div>
) : (
<ImagePlaceholder aspectRatio={imgAspectRatio} />
)}
<div className="text_container">
<div className="rec_title">
{variant_to_show.title ?? <TextPlaceholder height="1em" width="20ch" />}
</div>
<div className="price-container">
<span className="price">
{variant_to_show ? (
<FormatPrice price={variant_to_show.sale_price} />
) : (
<TextPlaceholder height="1em" width="5ch" />
)}
</span>
</div>
</div>
</Link>,
];
}
Was this page helpful?