narendra narendra - 6 months ago 100
PHP Question

After click the select option update product price shows wrong in opencart

When i click on selected option product price update shows wrong.
Here is my code



<div class="container">
<div class="row">
<div class="col-md-6">Initial Price: <span id="thisIsOriginal" class="">$45,000.00</span></div>
<div class="col-md-6">Total: <span id="total">$45,000.00</span></div>
</div>
<div class="row">
<select class="optionPrice" name="select-1">
<option value="">Please Select</option>
<option data-price="2,000.00" value="20">+$2,000.00</option>
</select>
</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.optionPrice').change(function () {
var OriginalPrice = $('#thisIsOriginal').text();
var OriginalCurrency = OriginalPrice.substring(0, 1);
OriginalPrice = OriginalPrice.substring(1);
var total = 0;
$('.optionPrice').each(function () {
if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
console.log($('option:selected', this).attr("data-price"));
total += parseFloat($('option:selected', this).attr('data-price'));
}
});
var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
$('#total').text('$' + newTotal.toFixed(2));
});
});
</script>





How to solve this issue.I want after select the price shows 47,000.

Answer

The problem with your code is,

  • Your price contains , inside it. So after parseFloat() the values after the comma is getting truncated. You need to remove the commas before using parseFloat.

Changes need on the following lines,

 total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

and

var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);

Updated Fiddle

  $('.optionPrice').change(function() {
    var OriginalPrice = $('#thisIsOriginal').text();
    var OriginalCurrency = OriginalPrice.substring(0, 1);
    OriginalPrice = OriginalPrice.substring(1);

    var total = 0;
    $('.optionPrice').each(function() {
      if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
        console.log($('option:selected', this).attr("data-price"));
        total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

      }
    });
    var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
    $('#total').text('$' + newTotal.toFixed(2));
  });

Edit for Getting comma separated value,

$('.optionPrice').change(function() {
  var OriginalPrice = $('#thisIsOriginal').text();
  var OriginalCurrency = OriginalPrice.substring(0, 1);
  OriginalPrice = OriginalPrice.substring(1);
  var total = 0;
  $('.optionPrice').each(function() {
    if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
      console.log($('option:selected', this).attr("data-price"));
      total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));
    }
  });
  var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
  newTotal = numberWithCommas(newTotal);
  $('#total').text('$' + newTotal + ".00");
});

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Comments