JavaScript SDK
Note: As stated in the introduction, it is important that you bundle the product recommendations to ensure no duplicates.
Get Product Recommendations
Example
Response
Do a JavaScript based function call, to get recommendations data to work with in your frontend.
1
ADDWISH_PARTNER_NS.api.recom.load(boxes, options, callback(id, content, tag), error_callback(product_box_id, tag, error_code));
Copied!
Argument
Description
boxes
A dictionary with recommendations box ids as keys and a `filter dictionary as values.
options
A options Object.
callback
A callback function that will be called once for every box that loaded successfully.
error_callback
An error callback function that will be called for every box that failed loading.
General example:
1
ADDWISH_PARTNER_NS.api.recom.load(
2
// boxes:
3
{
4
"1234567890abcdef12345678": { // This is the recommendation box ID, which is unique to your API call. Contact Hello Retail support to get your own ID.
5
// Here, you can specify filter values, and other options for this specific recommendation box.
6
// For example, you can specify the url of another product to get recommendations for:
7
url: "http://www.example.com/jeans/extra-fancy-jeans-004.html",
8
9
// You can specify filter values like this:
10
hierarchies: [["Shoes", "Woman"]], // If needed you can specify multiple hierarchies, like for instance [["Shoes", "Woman"], ["On sale", "Woman"]]
11
brand: "Nike"
12
13
},
14
"abc4567890abcdef12345432": {} // You can leave the options empty, to use the default url (the current page)
15
},
16
17
// options:
18
{
19
format: "json", // You can specify either "json" or "html" as format (default is html)
20
tag: "this can be anything" // The tag is optional.
21
},
22
23
// The following function will be called once for each set of boxes requested above.
24
// The value of "id" will correspond to the recommendation box ID requested.
25
// Data will contain ether rendered html or a list of products.
26
function(id, data, tag) {
27
// Do something with data here.
28
// 'tag' will be "this can be anything" from above.
29
}
30
);
Copied!
Example for upsell recommendation boxes:
For upsell recommendation boxes, we will need the information from the cart. In the example below, you will need to send a list of URLs for the parameter urls (note the plural version compared to the example above). If you would like to state to the customer how much they need to buy to get free shipping, you should also pass the price as an argument.
1
ADDWISH_PARTNER_NS.api.recom.load(
2
// boxes:
3
{
4
"1234567890abcdef12345678": { // This is the recommendation box ID, which is unique to your API call. Contact Hello Retail support to get your own ID.
5
// Here, you can specify filter values, and other options for this specific recommendation box.
6
// For example, you can specify the url of another product to get recommendations for:
7
urls: ["http://www.example.com/jeans/extra-fancy-jeans-004.html", "http://www.example.com/dress/pretty-dress-001.html"],
8
price: 13213.33,
9
// You can specify filter values like this:
10
hierarchies: [["Shoes", "Woman"]], // If needed you can specify multiple hierarchies, like for instance [["Shoes", "Woman"], ["On sale", "Woman"]]
11
brand: "Nike"
12
13
},
14
"abc4567890abcdef12345432": {} // You can leave the options empty, to use the default url (the current page)
15
},
16
17
// options:
18
{
19
format: "json", // You can specify either "json" or "html" as format (default is html)
20
tag: "this can be anything" // The tag is optional.
21
},
22
23
// The following function will be called once for each set of boxes requested above.
24
// The value of "id" will correspond to the recommendation box ID requested.
25
// Data will contain ether rendered html or a list of products.
26
function(id, data, tag) {
27
// Do something with data here.
28
// 'tag' will be "this can be anything" from above.
29
}
30
);
Copied!
JSON:
1
[
2
{
3
"title": "Product 1",
4
"url": "https://example.org/product-1",
5
"currency": "EUR",
6
"imageUrl": "https://example.org/images/product-1.jpg",
7
"oldPrice": 0,
8
"onSale": false,
9
"price": 79.0,
10
"productNumber": "prod-1",
11
// ...
12
},
13
{
14
"title": "Product 2",
15
"url": "https://example.org/product-2",
16
"currency": "EUR",
17
"imageUrl": "https://example.org/images/product-2.jpg",
18
"oldPrice": 150.0,
19
"onSale": true,
20
"price": 59.0,
21
"productNumber": "prod-2",
22
// ...
23
}
24
// ...
25
]
Copied!
HTML:
1
<div>
2
<div class="product">
3
<a href="https://example.org/product-1">
4
<h1>Product 1<h1>
5
<img src="https://example.org/images/product-1.jpg">
6
<span class="price">EUR 79</span>
7
</a>
8
</div>
9
<div class="product">
10
<a href="https://example.org/product-2">
11
<h1>Product 2<h1>
12
<img src="https://example.org/images/product-2.jpg">
13
<span class="price">EUR 59</span>
14
<span class="old-price">EUR 150</span>
15
</a>
16
</div>
17
</div>
Copied!
Last modified 10mo ago
Copy link