Koha version 19.11 in November has come up with a new QR code feature in the OPAC. You’ll be able to turn on a system preference to enable the display of a QR code on the OPAC’s bibliographic detail page. The user can scan this QR code with their smartphone and get the URL of the page they’re viewing. This feature is detailed in Bug 23566, Continue on the device – with QR codes. This can be added entirely via Koha’s custom CSS and JavaScript system preferences!
Add this to your OPACUserCSS system preference:
a.show_qrcode {
padding-left:35px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALAgMAAADUwp+1AAAACVBMVEUzban//8z///8fhy3sAAAAK0lEQVR42mNgUGBg0BJawKAkpACmGQQYGKaGRgBpEJ+BQUmgA0gDFSkxAAB3qQUjA3ioDgAAAABJRU5ErkJggg==) no-repeat scroll 11px center transparent
}
#qrcode {
padding:1em;
}
Add this to the OPACUserJS system preference:
jQuery.cachedScript = function( url, options ) {
// https://api.jquery.com/jQuery.getScript/
// Allow user to set any option except for dataType, cache, and url
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax( options );
};
$(document).ready(function(){
if( $("#opac-detail").length > 0 ){ // Run this JS only on the bibliographic detail page
$.cachedScript( "https://cdn.jsdelivr.net/npm/kjua@0.6.0/dist/kjua.min.js" ).done(function( script, textStatus ) {
// If the QR Code-generating JS library loads successfully, add the code to the page
$("#action").append("<li><a class=\"show_qrcode\" href=\"#\">Send to device</a><div id=\"qrcode\" class=\"hidden\"></div></li>");
var qrcode = kjua({
ecLevel: "H",
render: "canvas",
rounded: 100,
size: 150,
text: location.href,
});
if (qrcode) {
document.getElementById("qrcode").appendChild( qrcode );
}
});
// Add the click handler for the new "Send to device" menu item
$("body").on("click", ".show_qrcode", function(){
var qrcodeImg = $("#qrcode");
if( qrcodeImg.hasClass("hidden") ){
qrcodeImg.removeClass("hidden");
} else {
qrcodeImg.addClass("hidden");
}
});
}
});
References: https://www.myacpl.org/koha/get-an-opac-qr-code-feature-early/
