SOLVED

Format options for numbers

Go to solution
Kaye_McClendon
Level 3

Format options for numbers

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.

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Format options for numbers

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.

View solution in original post

7 REPLIES 7
adrianfraguela
Level 3

Re: Format options for numbers

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
Level 3

Re: Format options for numbers

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
Level 10 - Community Moderator

Re: Format options for numbers

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
Level 3

Re: Format options for numbers

Thanks, Sanford!

Kaye_McClendon
Level 3

Re: Format options for numbers

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
Level 10 - Community Moderator

Re: Format options for numbers

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
Level 3

Re: Format options for numbers

Thanks so much!