Use our JavaScript UI SDK to integrate a Depict Search UI into your website.

Full example

DepictSearchProvider class

The DepictSearchProvider class is what ties together all the search configuration for the different components. It is used to open the search modal.

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

Example:
import { DepictSearchProvider } from "@depict-ai/js-ui";
import { en } from "@depict-ai/js-ui/locales";
import { YourDisplay } from "./display-types.ts";

const searchProvider = new DepictSearchProvider<YourDisplay>({
  merchant: "MERCHANT_ID",
  market: "MARKET",
  searchPagePath: "PATH_TO_SEARCH_PAGE",
  locale: en,
});

The following table shows the DepictSearchProvider’s constructor properties, their types, and descriptions:

merchant
string

The merchant to use for the search.

market
string

The market to use for the search.

userId
string?

Optional unique identifier of a logged in user. Should be persistent across devices and sessions.

sessionId
string?

Optional unique identifier of the current session. Only necessary when performing server side requests to Depict.

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.

searchPagePath
string

The path to the search page.

urlParamName
string?
default: "'query'"

The name of the url parameter that will be used for the search query.

enableCategorySuggestions
boolean?
default: "false"

Whether to enable category suggestions in the search modal and search page.

locale
search_i18n?

An object containing translations and price formatting.

enableContentSearch
boolean
default: "false"

Enable or disable content search (seeing articles, FAQ, blog posts, etc in search results).

The following table shows methods of the DepictSearchProvider class:

openModal
(alignerElement?: HTMLElement) => void

A function used to open the search modal. alignerElement is an element the SearchModal should align too.

fetchSearchResults
(query: string, filters?: SearchFilter[], maxResults?: number) => Promise<YourDisplay>

A function used to fetch search results. pageURLCreator will be ran on the results before them being returned.

Generics:

  • OriginalDisplay: This generic represents the original display type that extends the Display type. Provide a type of your display here (e.g. YourDisplay). Ask Depict for the type of your display.
  • OutputDisplay: This generic represents the output display type (of the specified PageURLCreator) that extends either the ModernDisplay type or never. Unelss specified, it is determined based on OriginalDisplay. If OriginalDisplay extends ModernDisplay, then OutputDisplay will be ModernDisplayWithPageUrl<OriginalDisplay>, otherwise it will be never.

SearchPage function

The component displaying the search results page. See screenshot.

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

searchProvider
DepictSearchProvider

The search provider instance.

includeInputField
boolean?
default: "true"

Whether to show the search input field in the search page.

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.

onQueryChange
((newQuery?: string | undefined, oldQuery?: string | undefined) => void)?
default: "undefined"

Can be used to know when the search query is changed and update other content on the page accordingly. Will be called when the SearchPage is created, every time the query changes and when the SearchPage is destroyed. When newCategoryId is undefined it means the search page has been closed/left.

getContentBlocksByRow
Accessor<JSUIContentBlocksByRow>?

Function returned by contentBlockStore. See contentBlockStore.

SearchField function

A SearchField that can be used to make a query

import { SearchField, onExistsObserver } from "@depict-ai/js-ui";

onExistsObserver(".search-field-wrapper", (element) =>
  element.append(SearchField({ searchProvider }))
);

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

searchProvider
DepictSearchProvider<T>

The search provider instance.

alignerRef
HTMLElement?

A DOM element that the modal should be aligned to. If not provided, the modal will be aligned to the search field itself.