The examples on this site are currently tested to work on Phalcon V3.4 and Phalcon Devtools V3.2 Some issues may arise when using later versions.

Please get in touch or post a comment below the post if you encounter a problem.

In the last post we created an order form based on the data which was stored in the cart from the session. On the form we included buttons which should allow us to increase or decrease the quantity of a particular item or remove the item altogether. In this post we will add jQuery and javascript code which will dynamically adjust the quantities of items on the form.

An important part of our original requirement is that the form would show the total quantity of items and the total cost of the order before the user submits. This poses an additional challenge when making the form dynamic as the total quantity and total cost of the order will also have to be re-calculated dynamically.

The following jQuery code which will be called when the add button is clicked should be added to the bottom of the view /app/views/product/checkout.phtml

<script>
$(".btn.add").click(function () {
	var i=$(this).val();
	var row = $(this).closest('tr');
	var qty = row.find('.qty');
	var quantity = parseInt(qty.val());
	quantity = quantity + 1;
	var ttlQty = parseInt($('#ttlQty').text());
	ttlQty = ttlQty + 1;
	$('#ttlQty').text(ttlQty);
	$(qty).val(quantity);
	/*calcTotal();*/
});
</script>

You can now reload your page to try out this functionality. This code should work fine but it's useful to remember that when you are attempting to debug your javascript code in Google Chrome you can right-click on the page and select "inspect". Then click on the console tab and your error will be highlighted. In fact there are a wide range of developer tools and consoles available for debugging javascript that are worth exploring. I mention this here for those readers who may not be very familiar with javascript or jQuery.

Notice the last line of the function is commented out. This is to allow for the inclusion of call to a function calcTotal() which will re-calculate the total items and cost at the bottom of the page. The jQuery $('.btn.add').click() allows the function to be called whenever any of the elements which have that class are clicked. The function will then figure out which row was clicked through use of the jQuery closest() function.

Add the following code containing another jQuery function below your code for the add function but inside the script tags

$(".btn.subtract").click(function () {
	var i=$(this).val();
	
	var row = $(this).closest('tr');
	var qty = row.find('.qty');
	var quantity = parseInt(qty.val());
	if (quantity>1) {
		quantity = quantity - 1;
		var ttlQty = parseInt($('#ttlQty').text());
		ttlQty = ttlQty + 1;
		$('#ttlQty').text(ttlQty);
	}
	$(qty).val(quantity);
	/*calcTotal();*/
});

This code is almost identical to the code for the add button with the inclusion of a provision to make sure the quantity does not go below 1. The button to remove the row is already working as this code was included inline.

In order to display the total quantity and the total order cost we need to include place holders on the page for these values. Add the following html at the bottom of the view.

<table class="table table-bordered">
	<TR><Td>Total Quantity:</TD><td><div id="ttlQty"><?php echo $ttlQty;?></div></td></TR>
	<TR><Td>Total Cost:</TD><td><div id="ttlCost"><?php echo $ttlCost;?></div></td></TR>
</table>

The following javascript function will loop through each of the lineitems and recalculate the total cost of the order based on the new quantity. Add it below your other two jquery functions inside the script tags.

function calcTotal() {
	var total=0;
	$('.qty').each(function(i){
		var qty = $(this).val();
		var price = parseInt($('.price').eq(i).text());
		total = total + (price * qty);
	});
	$('#ttlCost').text(total);
}

Now you can un-comment the last line of the add function and the subtract function to allow the total cost of the order to be re-calculated every time an item is added to or subtracted from the order.