Format options for numbers

[Kaye_McClendon]

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.

[adrianfraguela]

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_McClendon]

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? 

[SanfordWhiteman · Accepted solution]

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.

[Kaye_McClendon]

Thanks, Sanford!

[Kaye_McClendon]

By the way, just curious... if I didn't want the 2 decimal places to appear in the format, how would I modify the script?

[SanfordWhiteman]

By the way, just curious... if I didn't want the 2 decimal places to appear in the format, how would I modify the script?

---

Good programming practice is to make the code extensible — as opposed to hard-coding one outcome and removing the previous one.

So, to accommodate US Currency with no decimal, flesh out the code as such:

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"),
        majorFormat  = formattableWrapper.getAttribute("data-format-major"),
        minorFormat = formattableWrapper.getAttribute("data-format-minor");

    var majorFormatter,
        finalFormatter,
        formattedValue;
    
    switch(majorFormat){
      case "currency-us":
        majorFormatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
        break;
      default:
        majorFormatter = { format(value){ return value;} };
    }
    
    switch([majorFormat,minorFormat].join("-")){
      case "currency-us-nodecimal":
        finalFormatter = { format: function(value){ return majorFormatter.format(value).slice(0,-3); }  };
        break;
      default:
        finalFormatter = majorFormatter;
    }
    
    formattedValue = finalFormatter.format(origValue);
    formattableWrapper.textContent = formattedValue;
  });
});
    

Then set the options on the element:

<span data-formattable-value="62487" data-format-major="currency-us"></span>
<span data-formattable-value="62487" data-format-major="currency-us" data-format-minor="nodecimal"></span>

[Kaye_McClendon]

Thanks so much!