Configuring the category provider - Depict Documentation

Import the DepictCategoryProvider component from the installed package and create an instance of DepictCategoryProvider:

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

const categoryProvider = new DepictCategoryProvider<YourDisplay>({
  // Wondering what your MERCHANT_ID is? Depict engineers aren't very creative here, so you can probably guess. Odds are it's your company name or an abbreviation thereof, all lower case and only a-z or 1-9. Ask us if you can't get it working.
  merchant: "MERCHANT_ID",
  // Wondering what your MARKET(s) is/are? Check on demo.depict.ai
  market: "MARKET",
  // Your listingQuery, as per last page
  listingQuery: myListingQuery,
  // A JavaScript object that handles UI translations, price formatting as well as what language the backend responds with. Check what locales are available for you on demo.depict.ai, then import them from the `@depict-ai/js-ui/locales` subpackage. You can also extend them using spread.
  locale: en_GB,
  // sessionId: "USER_ID", // <- Optionally you can override the default session id used for personalization here
});

Optional configuration

Beyond merchant, market, listingQuery, and locale, the constructor accepts the following options:

Option	Type	Purpose
`sessionId`	`string`	Overrides the default session id used for personalisation and tracking
`metaData`	`Record<string, string>`	Custom metadata sent with each request; only needed if instructed by Depict
`uniqueInstanceKeyForState`	`string`	Required when creating more than one `DepictCategoryProvider` on the same page — see Limits and behavior below
`displayTransformers`	object	Adds `page_url` and extra data to displays — see display transformers
`imageResizer`	`(url: string, width: number) => string`	Overrides the default image resizing CDN: the function receives the original image URL and the desired width and returns the resized image URL. By default, Depict uses Cloudflare’s image resizer for non-Shopify images and Shopify’s built-in resizer for Shopify CDN images

Price formatting is customised through the locale object, the same way as on the search provider — see customising price formatting.

Limits and behavior

You can’t create more than one DepictCategoryProvider on the same page unless you give each one a unique uniqueInstanceKeyForState (for example "1", "2", …), because instance state lives in the URL and history.state and would otherwise collide.

Review the types or the reference to see what you can configure on the DepictCategoryProvider.

If you’re seeing a type error after providing YourDisplay, don’t fret and go to the next step

​Optional configuration

​Limits and behavior

Optional configuration

Limits and behavior