Monthly Archives: October 2019

Get an OPAC QR Code feature early

Coming in Koha version 19.11 in November is 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 device – with QR codes.

Screenshot showing QR Code feature

What if you don’t want to wait for you next upgrade to get this feature? It 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");
            }
        });

    }
});

That’s it! Open a bibliographic detail page in the OPAC and you should see a “Send to device” link in the sidebar menu.

Screenshot showing QR Code feature via customization

Scan the QR code with a smartphone to confirm that the code is working correctly:

Screenshot showing how the iPhone camera captures a QR code with a link