Template Rendering in Account Pages

Majority of account pages are rendered using only Jinja and intervened with JS if necessary after the page is launched. Some pages, however, are first rendered with Jinja and then the template in question is once again rendered with JS during later updates. These pages are:

• Address (/account/address)

• Favourites (/account/favourite-products/)

Default Templates​

As in other pages that use a combination of Jinja and JS render methods, the Address and Favourites pages contain files titled default_templates.html. These files include "default template", which is to be rendered with JS.

<a class="d-block" href="%\_url\_%">
  %\_img\_%
</a>

The %_url_% and %_img_% fields in this example are rendered with RegExp match on JS and sent to the page to be rendered again. The function that carries out this action is as follows:

export const templateRenderer = (templateHtml, data) => {
  let result = templateHtml;

  for (const key in data) {
    result = result.replace(new RegExp(`%\_${key}\_%`, 'g'), data[key]);
  }

  return result;
};

// Usage
const favouriteProduct = templateRenderer($('#FavoriteProductItem').html(), data);

In the above example;

1. the parameter templateHtml should refer to the entire template (HTML) to fill in. For instance, the .html() method can be used with jQuery.

2. the parameter data should be an object and the keys of this object should match the %_key_% fields in the template. Therefore, the matching value of key is inserted in the relevant field in the template and is rendered.