Simulating Calculated Fields in Order Porter Templates for QuosalSell

At my work we use a product called QuosalSell to produce quotes that are delivered to customers via a web service. The quotes are viewed in customised templates that are essentially HTML documents with a few product-specific tags inside them that are substituted with data from the quote, and conditionally display various quote elements depending on some conditions.

This is all fine and dandy until i came upon a need to show only the Price+GST (tax) price on line items. There was apparently no “tag” for that value and the knowledgeable Quosal support confirmed that I was essentially out of luck unless I was willing to make significant compromises.

Woe is me. I was a bit annoyed for a few hours. Then it occurred to me that because I had access to the template that I could insert a bit of javascript that runs in the browser that will take the old price, perform a calculation on it, and replace it within the page.

Bwahaha the end user will never know.

So here it is. Try at your own risk, although it works for me just fine. You can very easily break an Order Porter template so I suggest backing it up before you change anything. You can also assume that this will be totally unsupported by Quosal and certainly unsupported by me.

My suggestion would be to create a new copy of an Order Porter template group so you don’t mess up any existing templates. Edit the “EntryPoint” document.

Place the following code in a sensible place AFTER the fields you want to modify. Right down the bottom is probably not a bad idea.

<script>
var x = document.getElementsByClassName('exprice');
var i;

for (i = 0; i < x.length; i++) {
  var exPrice = x[i].innerHTML
  incPrice = Number(exPrice.replace(/[^0-9\.]+/g,"")) * 1.1; 
  var incPrice = incPrice.toFixed(2);
  if (incPrice.length > 6) {
    incPrice = incPrice.slice(0, incPrice.length-6) + "," + incPrice.slice(incPrice.length-6);
  }
  x[i].innerHTML = "$" + incPrice ;
}
</script>

So what happens here? This bit of code executes in the browser and searches for all the elements with a class name of “exprice” and returns them as a collection. The collection is iterated through – and the value is read in, stripped of boring characters, multiplied by 110%, rounded to two decimal places and then formatted with a dollar sign and possibly commas. It is then output back into the “exprice” class and the user knows no difference.

So then… all that is left is to place classes around values in the template that you want to change.

This is a sample of a line that was interesting to me:

<td class="right">#Item.PrintedPrice</td>

We simply need to wrap a DIV tag around the value I want to replace and give it the right class name:

<td class="right"><div class="exprice">#Item.PrintedPrice</div></td>

Save the template and upload template metadata to Order Porter. Create or modify a template ensuring that you choose the new template group on the Publish page.

I hope this helps someone!