0

I'm working on a Product Detail page that allows users to choose the number of products to purchase. I currently have the quantity dial working properly, but I need to piggyback on such feature to update a table that displays the total purchase charge.

Here's the DEMO on JSFiddle

The table that needs to be dynamically updated as Users increase or decrease the quantity of product using the - or + buttons:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="pricing-summary">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Qty.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Unit Price</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Discount</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Total</div>
  </div>
  <div class="clearfix pt8"></div>
  <div id="pricing-breakdown">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$quantity</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">4.35</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$0.40</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">$3.95</div>
  </div>
</div>

As part of the implementation, I need to be able to control 2 different variables:

  1. unit price ($4.35)
  2. discount percentage (10% = (unit price x discount))

Controlling these 2 variables will allow generating the Discounted cost ($3.95), the Discount ($0.43) and the Total (Quantity X Discount Cost).

I would appreciate any help resolving this issue.

1 Answers1

0

I have updated a copy of your fiddle demo. Please see if it fits your requirement: http://jsfiddle.net/m4n8xe3r/75/

Solution below:

$(document).ready(function() {

  var quantitiy = 0;
    var unitPrice = 4.35;
  var discount = 0.1;

    var updatePriceTable = (quantity) => {
    totalPrice =  Number(quantity * unitPrice).toFixed(2);
    totalDiscount = Number(totalPrice * discount).toFixed(2);
    finalPrice = Number(totalPrice - totalDiscount).toFixed(2);
    $('#totalQuantityElem').text(quantity);
    $('#totalPriceElem').text(totalPrice);
    $('#totaldiscountElem').text(totalDiscount);
    $('#finalPriceElem').text(finalPrice);
    $('#totalPriceHeaderElem').text(totalPrice);
    $('#finalPriceHeaderElem').text(finalPrice);
  }


  $('.quantity-right-plus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) + 1;
        $('#quantity').val(quantity);
        updatePriceTable(quantity);
  });

  $('.quantity-left-minus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) - 1;
    if (quantity > 0) {
      $('#quantity').val(quantity);
      updatePriceTable(quantity);
    }  
  });

});
ImGroot
  • 796
  • 1
  • 6
  • 17
  • This is almost what I was expecting. The experience in the table is correct, but the unit price (was $4.35 Save 10%) and discounted price below it ($3.92) should remain unchanged. This is the reference that the User will have on the normal and discounted prices. As the User changes the quantity, then the values change, just as you have it right now. – Marcelo Martins Sep 12 '18 at 21:58
  • I quickly tweaked the script to the following experience: http://jsfiddle.net/UXEngineer/79xvzn84/. How do we get the quantity value to start at 0, and also how do we allow Users to get the quantity down to 0, as well? – Marcelo Martins Sep 12 '18 at 22:04
  • Fixed here: http://jsfiddle.net/79xvzn84/16/. To start with 0 or 1 quantity, you can update the min & value attributes of this element (value means inital value): `` User can bring the quantity to 0 by clicking on `-` button. – ImGroot Sep 12 '18 at 23:09
  • Awesome! Thank you very for your help! – Marcelo Martins Sep 13 '18 at 19:12
  • Hey Swatantra, I tried adding an additional feature to the design that display the number of item(s) added to the cart, but only after clicking the button. Please, view it here: http://jsfiddle.net/UXEngineer/79xvzn84/. How do I display the number of added items after the user clicks the button as shown in the jsfiddle? – Marcelo Martins Sep 13 '18 at 21:41
  • I didn't think you were going to come back! I've looked at the JSFiddle above and it is exactly what I was looking for! You're AWESOME! Thanks! – Marcelo Martins Sep 17 '18 at 14:26
  • After building the UI, I decided to move features around and I've added the number of items to the checkout button. In addition, I also added the total cost for items added to the cart, but despite my efforts to follow your lead I keep getting a NaN error. Can you help with this last feature? Here's the JSFIDDLE: http://jsfiddle.net/UXEngineer/79xvzn84/60/ – Marcelo Martins Sep 19 '18 at 15:05
  • I think these problems aren't related to the original post. You should post another question explaining exactly how your new problem is different than here. – ImGroot Sep 19 '18 at 17:39