We were recently working on a small-scale ecommerce site where our client wanted to be able to show prices both including and excluding VAT. Due to shipping rules and the methods we were using to calculate the cart totals, it would have been impractical to have both prices stored in the product database. So instead we turned to the ever reliable jquery javascript library.
I wrote the following script to calculate and display the including VAT price using the already available excluding VAT price as the input. The jquery code required was simply…
$(document).ready(function(){
$("div.prod").each(function(i)
{
var calcvat = Number(($(this).find("div.excvat").html())* 1.15).toFixed(2);
$(this).find('div.incvat').html(calcvat);
});
});
Because we had pages where multiple products were visible (e.g. cateogry pages), it wasnt as straightforward as simply attaching the calculation event to a specific div, so instead the function had to be written in a way that it would traverse the document and find all instances of the class “prod” and perform the calculation on the “excvat” span within each of them. The result is then fed into the empty span “incvat” within each product box. So the HTML is pretty minimal;
Our shopping cart / checkout page calculates vat based on the cart totals, so we only really needed this function on category and product pages.
Only a few lines of code, but took a good 30 minutes to get it working the way I wanted it to, and to make sure it wasn’t producing a crazy amount of decimal points.
