Отображение 2 пользовательских элементов атрибута данных в div. Пример: валюта и сумма

Question

У меня есть сайт электронной коммерции, построенный на HTML, JavaScript и PHP.

На странице сведений о продукте пользователь может добавить продукт в корзину, поэтому я отображаю общую сумму стоимости корзины.

Я хочу отображать десятичное число всегда (10,2) в формате.

В настоящее время мой код работает с минимальными вещами. При нажатии кнопки «Добавить в корзину», если цена товара равна 12,00, счетчик показывает только 12.

<span>
<a href="cart.php" class="text-white">
<i  class="fa fa-shopping-cart p1"  data-count="10" data-currency="&euro;" id="total"></i>
</a>
</span> 

 .p1[data-count]:after{
  position:absolute;
  right:1%;
  top:1%;
  content: attr(data-count);
  font-size:10px;
  padding:.2em;
  line-height:1em;
  color: white;
  background:#21468b;
  text-align:center;
  width: 100%;
  font-weight:normal;
}

<script>
var theTotal = '0';
var ProductSellingPrice = '12.00'

$('#insert').click(function(){

   theTotal = Number(theTotal) + Number(ProductSellingPrice);

    $('#total').attr('data-count', theTotal);

});


</script>

Таким образом, при нажатии на вставку добавляется существующая общая и текущая цена товара. Если в корзине нет товаров, то p1 не отображает никакого значения, поэтому всегда нужно отображать ноль, если он пуст / ноль. Если цена продукта 12,00, то отображается только 12. Если цена продукта равна 12.50, то отображается 12.50.

Я хочу, чтобы он всегда отображал десятичное число, а также символ валюты с использованием атрибута данных.

Проблема отображения десятичной дроби решается @Simone, я не могу найти ответ для отображения валюты до значения, используя атрибут данных.

Answer 1

Если вы хотите 12,00, а не 12, вы должны использовать Number.prototype.toFixed ()

Таким образом, вы должны конвертировать все единичные итоговые продукты (количество * цена единственнаяитого) в число с плавающей запятой, и когда вы наберете общую сумму, возьмите число и сделайте следующее:

Number.parseFloat(total).toFixed(2); // two decimal

Пример:

var quantity = 10;
var price = 11;
var tot = parseFloat(quantity * price).toFixed(2);
console.log(tot); // "110.00"