Quickstart
Learn how to integrate Depict Category Page UI into your React applications.
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
DepictProvider
configurationImport 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 theDepictProvider
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 customProductCard
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
Updated 9 days ago