GuidesAPI Reference
Home

API client

Fetching recommendations with our API wrapper

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 nameDescription
merchantThe name of the merchant (e.g. "acme")
marketThe market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
typeThe type of the recommendations, e.g. front_page, after_basket, related`, etc. Ask Depict for this.
categoryIdWhen requesting recommendations for a category page, pass the id of the category page as categoryId.
productIdWhen requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as productId
productIdsWhen 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
headersOptional 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",
});