Skip to content

Pages templates

Managed pages use a Design. Multiple pages can use the same design. Each design consists of three parts.

  1. A liquid-based HTML template that is used to turn the found products, filters and sorting options into HTML
  2. CSS that is injected into the page before the returned HTML is injected
  3. JavaScript that is executed just when the first request to load the page has returned and the page content has been injected

HTML

When implementing the HTML template the following variables are available in the liquid context

Variable Description
baseFilters A list of filters that were applied in the context part of the API call. These are typically used to select the products from the current category. They are applied before any filters the customer has selected in the UI. Each filter is a string in the format fieldname:value
firstLoad Boolean indicating if the API call was made with the firstLoad parameter set to true
products The list of found products. Each item is a product object. See description in the introduction
filters The available filtering options that have been configured on My Hello Retail. This object is identical to the one available in search templates and is explained in the documentation for search templates
sorting The available sorting options that have been configured on My Hello Retail. This object is identical to the one available in search templates and is explained in the documentation for search templates

CSS

The CSS template does not have any variables available in the liquid context. However the CSS template can define its own variables using the liquid assign syntax or the custom Hello Retail assign syntax explained in the introduction.

JavaScript

The javascript is executed once the loaded page has been injected into the DOM. The javascript can import functionality from the available JavaScript modules.

When the Pages JavaScript executes, the following variables are defined in the current scope:

Variable Description
container The DOM element that the page has been injected into
data The raw data returned from the API call that did the initial page load
page An object containing the idand key of the page being loaded
_ The root object from helloretail.js (deprecated)