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 My Hello Retail.
hrq = window.hrq || [];
hrq.push([
"loadPage",
key,
options,
<callback>
]);
There are 3 options on how to implement Pages:
You can read more about the options here.
Argument | Description |
---|---|
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. |
format |
string (optional) | 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. |
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
hrq = window.hrq || [];
hrq.push([
"loadPage",
"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
hrq = window.hrq || [];
hrq.push([
"loadPage",
"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 */"
}
}