Adding the CategoryPage to your site

​

The CategoryPage component

After setting up dynamic routing to your product listing pages pages, you must set up and configure your product listing pages using the CategoryPage component. Import the component from the Depict UI and nest it into your applications category page component.

import { CategoryPage } from "@depict-ai/react-ui";
import ProductCard from "./ProductCard";

function Category() {
  return (
    <div>
      <CategoryPage
        listingQuery={{ type: "listingId", id: YOUR_LISTING_ID }}
        productCard={ProductCard}
      />
    </div>
  );
}

export default Category;

• The productCard prop accepts your custom ProductCard component that receives and renders your category data.
• The listingQuery prop accepts the unique identifier for the current category/collection, see the last page.

​

Different layout possibilities

The default configuration displays the current category title above the product cards. If you want to render the title of the category yourself, do the following to remove the default title and also make the CategoryPage as compact as possible:

import { EmbeddedNumProducts } from "@depict-ai/react-ui"; // <- Add this import

 <CategoryPage
    categoryId="CATEGORY_IDENTIFIER"
    productCard={ProductCard}
    categoryTitlePlugin={EmbeddedNumProducts} // <- Add this property
  />

The CategoryPage in its most compact version, optimizing for the content being above the fold