ember-math-helpers

Published on Sep 28, 2016

The ember-math-helpers addon is a handy set of Handlebars helpers that lets you do common math operations in your template.

This screencast combines it with the ember-let addon to improve our shopping cart experience.


Links

Code

<div class="cart">
  //....
  {{let subtotal=cart.total}}
  Subtotal: ${{subtotal}}
  <br>
  {{let taxes=(mult subtotal 0.08)}}
  Taxes: ${{taxes}}
  <br>
  {{let shipping=(add 2.99 (mult 1.29 cart.monsters.length))}}
  Shipping: ${{shipping}}
  <br>
  {{let total=(add subtotal taxes shipping)}}
  Total: ${{total}}
  {{let centsTotal=(mult 100 total)}}
  {{stripe-checkout
    name="Cute Monsters Inc."
    description="Buy cute monster plushies."
    amount=centsTotal
    action="processStripeToken"
  }}
</div>

Transcript

Ember-math-helpers is an addon that lets you do basic math in your template. So it has adding, dividing, all the things you would want. When you combine that with some of the other addons such as ember-let, that can be pretty powerful. So we’re going to combine those and we’re going to get a lot done just in your handlebars helpers. So the page we’re going to be looking at is the shopping cart that we set up a couple of episodes ago. So here we have it adding up everything, all of these monsters, and showing the total, and then putting that total into here. But we’re not taking into account taxes and shipping. So how can we add those?

Well one option is to add it to the JavaScript, so make more computed properties. And that option can definitely work, but another option is using our two addons to do it here in the template. So we’ll install both of those and then get started. We’ll start by changing this from total to subtotal, and then we’ll go ahead and define subtotal using let, and put it right here. Then we’ll calculate the taxes, and the taxes will be the subtotal times, so we’re going to use the mult helper, times 0.08. That’s an 8% tax. And then we’ll display the taxes here. Make sure of course to put a dollar sign with it. Then we’ll calculate the shipping. So the shipping will be a little bit more complex. We’re going to be adding two things together. First is just a 2.99 flat rate for any order, and then for each item in the order it’s going to be 1.29. So we’re going to multiply that times the number of monsters in the cart. And we’ll display that shipping with our dollar sign. Let’s go ahead and take a look at what we’ve done.

So we have all of these different items and they’re displaying and we’re defining them right in the template. Now you can definitely take this too far, and you might argue that we have already taken this too far, but let’s keep going. This is about how you can do stuff, not whether you should do stuff.

Alright, now let’s calculate the total. So we’re going to let the total equal the sum of everything so far, so the subtotal and the taxes and the shipping. And notice that some of these such as add can take as many as you want. We could have just two or we could keep on going. So then we’ll display the total. And here we go.

We have done quite a bit of work and we haven’t had to touch JavaScript yet. How much farther can we go? Let’s see. So here let’s try to put in the amount. So we’ll put in the total and we’ll see if that translates over. We hit ‘Pay with card’ and it looks like it hasn’t translated over, and that’s because these lets are scoped within this div. So once the div ends, all the lets disappear. But of course we can get around that with some quick thinking, and there we go. Of course we will have to do another quick let to do the total in the cents, which we’ll just multiply it by 100, and we’ll put the centsTotal here, and there we go. We can pay the total with our card.

Now what about this? We’re calculating total in the cart already. That’s something that we created previously. Is there a way to do that just in our template? So here you notice we have the sum of an array of prices. So we know that the add helper, it can take as many items as we want. Can we add in all of the prices of the monsters? Well, we could get the mapBy helper from ember composable helpers, so we’ll map the price onto the monsters in the cart, and let’s see how this works. We may just... Oh-oh, it seems to have converted them into strings. So it’s just taking the strings of the numbers and putting them together.

We could if we really wanted to, find a way around this, but I’m pretty sure we’ve done enough already. This is already way too much to happen just in a template. But it did give a demonstration of what’s possible when you’re using ember-math-helpers and combining it with something like ember-let. And if you’re interested, there are a lot of more cool ember-math-helpers, and it shows in this handy table what their equivalent is in JavaScript.

Subscribe to our mailing list