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.

Pages Configuration

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 */"
    }
}