​
DepictCategoryProvider class

The DepictCategoryProvider class is what ties together all the configuration for the different components.

If you want to dynamically change some properties, for example the market, please let us know and we’ll help you out.

The following table shows the DepictCategoryProvider’s configuration properties, their types, and descriptions:

merchant
string

The merchant to use for the search.

market
string

The market to use for the search.

locale
Locale

Locale object imported from @depict-ai/js-ui/locales. Determines

  1. The translations for the UI
  2. The locale to request from backend
  3. The currency formatting used on the frontend

You have to check demo.depict.ai to see which locales the Depict backend accepts for your specific merchant. The different objects exported from @depict-ai/js-ui/locales have a backend_locale_ property equivalent to their name, so either import the locale with the correct name (recommended) or just set the backend_locale_ property to the correct value.

You can modify or create your own locale object as long as it’s the same format as the ones in @depict-ai/js-ui/locales.

sessionId
string?

Optionally you can override the default session id used for personalization here. This is the ID that will be used to tie together the different tracking events for a user.

metaData
Record<string, string>?

Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.

uniqueInstanceKeyForState
string?

A unique key for each instance, so that the state of each instance is kept separate.

listingQuery
({ type?: "listingId" | "externalId", id: string })?

The unique identifier for the current listing page that will be sent to depict to get the products to display. type can be "listingId" or "externalId"..

displayTransformers?
DisplayTransformers

DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way. See Creating page URLs and enriching product data.

The following table shows properties and methods of the DepictCategoryProvider class:

listingQuery
string

Use this to dynamically update the listingQuery.

​
CategoryPage function

The component displaying the category listing, including but not limited to sorting and filters. See screenshot.

The following table shows the CategoryPage’s configuration properties, their types, and descriptions:

gridSpacing
(string | { horizontal: string; vertical: string; })?
default: "2%"

The spacing between products.

columnsAtSize
[number, number?][]?
default: "[[2, 901], [3, 1024], [4]]"

How many columns to show at each media size. For example, [[2, 901], [3, 1024], [4]] means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.

productCard
(display: YourDisplay | null) => HTMLElement | HTMLElement[]

The product card function to use for rendering products.

categoryProvider
DepictCategoryProvider

The category provider instance.

showBreadcrumbs
boolean?
default: "true"

Whether to show the breadcrumbs in the category page. If layout is set to "slider" or "slider-without-filters" this will be set to false by default

showQuicklinks
boolean?
default: "true"

Whether to show the quicklinks in the category page. If layout is set to "slider" or "slider-without-filters" this will be set to false by default

layout
("grid" | "slider" | "slider-without-filters")?
default: "\"grid\""

The layout used for listing the products.

  1. "grid" is the default and shows the products in a grid
  2. "slider" shows the products in a slider and has default false for showBreadcrumbs and showQuicklinks
  3. "slider-without-filters" is the same as "slider" but does also not render any sorting or filter buttons
categoryTitlePlugin
typeof CategoryTitle

categoryTitlePlugin is an optional plugin that can be used to customize the title-part of the category page. The default is CategoryTitle which shows the title of the category and the number of products within. EmbeddedNumProducts (exported from @depict-ai/js-ui) on the other hand only displays the number of products within a category and tries to fit this between the sort and filter button on mobile, if the text length of the localisation permits.

onListingQueryChange
((newQuery?: ListingQuery | undefined, oldQuery?: ListingQuery | undefined) => void)?
default: "undefined"

Can be used to know when the CategoryPage is navigated to a new category and update other content on the page accordingly. Will be called when the CategoryPage is created, every time a navigation is performed between categories and once the CategoryPage is destroyed. When newQuery is undefined it means the category page has been closed/left, or you have provided undefined as the listingQuery prop to the provider.

getContentBlocksByRow
Accessor<JSUIContentBlocksByRow>?

Function returned by contentBlockStore. See contentBlockStore.

Breadcrumb navigation helps users know their location in the category tree by providing a trail back to the root category. By default, the CategoryPage component contains breadcrumb navigation. You can disable its default breadcrumb navigation by setting the showBreadcrumbs property to false. To add a custom breadcrumb navigation, import the BreadCrumbs component from the SDK and nest it in the desired location on your DOM tree.

BreadCrumbs

Example:

import { BreadCrumbs, onExistObserver } from "@depict-ai/js-ui";

onExistObserver(".breadcrumbs-insertion", () =>
  BreadCrumbs({ categoryProvider })
);

Options:

categoryProvider
DepictCategoryProvider

The category provider instance to show BreadCrumbs for.

The QuickLinks component shows all available product categories in a carousel for easy navigation. By default, the CategoryPage component contains quick link navigation. You can disable its default quick link navigation by setting the showQuicklinks property to false. To add a custom quick link navigation, import the QuickLinks component from the SDK and nest it in the desired location on your DOM tree.

QuickLinks

Example:

import { QuickLinks, onExistObserver } from "@depict-ai/js-ui";

onExistObserver(".quicklinks-insertion", () =>
  QuickLinks({ categoryProvider })
);

Options:

categoryProvider
DepictCategoryProvider

The category provider instance to show QuickLinks for.

Was this page helpful?

React UI ReferenceJavaScript UI Reference