Customizing your additional search options

Note: This article applies to Koha 3.x installations. Nicole recently submitted a patch which add custom further searches to Koha 3.2.

On every record’s detail page there is list of links in the right-hand sidebar for searching for that title on a few other sites: Worldcat, Google Scholar, and Bookfinder. search-for-this-title-in These were chosen as reasonably generic choices for a wide audience. The trouble is, generic doesn’t work for everyone: For many libraries these links aren’t appropriate. They’d like to be able to take out one or more of them and/or add their own. Unfortunately these links are hard-coded in the template. Until someone contributes the time or money to develop a solution, we have to resort to JavaScript trickery to accomplish it.

JavaScript Trickery

jQuery to the rescue. If we use FireBug to inspect the page we can see that the “box” the links are in has a unique ID. That’s perfect as a place to tell jQuery to start looking.

Click for full screenshot

Click for full screenshot

Let’s start by adding a custom link to this menu. We start our JavaScript by targeting the #further div. Since we want to add an item to the list contained within the #further div, we’ll add that to the selector:

$(document).ready(function(){
$("#further ul")...
});

And since we want to append some additional HTML, we’ll use append():

$(document).ready(function(){
$("#further ul").append("<li><a href="http://www.paperbackswap.com">Paperbackswap.com</a></li>");
});

Okay, drop that into the opacuserjs system preference and refresh your OPAC page to see how it worked:

Updated list of links

Updated list of links

Great! We’re done, right? Well… The trouble is, the link we added doesn’t include any means to pass the title to the search system on the other site. How are we supposed to do that? Luckily, many sites are very open in the way they perform search requests. You just have to do a little digging. Let’s go to Paperbackswap.com and do a search to see how they handle it. Since I know we’re going to pass a title to their search system, I’m going to look for a title-specific search. I found one on their advanced search page. Plug in a title and look at the resulting URL:

http://www.paperbackswap.com/book/browser.php?all_k=&not_k=&or_k[]=&or_k[]=&phrase_k1=cryptonomicon&all_ti=&not_ti=&or_ti[]=&or_ti[]=&phrase_ti1=&a=&i=&bd=&p=&g=0&b[]=Paperback&b[]=Audio+Cassette&b[]=Hardcover&b[]=Audio+CD&pd=&pd_type=e&r=n&s_type=a&l=10&sby=&oby=ASC

What a mess! But underneath all that junk there’s one bit of real functionality there:

http://www.paperbackswap.com/book/browser.php?all_k=&not_k=&or_k[]=&or_k[]=&phrase_k1=cryptonomicon&all_ti=&not_ti=&or_ti[]=&or_ti[]=&phrase_ti1=&a=&i=&bd=&p=&g=0&b[]=Paperback&b[]=Audio+Cassette&b[]=Hardcover&b[]=Audio+CD&pd=&pd_type=e&r=n&s_type=a&l=10&sby=&oby=ASC

It looks to me like phrase_k1=cryptonomicon is the meat of the search, and everything else is defaults. Let’s try the link this way and see if we get good results:

http://www.paperbackswap.com/book/browser.php?phrase_k1=cryptonomicon

Seems to work just as expected. Now we know that we can use a link like this to pass our own search term to the site:

http://www.paperbackswap.com/book/browser.php?phrase_k1=<title>

Using JavaScript to find the title

Click to enlarge screenshot

Click to enlarge screenshot

We’re building the custom search link with JavaScript, so we’ll have to find a way to leverage the same tool to grab the title.  Luckily there is a unique element on the page which contains the title, and we can grab it using jQuery: the <h1> tag. Okay, so there are two <h1>’s on the page, a little bit of a technical foul on Koha’s part. Using FireBug we can ispect the <h1> containing the title and we can see it is contained in a uniquely identified container. We can grab the contents of the heading this way:


$(document).ready(function(){

var title = $("#catalogue_detail_biblio h1").html();

});

Add this to code we wrote to add the custom link along with the search URL we puzzled out:

$(document).ready(function(){

var title = $("#catalogue_detail_biblio h1").html();
$("#further ul").append("<li><a>Paperbackswap.com</a></li>");
});

Notice we’re using + to concatenate the JavaScript variable with the markup that forms the link. Looks good, and the link works!

Our new link passes the correct title to the other site

Our new link passes the correct title to the other site

…Until we come to a record which has a subtitle. For example, The return of the king: being the third part of The lord of the rings

You got markup in my content!

You got markup in my content!

The problems arises because the subtitle is marked up with a <span> inside the
<h1>. When we grabbed the contents of the <h1> tag, we also got the <span>. We’ll have to do some more JavaScript trickery to drop the <span>. Here’s what I came up with, thanks in part to this demo:


$(document).ready(function(){

var orig = $("#catalogue_detail_biblio h1").remove("span").html();
var regexp = new RegExp ("<span>", "gi");
var title = orig.replace(regexp,"");
$("#further ul").append("<li><a>Paperbackswap.com</a></li>");

});

Now we’re getting just the title, and we’re getting the correct link. Success.

2 thoughts on “Customizing your additional search options

  1. Daniel G

    This post continues a recent trend: every time I start thinking about changing an aspect of the Koha interface, there’s a new post by Owen telling me how to do it.

    Thank you so much for the immensely helpful and educational posts!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *