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:
- unit price ($4.35)
- 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.