Putting Patron “Savings” 0n Slips and Notifications in Koha 3.12

1. Putting Patron “Savings” 0n Slips and Notifications in Koha 3.12 Learn the HTML code to have the estimated amount of money your library patrons save by using the Library to borrow the items instead of purchasing the items themselves.

2. Writing HTML • To be completely honest, I don’t know the first thing about HTML. • I don’t even know what the letters in “HTML” stand for. • So if you have even a basic understanding and notice that I have written some unnecessary code or have used some incorrect terminology during this presentation, please do not be offended. • Before we jump into the code, it would be helpful to have some backstory.

3. From a patron checkout tab in the Staff/Client Portion of Koha

4. The “price” of the item is located and totaled on the checkout screen

5. Where the “price” comes from • The price that is totaled on the checkout screen comes from an item’s record • This column totals the cost of the item for which the material usually sells for, not the discounted prices we receive from some vendors. • “Cost, Normal Purchase Price” not “Cost, replacement price” • If no amount is entered in the “Cost, normal purchase price” field, the item will be considered being worth $0.00

6. The Edit Item Screen • Here is the field on each item’s record that Koha uses for the “price” field on the Checkout screen. • For instance, if you were to go to Barnes and Nobles and buy Samantha Shannon’s Bone Season, it would cost you $24.00

7. Using “price” to estimate a patron’s savings on receipts and emails • From any screen go to “Tools” > “Notices & slips”

8. Choose The Slip You Want To Edit • I recommend editing either a • Quick Slip or a regular slip first

9. Modify Notice • Be sure that the “HTML message” box is checked. • If this box is not checked, your slip is going to look exactly like this.

10. Editing HTML So That This…

11. The Process • This is a relatively easy, three step process for adding the HTML code and script to your existing slips and receipts so that the amount of money your library patrons are saving by using the Library shows up on their receipts. • I will be explaining everything first on a printed receipt to give you a clearer idea of where the locations for the code/script needs to be added. • I will not be going into what the HTML code/script means, because I will sound stupid. All that I can tell you is that it works works.

12. Step 1: The Invisible Price • Every library’s slips are going to look different, but the important part of this step is going to be adding code in the item details area of an item on your slip.

13. Step 1: The Invisible Price • Here are the details for an item as they appear on our printed receipts. • When we get into the HTML, here is where we will be adding this code: <input class="price" type="hidden" value="<<items.price>>" /> • I have chosen to add this code in between the title, Still Life With Woodpecker, and the barcode number • This may sound confusing, but it will make a lot more sense once you see it in the HTML side of this presentation.

14. Step 2: Adding the Estimated Savings Language • In this area, you will be adding the phrasing you would like to use for the savings your patrons have earned by using the library, followed by this code: $<span id="sum">0</span> $<span id="sum">0</span>

15. Step 3: The Script • The location for the next step might sound a little confusing, but it is probably the easiest of all the steps. • This is going to be the HTML script that will be the function for totaling the invisible price from Step 1, in the estimated savings area from Step 2.

16. Step 3: The Script

17. Step 3: The Script • By adding that exact script to the end of your receipts you will have completed the function necessary for having the estimated savings appear on your receipts. • This is a long script, so instead of trying to manually enter it into your notices/slips yourself, just copy and paste it with your mouse and save yourself a lot of time and energy. • I will include the script in plain text at the end of this presentation so that you can copy and paste all of the code/script.

18. Modifying your Slips with HTML • Now that we have a basic idea of the locations for the HTML code, let’s return to Tools > Notices & Slips > (Choose which slip you would like to modify- I suggest either “ISSUESLIP” or “ISSUEQSLIP” first) and Edit

19. Step 1: The Invisible Price (HTML) • Here is the same receipt we were working with before, only this time we are viewing the HTML. • As I mentioned in Slide 13, you will need to add the invisible price code into the checked-out item’s details

20. Step 1: The Invisible Price (HTML) • In between the “<<biblio.title>>” and “<<items.barcode>>” you will want to add the following HTML code: <input class="price" type="hidden" value="<<items.price>>" />

21. Step 2: Adding the Estimated Savings Language (HTML) • Once you have decided on the wording you would like to use for your library, Write it on the slip followed by “<br />” then you can add the corresponding HTML code

22. Step 2: Adding the Estimated Savings Language (HTML) • Take your individual branch’s wording and add the following HTML code: $<span id="sum">0</span> $<span id="sum">0</span> $$$

23. Step 3: The Script (HTML) • This is the easiest part of the entire process • Simply copy and paste the script to the end of your receipt • Like the cost of an item in the item details area of the receipt, this is hidden code and will only be visible when modifying this slip.

24. Step 3: The Script (HTML) • This tiny, little text is the exact HTML script that you need to copy and paste into your slips in order for this feature to work • The script had to be this size so it would fit on one slide • Even though the text is very small, you can copy and paste this script and put it right into your slips as you modify them. <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>

25. Submitting and Checking Your Work • Once you have entered all three parts of the code, hit the “Submit” button • Return to a patron checkout screen: Home > Circulation > Checkouts > Patron Name (Barcode)

26. Submitting and Checking Your Work • Print the slip that you just edited to make sure the HTML code/script is functioning correctly