How to add tax and deals to a sales price in JavaScript

Question

My project is to create a website that sells pens, pencils and erasers. I need help calculating the tax and adding deals and shipping cost. If the live in Saskatchewan there is no shipping cost, the tax is 5% and if they spend at least $30 they get $5 off after taxes. If they live in Alberta there is a $2 shipping cost, the tax is 5% and there is no deals. If they live in Manitoba there is a $2 shipping cost, the tax is 6% and there is no deals.

I have tried if statements but nothing was showing up. How can I debug this?

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  var order_total = 0

  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
    var price = parseFloat(priceElement.innerText.replace('$', ''))
    var quantity = quantityElement.value
    order_total = order_total + (price * quantity)
  }

  order_total = Math.round(order_total * 100) / 100
  document.getElementsByClassName('cart-total-price')[0].innerText = '$' + order_total

}

<select id="province">
  <option value="saskatchewan">Saskatchewan</option>
  <option value="alberta">Alberta</option>
  <option value="manitoba">Manitoba</option>
</select>

I expect it to show everything put together

I can’t show everything related because there would be too much code. Could you please just help me with the tax — , Jun 12 '19 at 04:12

score 1 · Accepted Answer · edited Jun 23 '19 at 19:00

1

I see you're asking a conceptual question.

I would approach this by adding in data attributes to your select drop down. Then grabbing the values with a simple function on select change and integrating that into your price equation.

You can read about data attributes here: https://www.w3schools.com/tags/att_global_data.asp and https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

1) Add data attributes

<select id="province">
  <option value="saskatchewan" data-shipping-cost="0" data-tax="0.05" data-deal-limiter="30" data-deal-coupon="5'>Saskatchewan</option>
  ...
</select>

2) Grabbing selected values (please note camelCase access pattern for data attr's)

document.getElementById("province").addEventListener("change", function() {

    const select = document.getElementById("province"),
          selectedProvince = select.options[select.selectedIndex],
          shippingCost = selectedProvince.dataset.shippingCost ,
          tax = selectedProvince.dataset.tax,
          dealLimiter = selectedProvince.dataset.dealLimiter,
          dealCoupon = selectedProvince.dataset.dealCoupon;

});

3) Integrating into your equation

You can do this part yourself; I teach fishing, I don't give fish. (Hint: involves an if statement).

edited Jun 23 '19 at 19:00

halfer

19,824
17
99
186

answered Jun 12 '19 at 06:15

Michael Paccione

2,467
6
39
74

1

Thanks so much this really helped – Jun 13 '19 at 21:46
if (selectedProvince === alberta) { shippingCost = "2" tax = order_total * 0.05 dealLimiter = "0" dealCoupon = "0" document.getElementById("cart-subtotal-price").value = order_total + shippingCost + tax - dealCoupon } if (selectedProvince === manitoba) { shippingCost = "2" tax = order_total * 0.06 dealLimiter = "0" dealCoupon = "0" document.getElementById("cart-subtotal-price").value = order_total + shippingCost + tax - dealCoupon } – Jun 14 '19 at 03:51
this is what I've just added but this is now making my website not function anymore any thoughts – Jun 14 '19 at 03:51
What you've written is fundamentally contrasting with the approach I've given above. Above I've intertwined the HTML and the data. If you want to abstract it out so the data and logic is seperated from the structure then go ahead with your approach. – Michael Paccione Jun 14 '19 at 21:49
If you are using my event listener above the selectedProvince is actually the selected option... to truly get the name of the selected province it would be selectedProvince.value ... apologies if that was confusing. – Michael Paccione Jun 14 '19 at 21:50
Feel free to mark as the answer. If you have any other questions I can likely answer them :) – Michael Paccione Jun 16 '19 at 00:41
I’ve made a new question showing all my code since I can’t seem to get it to work. And I’ve come to the conclusion that it’s the last few sections of JavaScript if you could give some input that would be great. – Jun 20 '19 at 19:58
Can you include the link to the new question please. – Michael Paccione Jun 21 '19 at 02:03

How to add tax and deals to a sales price in JavaScript

1 Answers1