Running qty total on single add to cart page

[jont]

With multiple products on a single add to cart page is there anyway to have a running quantity total at the bottom based on the values input against each?

Issue in working the javascript is separate <form> tags for each product with unique names and each <input> tag having a unique ID.

The page is to have say 6 products, each with a different colour set in a cut down format. The user can input the quantity required against each colour. There needs to be 2500 minimum so would be nice to show people how many more they have to add to get to the minimum quantity.

In v10 but same for v9 and v8.

[NormanRouxel]

jQuery is great for this sort of thing.

Duplicate your Product List Layout and amend that new layout to add the following to the End Of List code.

<input type="button" value="Calculate total" onclick="calctot();"> Total ordered <span id="qtytotal">0</span>
<script type="text/javascript">
	// calculate and display running total
	function calctot(){
		var minqty = 2500;
		var qty = 0;
		// sum values of all input fields beginning with Q_
		$(":input[name^='Q_']").each(function(){qty += ($(this).val() - 0);});
		// display what's ordered and needed
		var neededmessage = (qty < minqty) ? '<font color="red"> (' + (minqty - qty) + ' more needed)</font>' : ''
		$("#qtytotal").html(qty + neededmessage);
		// show / hide Single Add to Cart depending on quantity
		if ( qty < minqty )
			{
			$("[name='SINGLEADD']").hide();
			}
		else
			{
			$("[name='SINGLEADD']").show();
			}
	}
	
	// set it all going when the DOM is ready
	$(document).ready(function(){
		// attach our calculation to each Quantity fields onKeyUp for live counting
		$(":input[name^='Q_']").keyup(function() {calctot();});
		// bonus code - prevent Enter key from submitting form
		$(":input[name^='Q_']").keypress(function(e) {return (e.which != '13');});
		// sum what may already be there
		calctot();
		});
</script>

And load jQuery (if you're not already using it).

Now just use this new layout for the Product List Layout on such pages.

[jont]

I want your babies xxxx

The only mod I made was to enable the running total to change as the quantities are input on the fly rather than having to lose focus on the input field

$(":input[name^='Q_']").change(function() {calctot();});

to

$(":input[name^='Q_']").keyup(function() {calctot();});

The running total then changes as you are typing.

Cheers Norman

[NormanRouxel]

I didn't have time this morning to test in various browsers so went for the nice safe change function.

However keyup is so much more fun so I've amended my post to use that.

You could also add code to inhibit the SINGLEADD button unless the grand total is sufficient.

[jont]

Nice idea. I did this clunkily by adding id="SINGLEADD" to the single add to cart layout and then beneath the exisiting line above

$("#qtytotal").html(qty + neededmessage);

add in

if (qty < minqty)
{
 document.getElementById("SINGLEADD").className += " hideSINGLE";
}
			
if (qty == minqty)
{
 document.getElementById("SINGLEADD").className += " showSINGLE";
}

and in the actinic.css add in:

.hideSINGLE {
display: none;
}

.showSINGLE {
display: block;
}

no doubt there is a more elegant way but may be of use to others as a starter

[NormanRouxel]

jQuery can do this without you needing to add an ID or any CSS.
after:

		$("#qtytotal").html(qty + neededmessage);

Put:

		// show / hide Single Add to Cart depending on quantity
		if ( qty < minqty )
			{
			$("[name='SINGLEADD']").hide();
			}
		else
			{
			$("[name='SINGLEADD']").show();
			}

P.S. Your code (post #5) would fail if qty became > minqty without any onKeyUps. E.g. when the page was reloaded with the form values in place. Replace
if (qty == minqty)
with just
else

[NormanRouxel]

I made some improvements to my post #2 and also added in the Cart Button show / hide code, so it's all in one post.