Format options for numbers

Forum|Forum|5 years ago
June 17, 2020
1 reply
4894 views

Hi,

I'm trying to display a currency amount on a landing page using a token. The field value currently looks like 15000, but I'd like it to display $15,000 on the landing page with the current symbol and comma. Is there anyway to auto-format the token? If not, is there another option I can try to achieve my goal?

Thanks.

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SanfordWhiteman

Put the value into an attribute of a special <span> rather than outputting it directly:

<span data-formattable-value="{{Lead.Your Field}}" data-format="currency-us"></span>

Add this in a <script>:

document.addEventListener("DOMContentLoaded", function(e){
  var arrayify = getSelection.call.bind([].slice);

  arrayify(document.querySelectorAll("[data-formattable-value]"))
  .forEach(function(formattableWrapper){
    var origValue = formattableWrapper.getAttribute("data-formattable-value"),
        format  = formattableWrapper.getAttribute("data-format");

    var formatter,
        formattedValue;
    
    switch(format){
       case "currency-us":
          formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
          formattedValue = formatter.format(origValue);
          break;
    }
    formattableWrapper.textContent = formattedValue;
  });
});

Note this solution isn't general-purpose as it only covers your particular formatting need (despite the fact that it might seem quite complex to you!). It doesn't have locale-awareness except for US, for example. And in general, when you need to reformat tokens, it's best to not put them inline at all (not even in a special data- attribute) but rather to hold them in a hidden <datalist> element.

adrianfraguela

Level 3

Hey Kaye,

The tokens will return exactly what's in them. You could use a Javascript library like http://autonumeric.org/ to do the trick.

Kaye_McClendonAuthor

Level 3

Thanks. I tried reading the documentation for the JS library, but it's a bit over my head. We don't have a developer on staff.

Is there any other way I can format the value in Marketo so it allows dollar sign and comma?

SanfordWhitemanAccepted solution

Level 10

Put the value into an attribute of a special <span> rather than outputting it directly:

<span data-formattable-value="{{Lead.Your Field}}" data-format="currency-us"></span>

Add this in a <script>:

document.addEventListener("DOMContentLoaded", function(e){
  var arrayify = getSelection.call.bind([].slice);

  arrayify(document.querySelectorAll("[data-formattable-value]"))
  .forEach(function(formattableWrapper){
    var origValue = formattableWrapper.getAttribute("data-formattable-value"),
        format  = formattableWrapper.getAttribute("data-format");

    var formatter,
        formattedValue;
    
    switch(format){
       case "currency-us":
          formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
          formattedValue = formatter.format(origValue);
          break;
    }
    formattableWrapper.textContent = formattedValue;
  });
});

Note this solution isn't general-purpose as it only covers your particular formatting need (despite the fact that it might seem quite complex to you!). It doesn't have locale-awareness except for US, for example. And in general, when you need to reformat tokens, it's best to not put them inline at all (not even in a special data- attribute) but rather to hold them in a hidden <datalist> element.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded