JavaScript SDK

This function is a wrapper around the REST API for fetching page content. It will automatically add the Hello Retail ID of the user in the current session.
The SDK consists of a single function that allows loading page content for a page with a specific key.
You can find the Pages key under the configuration for Pages inside MyHelloRetail.
Pages Configuration
ADDWISH_PARTNER_NS.api.pages.load(key, options, callback(data));
There are 3 options on how to implement Pages:
You can read more about the options here.
Description
Example
Response
Argument
Description
key
Key The key of the page to load.
options
An options object (described below).
callback
A callback function that will be called once the page content is loaded. The callback will receive a data object containing the response.
Available Options:
Field
Type
Description
id
integer (optional)
ID of a version of a page. Only needed if you want to fetch the Draft version of a page.
url
string (optional)
URL of the page on your site that this page will be added to. Used for tracking and to find overrides for that specific URL.
layout
boolean
Landing pages may contain a layout that defines static content that can be shown around the dynamic content. This parameter specifies if that layout should be returned or not.
format
string (optional) - options are html or json
Specify the format in which the API will return the results. html and json are accepted values, default value is HTML.
params
object
Parameters that are passed as input. Currently it only support the "filters" parameter that will be used as base filters for the returned products.
trackingUserId
string
Hello Retail ID of the user visiting your site. This is used to apply personalization and for tracking purposes. Optional.
firstLoad
boolean
Indicates if this is the first render of the page. This allows the template to only return some content on the first load. Views of the page will only be tracked if firstLoad is true.
products.fields
string[]
Product fields to return when using the JSON format.
products.start
integer
Starting point when fetching products for the page.
products.count
integer
Number of products to return from the starting point.
products.filters
string[]
List of filters to filter products by.
products.sorting
string[]
List sorting options.

HTML Format

ADDWISH_PARTNER_NS.api.pages.load(
"abcdefgh1234hy",
{
"id": 256,
"url": "/shoes",
"layout": true,
"firstLoad": true,
"format": "html", // it is optional, html is default value
"params": {"filters": {"hierarchy": ["women", "shoes"]}},
"products": {
"start": 0,
"count": 50,
"filters": [
"brand:The Brand",
"price:[10 TO 10]"
],
"sorting": [
"title DESC"
]
}
},
(data) => {
// inject the returned html into the page
// execute the returned javascript to setup interactive parts of the page
// inject the returned css
}
);

JSON Format

ADDWISH_PARTNER_NS.api.pages.load(
"abcdefgh1234hy",
{
"id": 256,
"url": "/shoes",
"layout": true,
"firstLoad": true,
"format": "json", // it is optional, html is default value
"params": {"filters": {"hierarchy": ["women", "shoes"]}},
"products": {
"start": 0,
"count": 50,
"fields": ["title", "price"], // fields of product to consider, by default it will consider all fields
"filters": [
"brand:The Brand",
"price:[10 TO 10]"
],
"sorting": [
"title DESC"
]
}
},
(data) => {
// inject the returned html into the page
// execute the returned javascript to setup interactive parts of the page
// inject the returned css
}
);

HTML Format

{
layout: "<div>some html from the layout<div class=\"helloretail-pages-products\"></div> some more html</div>", // Layout from the beefree editor. Not included for category pages
firstLoad: true,
products: {
start: 0,
count: 50,
total: 500,
html: "<div>Products rendered using the design selected for the page</div>",
result: [], // this will be empty in case of html in format
javascript: "/* javascript from the design selected for the page */",
style: "/* css from the design selected for the page */"
}
}

JSON Format

{
layout: "<div>some html from the layout<div class=\"helloretail-pages-products\"></div> some more html</div>", // Layout from the beefree editor. Not included for category pages
firstLoad: true,
products: {
start: 0,
count: 50,
total: 500,
html: "",
result: [
{
"title": "abc",
"url": "url/url.com",
"imgUrl": "imgurl/url.com",
"currency": "DKK",
"priceLowered": true,
"description": "sample description",
"keywords": "ab, gh, dd",
"inStock": true,
"productNumber": "product1234",
"variantProductNumbers": [],
"price": 233.44,
"previousPrice": 500.23,
"score": 7.0
},
...
],
javascript: "/* javascript from the design selected for the page */",
style: "/* css from the design selected for the page */"
}
}