CODEWITHSUNDEEP
jqueryshopping-cart
Gui vieira
Gui vieira

Reputation: 354

Using jQuery, how would you calculate the final price of this shopping cart?

Using jQuery, how would you calculate the sum of the checked products data-price multiplied by the selected payment_options data-price-modifier and show the result inside the #final_price div?

<div class="products">
  <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
  <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
  <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
  <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
  <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
  <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

Upvotes: 0

Views: 1640

Answers (4)

rishabh dev
rishabh dev

Reputation: 1743

var sum = 0;
var modifier;
$('.products input').on('click', function() {
  var price = Number($(this).data('price'));
  if ($(this).is(':checked')) {
    sum += price;
  } else {
    sum -= price;
  }

  if(modifier)
    {
        updateTotal(sum*modifier);

    }
  else
    {
              updateTotal(0);

    }

});

$('.payment_options input').on('click', function() {
  
  modifier=Number($(this).data('price-modifier'));
  updateTotal(sum*modifier);
});

function updateTotal(val)
{
    $('#final_price').html(val);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="products">
  <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
  <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
  <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
  <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
  <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
  <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

https://jsbin.com/lerahi/edit?html,js,console,output See the demo in action

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

My proposal is:

$(function () {
  $('input[name="product_ids[]"], input[id^="payment_option_id_"]').on('change', function() {
    var total = 0;
    var datamodifier = 0;
    var selectedPM = $('input[id^="payment_option_id_"]:checked');
    if (selectedPM.length == 1) {
      datamodifier = parseFloat(selectedPM.attr('data-price-modifier'));
      $('input[name="product_ids[]"]:checked').each(function (index, element) {
        total += (parseFloat($(this).attr('data-price')) * datamodifier);
      });
    }
    $('#final_price').text(total);
  });
});
<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<div class="products">
    <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
    <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
    <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
    <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
    <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
    <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

Upvotes: 1

Andrew Brooke
Andrew Brooke

Reputation: 12173

Loop through the checked checkboxes, and sum their data-price attribute multiplied by the checked radio button's data-price-modifier attribute.

$('.products input, .payment_options input').on('change', function() {
  var sum = 0;
  $('.products').find('input:checked').each(function() {
    sum += $(this).data('price') * $('.payment_options').find('input:checked').data('price-modifier');
  });
  $('#final_price').text(sum);
});

Fiddle

Upvotes: 3

code_monk
code_monk

Reputation: 10148

Like this:

"use strict";

var calculateTotal = function(ev){

  var subTotal=0, tax=0, total=0;
  $('.products input:checked').each(function(){
    subTotal += parseInt( $(this).data('price') );
  });
  tax = parseFloat($('.payment_options input:checked').data('priceModifier')) || 0;
  total = subTotal * tax;
  $('#final_price').text( total );
  
};

$('input').on('change',calculateTotal);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="products">
  <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
  <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
  <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
  <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
  <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
  <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

Upvotes: 3

Related Questions