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.

tsx

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.

To change what category the CategoryPage component is displaying, change the listingQuery prop to the new category’s unique identifier. Make sure to update it as the user navigates.

Review the types or reference for other configurable properties

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

⌘I

​The CategoryPage component

​Different layout possibilities

The CategoryPage component

Different layout possibilities