Getting started

Start by installing the Depict UI package:

npm i @depict-ai/ui

yarn add @depict-ai/ui

You can then import the ´fetchDepictRecommendations´ function:

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

The fetchDepictRecommendations function takes an object of options as its argument, and returns a promise of an array. Below, you can see the different possible parameters of the options argument.

Parameter name	Description
`merchant`	The name of the merchant (e.g. "acme")
`market`	The market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
`type`	The type of the recommendations, e.g. `front_page`, `after_basket,` related`, etc. Ask Depict for this.
`categoryId`	When requesting recommendations for a category page, pass the id of the category page as `categoryId`.
`productId`	When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as `productId`
`productIds`	When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as `productIds`
`headers`	Optional headers to send to the Depict API. This could be authentication for example. 99% of integrations can leave this unset.

🚧
It is important that you make the correct choice out of: no id, categoryId, productId and productIds (choose ONE) so read the documentation carefully.

📘
This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.

When no id is provided (none out of categoryId, productId and productIds) general recommendations will be fetched. This is for, for example, the frontpage where generally popular products get returned.

If you only get recommendations when specifying the wrong id type (i.e. you only get basket recommendations if you provide a single product id while the recommendations should be based on everything in the basket) please ask Depict to re-configure the endpoint for you.

Example: Fetching frontpage recommendations

const front_page_recs = await fetchDepictRecommendations({
    merchant: "oscarjacobson",
    market: "sv-se",
    type: "front_page",
});

Example: Fetching recommendations for a product page

const product_page_recs = await fetchDepictRecommendations({
    merchant: "stronger",
    market: "se",
    type: "product_normal",
    productId: "hero-sports-bra-luna",
});