Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

using HTL + Handlebars + displaying $ sign

Avatar

Level 8

I am moving one of our in-house apps that uses Coldfusion to Adobe AEM. the pages extensively use handlebars for displaying content.

my problem is that I have this code in my HTML: ${{fees-here}}

I want to display the $ sign before the price but this causes the HTL processor/parser errors.

I am using one of 2 options at the moment:

  • remove the dollar sign
  • put a space in between $ and the curly braces (trying not to use this as horizontal space is a premium in the app)

I am hoping that there's a 3rd option so that the prices are displayed as "$344" (without any spaces in between the $ sign and the price).

Thank you!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@jayv25585659,

Have you tried passing the dollar integer value into a handlebars helper?

// something like below.;;

 

Handlebars.registerHelper('currency', function(amount, options) {
  if (typeof(amount) === 'string') { amount = options.contexts[0].get(amount); }
  var rounded = Math.round(amount * 100);
  var dec = rounded % 100;
  var whole = rounded / 100 - dec / 100;
  var decStr = '' + dec;
  return '$' + whole + '.' + decStr + ( decStr.length < 2 ? '0' : '');
});

 

var t = Handlebars.compile("{{currency amount}}");

t({amount: 0.15});

 

 

Original post -> https://gist.github.com/kayleg/5215127

 

Checkout this other post -> https://stackoverflow.com/questions/14492098/handlebars-function-to-format-currency-with-javascript

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

@jayv25585659,

Have you tried passing the dollar integer value into a handlebars helper?

// something like below.;;

 

Handlebars.registerHelper('currency', function(amount, options) {
  if (typeof(amount) === 'string') { amount = options.contexts[0].get(amount); }
  var rounded = Math.round(amount * 100);
  var dec = rounded % 100;
  var whole = rounded / 100 - dec / 100;
  var decStr = '' + dec;
  return '$' + whole + '.' + decStr + ( decStr.length < 2 ? '0' : '');
});

 

var t = Handlebars.compile("{{currency amount}}");

t({amount: 0.15});

 

 

Original post -> https://gist.github.com/kayleg/5215127

 

Checkout this other post -> https://stackoverflow.com/questions/14492098/handlebars-function-to-format-currency-with-javascript

Avatar

Community Advisor

@jayv25585659  - I would recommend to make use of Sling Models to manipulate any kind of data and use it in HTL then.