JavaScript UI Reference
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:
The merchant to use for the search.
The market to use for the search.
Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
Optional unique identifier of the current session. Only necessary when performing server side requests to Depict.
Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
A unique key for each instance, so that the state of each instance is kept separate.
The category id to show.
Whether this page is a collection or a category. If not specified, it will be inferred as described here
Category internationalisation (strings and price formatting).
The following table shows properties and methods of the DepictCategoryProvider class:
`ListingType
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:
The spacing between products.
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.
The product card function to use for rendering products.
The category provider instance.
Whether to show the breadcrumbs in the category page.
Whether to show the quicklinks in the category page.
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.
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 newCategoryId is undefined it means the category page has been closed/left, or you have provided undefined as the categoryId prop to the provider.
Function returned by contentBlockStore. See contentBlockStore.
BreadCrumbs function
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:
The category provider instance to show BreadCrumbs for.
QuickLinks function
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:
The category provider instance to show QuickLinks for.
Was this page helpful?