Monday Minutes: Digital Library Card

by Jessie Zairo on Aug 8, 2022

In this week's Monday Minutes, Kelly and Jessie talk about adding a digital library card to the Koha OPAC. The digital library card can be added to the OPAC with jQuery. This will display the digital card on the patrons' account page.

Code to add

// start e-card jQuery

if ($('#usermenu').length) {

let eborrowernumber = $('.loggedinusername').attr('data-borrowernumber');

let api_url = '/api/v1/patrons/' + eborrowernumber;

$.getJSON(api_url, function(data) {

$('#menu').prepend('<li><button type="button" style="background:#63b7e6;" class="btn btn-primary" data-toggle="modal" data-target=".ecardModal">View your e-card</button></li>');

$('body').append('<div class="ecardModal modal hide" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5><h3>Your Library eCard</h3> </div><div class="modal-body"> <div id="library_ecard"> <div id="name_photo"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <span><h3>' + data.firstname + ' ' + data.surname + '</h3></span> </div><div style="text-align: center;"> <svg id="barcode_placeholder"></svg> </div></div></div><div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div></div></div>');

$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/barcodes/JsBarcode.codabar.min.js')
.done(function(script, textStatus) {

var element = document.getElementById("barcode_placeholder");

JsBarcode(element, data.cardnumber, {

width: 2,

height: 75,

displayValue: true,

});

})

});

}

// end e-card jQuery