Specifying Listing Type in the Category Page Sdk

The DepictCategoryProvider (JavaScript) and CategoryPage component (React) has a property you can define alongside categoryId called listingType.

​

JavaScript SDK:

When constructed, pass a listingType property to the DepictCategoryProvider (along with the categoryId).

import { DepictCategoryProvider } from "@depict-ai/js-ui";
import { YourDisplay } from "./display-types.ts"
import { en } from "@depict-ai/js-ui/locales";

const categoryProvider = new DepictCategoryProvider<YourDisplay>({
  merchant: "MERCHANT_ID",
  market: "MARKET",
  categoryId: "CATEGORY_ID",
  locale: en,
  listingType: "collection",
});

On subsequent navigations, update the values on the DepictCategoryProvider instance.

categoryProvider.categoryId = "t-shirts";
categoryProvider.listingType = /* Your listing type here */

​

React SDK:

<CategoryPage
  categoryId="t-shirts"
  productCard={ProductCard}
  listingType={/* Your listing type here */}
/>

It has two possible values:

• "category"
• "collection"

​

Listing type inference

If you do not specify the listing type, it will be inferred based on a hierarchy.

The hierarchy is the following:

1. Collection
2. Category

This means for a given category id e.g., my_id, a check will first be made to see if the collection my_id exists; if so, those products will be returned. If not, the products for the category my_id will be returned instead.

Not relying on inference can speed up the loading of your Depict products. If possible, you should specify a listing type value. How you detect the type will be unique to your store and setup. The following are some ideas:

• Checking the URL if it differs.
  E.g. location.pathname.includes("/collection/") ? "collection" : "category"
• Using a value from your CMS.
  E.g. cmsData.isDepictCategory ? "category" : "collection"