Show your patrons the true value of your library!

by Kyle Hall on Sep 4, 2012

Tell your patron’s how much they have saved by using the library! Here is an example checkout slip that uses jQuery to total the values of the item prices, and puts that total at the bottom of the slip.

What’s Happening

First, we are storing the price in the slip, but hidden from view. I’ve highlighted this change in red.

Next, we need to add the sum to the slip for printing. The actual value is placed within a span tag so we can change the value dynamically. This change is highlighted in blue.

Lastly, we need to sum up those hidden price fields, and put that value in the new span tag. The code to do this is highlighted in green.

And that’s how we add a total value for items on a checkout slip! I hope this has been interesting, informative, and inspirational. The ability to use JavaScript and jQuery in Koha’s printable slips gives us a lot of power and flexibility when it comes to defining what we want to show on a slip, and how we want to show it!

<h3><<branches.branchname>></h3>

Checked out to <<borrowers.firstname>> <<borrowers.surname>> <br />

 (<<borrowers.cardnumber>>) <br />

<<today>><br />

<h4>Checked Out</h4>
<checkedout>
 <p>
 <<biblio.title>> <br />
 Barcode: <<items.barcode>><br />
 Date due: <<issues.date_due>><br />
 <input class="price" type="hidden" value="<<items.price>>" />
 </p>
</checkedout>

You saved a total of $<span id="sum">0</span> by using the library to borrow these items.<br/>

<h4>Overdues</h4>
 <overdue>
 <p>
 <<biblio.title>> <br />
 Barcode: <<items.barcode>><br />
 Date due: <<issues.date_due>><br />
 </p>
 </overdue>

<hr>

<h4 style="text-align: center; font-style:italic;">News</h4>
 <news>
 <div class="newsitem">
 <h5 style="margin-bottom: 1px; margin-top: 1px"><b><<opac_news.title>></b></h5>
 <p style="margin-bottom: 1px; margin-top: 1px"><<opac_news.new>></p>
 <p class="newsfooter" style="font-size: 8pt; font-style:italic; margin-bottom:
 1px; margin-top: 1px">Posted on <<opac_news.timestamp>></p>
 <hr />
 </div>
 </news>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
 calculateSum();
});

function calculateSum() {

 var sum = 0;

 //iterate through each textboxes and add the values
 $(".price").each(function() {

 //add only if the value is number
 if(!isNaN(this.value) && this.value.length!=0) {
 sum += parseFloat(this.value);
 }
 });

 $("#sum").html(sum.toFixed(2));

}
</script>