My E-Commerce website is created using HTML, JavaScript, and PHP.
On the product details page, users can add products to their cart, so I show the total cart value.
I need the total amount displayed in a decimal number format (10,2).
Currently, when a user clicks "Add to cart" and the product price is $12.00, only the number 12 is shown in the Counter div.
<span>
<a href="cart.php" class="text-white">
<i class="fa fa-shopping-cart p1" data-count="10" data-currency="€" 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>
When the "insert" button is clicked, the existing total and current product price are added together. If the cart is empty, the p1 element does not display anything, so I want it to always show zero when empty or zero. For a product priced at $12.00, it should display 12. If the price is $12.50, then 12.50 should be displayed.
I want to ensure that the number displayed is always in decimal format and include the currency symbol using a data attribute.
I have resolved the issue with displaying decimals thanks to @Simone, but I have not been able to find a solution for displaying the currency symbol before the value using a data attribute.