Your product card components needs to meet some specific requirements
display
.
That component will receive a display
of the type YourDisplay | null
.
YourDisplay
is a type definition of your specific display. Please ask Depict for this.
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.
The productCard
component has to return a HTMLElement
or HTMLElement[]
.
`display` is `null`
`display` is `HoudiniDisplay`
ImagePlaceholder
component to display a placeholder image while the product image is loading.
You can use the TextPlaceholder
component to display a placeholder text while the product title or price is loading.
Read the reference for more information.