​
Requirements

For both search and product listing pages, 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">
          {/* Use the first image in image_urls as the default image */}
          <img className="default-image" src={variant_to_show.image_urls[0]} />
          {/* Use the second image in image_urls as the hover image */}
          <img className="hover-image" src={variant_to_show.image_urls[1]} />
        </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>,
  ];
}
Note how we branch off to the shimmering placeholder effect in place of the content, when there is no content

Was this page helpful?

Import stylingOverview