Guest Post: Customizing Koha's display of online resources like eBooks

by ByWater Partners on Aug 7, 2013

The following post is from Owen Leonard at the Nelsonville Public Library in Ohio, a ByWater Solutions Partner:

The Athens County Public Libraries are members of the Ohio eBook Project, a consortium of libraries who contribute to and share access to a collection of eBooks and other downloadable material through OverDrive. In order to make these resources more discoverable by our patrons we add MARC records for these titles to Koha.

When we started doing this we felt that it was important for the patrons to be able to tell very easily that the title they saw in search results was an electronic resource they could download. We already have many records in our catalog for web sites. We were concerned that these two types of resources would be difficult to distinguish.

An electronic resource in default OPAC search results

Since Koha gives us the ability to inject custom JavaScript into our OPAC, a JS-based solution seemed like the best option. The goal was to be able to use JS to examine each search result and look for a clue that any particular result was an Ohio eBook Project record. Luckily all the OEP records have something in common: A URL (stored in the MARC 856u) beginning with “http://ohdbks.‚Äù Here’s the JavaScript I came up with:

[code language=”javascript” wraplines=”true” toolbar=”true”]
$("#userresults").ready(function(){
$("#userresults table td").each(function(i){
td = $(this);
var ohdbks_link = td.find("a[href^=’http://ohdbks’]");
var linkc = ohdbks_link.parent();
var ohdbks_link = ohdbks_link.attr("href");
if(ohdbks_link){
$("td:eq("+i+") span.availability,td:eq("+i+") span.actions").hide();
linkc.html(‘<a class="ebook" href="’+ohdbks_link+’">Check the Ohio e-Book Project for availability</a>’);
}
});
});
[/code]

Stepping through this code:

1. The script is triggered when #userresults is ready.
2. We loop through each td within the table inside #userresults, storing the index of each iteration as i.
3. The matched td is stored as a variable for easy reference.
4. The script finds an anchor tag which matches the string we’re looking for and stores that in a variable.
5. We want to refer later to the <a> tag’s parent container, so we use jQuery’s parent() to store that as linkc.
6. We pull the href attribute value for the previously select <a> tag.
7. If an href was found…
8. ‚Ķhide the availability and “actions‚Äù (“Place hold,‚Äù “Add to cart‚Äù, etc.) elements which we don’t consider relevant to e-resource records.
9. Replace the contents of the original anchor tag’s container with new html which uses the previously-saved href attribute but changes the text of the link and adds a special CSS class.

We chose to label each eBook link “Check the Ohio e-Book Project for availability‚Äù because Koha has no way of knowing whether a particular title is checked out. The link is styled by CSS added to Koha’s OPACUserCSS system preference:

[code language=”css” wraplines=”true” toolbar=”true”]
a.ebook {
background: url("http://www.myacpl.org/files/image/opac-results-download-ebook.png") no-repeat scroll 5px 5px transparent;
border: 1px solid #8BC45C;
border-radius: 5px 5px 5px 5px;
font-size: 135%;
font-weight: bold;
line-height: 175%;
padding: 4px 4px 4px 25px;
text-decoration: none;
}
[/code]

The result:

An electronic resource in customized OPAC search results

Electronic resource detail page

When the patron clicks to view more information about one of those electronic resource titles they come to a detail page which presents additional opportunities to simplify the display for this type of record.

Since this kind of title is available only through the Ohio eBook Project web site we don’t actually have any local holdings, but when we add MARC records for these resources we include a dummy item to which we can attach some additional information. One reason for this is to be able to have a searchable collection code attached to each record. But showing holdings information to the patron isn’t very useful because none of it is relevant:

Holdings information displayed by default for electronic resources

Another aspect of the detail page which is less than ideal is that the link to the Ohio eBook Project is pretty well hidden in the other details about the title like publisher, subject headings, etc. We again turned to JavaScript to solve both of these problems at once:

[code language=”javascript” wraplines=”true” toolbar=”true”]
$("span.online_resources").ready(function(){
var ohdbks_link = $("span.online_resources a[href^=’http://ohdbks’]").attr("href");
if(ohdbks_link){
$("#holdings").html(‘<a href="’+ohdbks_link+’"><img alt="Check the Ohio e-Book Project for availability" src="http://www.myacpl.org/files/image/opac-download-ebook.png" /></a>’);
}
});
[/code]

This code is very similar to what we used on the search results page, but a little simpler.

1. Again we trigger this function when this particular area of the page (“span.online_resources‚Äù) has completed loading.
2. We find the link to the Ohio eBook Project download page and store the href attribute.
3. If an href was found…
4. Replace the holdings table (identified by the ID #holdings) with an image which links to the OEP download page.

In four lines of JavaScript both goals are accomplished: The meaningless holdings table is gone, and a prominent link is added to the Ohio eBook Project download page for the title the patron is looking at.

Here’s the result:

A customized link to the electronic resource download page

Originally posted on Owen’s Koha Blog. I have also created a few additional download images for our partner libraries: