simple JavaScript template implementation, when we don't want import handlebar

template.js

// support if, liquid style filter 

var orderInfoTemplate = '\
<div class="section">\
  <h2>Order Status</h2>\
  <div class="order-number">Order Number: <strong>{order_number}</strong></div>\
  <div class="order-status">Status: <strong>{fulfillments[0].status}</strong></div>\
  <div class="tracking-number">Tracking Number: {#if fulfillments[0].tracking_number}<strong><a href="{fulfillments[0].tracking_url}">{fulfillments[0].tracking_number}</a></strong> by {fulfillments[0].tracking_company}{/if}</div>\
</div>\
<div class="section">\
  <h2>Shipping Address</h2>\
  <ul class="shipping-address">\
    <li><label>Name</label> <span class="value">{shipping_address.name}</span></li>\
    <li><label>Address</label> <span class="value">{shipping_address.address1}{#if shipping_address.address2}<br>{shipping_address.address2}{/if}</span></li>\
    {#if shipping_address.company}<li><label>Company</label> <span class="value">{shipping_address.company}</span></li>{/if}\
    <li><label>Province</label> <span class="value">{shipping_address.province}</span></li>\
    <li><label>Country</label> <span class="value">{shipping_address.country}</span></li>\
    <li><label>Zip</label> <span class="value">{shipping_address.zip}</span></li>\
  </ul>\
</div>\
<div class="section">\
  <h2>Products</h2>\
  <ul class="products"></ul>\
</div>';

var productTemplate = '\
<li class="product">\
  <a href="/products/{title | handleize}">\
    <span class="title">{title}</span>\
    <span class="product-number">#{product_id}</span>\
    <span class="price">${price}</span>\
  </a>\
</li>';

var templatefilters = {
  handleize: function(s) {
    return s.toLowerCase().replace(/[^\w\d]/g, '-').replace(/\-+/g, '-');
  }
}

function getValue(object, path) {
  var filters = [];
  var objPath = path;
  if (path.indexOf('|') > -1) {
    filters = path.split('|').map(function(f) { return f.trim(); });
    objPath = filters.shift().trim();
  }
  var pathArr = objPath.split('.');
  var result = object;
  var pathIndex = null;
  var pathKey;
  try {
    for (var i = 0; i < pathArr.length; i++) {
      if (/\[(\d+)\]$/.test(pathArr[i])) {
        pathIndex = pathArr[i].match(/\[(\d+)\]$/).pop();
        pathKey = pathArr[i].replace(/\[(\d+)\]$/, '');
      } else {
        pathIndex = null;
        pathKey = pathArr[i];
      }
      result = result[pathKey];
      if (pathIndex !== null) {
        result = result[pathIndex];
      }
    }
    for (var i = 0; i < filters.length; i++) {
      result = templatefilters[filters[i]](result);
    }
  } catch(e) {
    result = '';
  }
  return result;
}

function render(template, data) {
  return template
    .replace(/\{([^\#\/][^\}]+)\}/g, function(match, p1) {
      return getValue(data, p1);
    })
    .replace(/\{\#if\s*([^\}]+)\}(.*?)\{\/if\}/g, function(match, p1, p2) {
      if (!getValue(data, p1)) {
        return '';
      } else {
        return p2;
      }
    });
}
  
var orderInfoHTML = render(orderInfoTemplate, data.order);
var productsHTML = data.order.fulfillments[0].line_items.map(function(product) {
  return render(productTemplate, product);
}).join('');