Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

INPUT: Total Price Counter for One or More Quantity Inputs

Scot Ranney • December 17, 2023


Easily count up totals based on class .count-this and data-option-price attribute.

1. Add count-this class to quantity input.

<input type="number" class="count-this" data-option-price="&mvt:some_price;">

2. Create displays anywhere on the page using class auto-price-value

<span class="auto-price-value"></span>

3. Add script to page:

<script>
  $('.count-this').on("change", function () {
	var sum = 0;
	$('.count-this').each(function () {
		//sum of all price values of this into price
		qty = $(this).val();
		if (qty > 0) {
			sum += +$(this).attr('data-option-price') * qty;
			//sum = sum * qty;
		}	   
	});
	var formatter = new Intl.NumberFormat('en-US', {
		  style: 'currency',
		  currency: 'USD',
	});
	formattedsum = formatter.format(sum);
		  $('.auto-price-value').html(formattedsum);
	});
</script>

Option for Simple Input Total Counter

Using the input value and class only. This will add them up and display a total each time the input is changed. If they enter 8, 3, and 1, the total will be 12.

Load jquery before script.

<input type="number" class="hd-qty" name="num1">
<input type="number" class="hd-qty" name="num2">
<input type="number" class="hd-qty" name="num3">
<p>Total input: <span id="hd-num">0</span></p>


<script>
$(".hd-qty").on("input", function() 
{
  var sum = 0;
  $('.hd-qty').each(function() {
	sum += Number($(this).val());
  });
  $('#hd-num').html(sum);
});
</script>

https://www.scotsscripts.com/mvblog/totals-price-counter.html

mvkb_js