Quickstart

Get started with Depict Category Page UI React SDK by installing the package and importing the components you want to use in your app. For a complete list of components and their configuration, see React SDK components.

Prerequisites

Before proceeding, ensure you have sent your product data to Depict for processing and analysis. If you haven't already, Sending Data to Depict.

Installation

The Depict UI React package is available in the NPM registry. To install:

npm install @depict-ai/react-ui

yarn add @depict-ai/react-ui

The DepictProvider configuration

Import the DepictProvider component from the installed package and use this component to wrap your entire application as shown:

import { DepictProvider } from "@depict-ai/react-ui";
import { en } from "@depict-ai/react-ui/locales";

function App() {
  return (
    <DepictProvider
      merchant="MERCHANT_ID"
        market="MARKET_IDENTIFIER"
      locale={en}
    >
      <div className="app">
        ...
      </div>
    </DepictProvider>
  );
}

export default App;

📘

The locale property on the DepictProvider wrapper accepts a JavaScript object that handles UI translations and price formatting. Import our supported locales from the @depict-ai/react-ui/locales subpackage.

Import styling

To use our default styling, import the SDK styling into your SCSS file as follows:

@use "@depict-ai/react-ui" as plp-styling;

@include plp-styling.default-theme("category");

This includes all the default styling for all Depict Category Page UI components. You can also customize the SDK styling to fit your website's specifications. For more information, see Modify and Customize Styling.

Set up your category pages

After setting up dynamic routing to your category pages, you must set up and configure your category page results using the DepictCategoryPage component. Import the component from the Depict UI SDK and nest it into your application's category page component.

import { CategoryPage, EmbeddedNumProducts } from "@depict-ai/react-ui";
import ProductCard from "./ProductCard";

function Category() {
  return (
    <div>
     <CategoryPage
        categoryTitlePlugin={EmbeddedNumProducts}
        categoryId="ABCD1234"
        productCard={ProductCard}
        columnsAtSize={[[1, 500], [2, 820], [3, 1000], [4]]}
      />
    </div>
  );
}

export default Category;

• The productCard prop accepts your custom ProductCard component that receives and renders your category data.
• The columnsAtSize prop defines the number of product card columns displayed at each screen size.
• The CategoryId prop accepts the unique identifier for the current product category.
• The categoryTitlePlugin accepts a function that determines the layout of your category page.

The default value—CategoryTitle—displays the current category title above the product cards. Alternatively, you can opt not to show the category title above the product card by using the EmbeddedNumProducts function imported from the @depict-ai/react-ui SDK. This option is ideal for merchants who prefer to create their titles on the category page.

Add breadcrumb navigation

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.

import { BreadCrumbs } from "@depict-ai/react-ui";

const CategoryMain = () => {
  return (
    <>
      <BreadCrumbs />
    </>
  );
};

Add quick link 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.

import { QuickLinks } from "@depict-ai/react-ui";

const Carousel = () => {
  return (
    <>
      <QuickLinks />
    </>
  );
};

To find out more about the Category Page UI SDK's components and their usage configurations, see React SDK and components.

Debugging and Error reporting

The Depict React UI SDK monitors your application internally for error occurrence and automatically sends an event to Depict once this occurs. This reporting lets us quickly notice if something is broken in our SDK and offers insight into fixing bugs. This reporting is, however, suppressed by default on your browser. You can show these events to gain insights into the SDK's internals.

To view event logs from the SDK, run the following command in your browser console:

localStorage.debug = true

Similarly, you can disable sending these error reports to Depict by setting the value of the SENTRY environment variable to false, as shown:

REACT_APP_SENTRY=false

NEXT_PUBLIC_SENTRY=false