OPAC: Add Search Results Icons for Multiple Items and Multiple Holdings

[This article was copied from the Voyager Wiki.]

Introduction

This relates to WebVoyage Tomcat 7.2.1 and forward.

When searching the OPAC, the results display with green checks and red X marks depending on item status.  Unfortunately, there are no icons (by default) for titles with multiple holdings and/or multiple items.  This leads to patron confusion and a sense of "invisibility" of those records.  To correct this, you can add your own icon to titles with multiple holdings/items.

resultsFacets.xsl

1.    In /m1/voyager/xxxdb/tomcat/vwebv/context/vvwebv/ui/SKIN/xsl/pageFacets/resultsFacets.xsl, look for 5th line call (about 1/4 of the way down the page).  Specifically,
                                        <xsl:variable name="classAvailable">
                                            <xsl:choose>
                                                <xsl:when test="page:value = 'avail'">available</xsl:when>
                                                <xsl:when test="page:value = 'notAvail'">notAvailable</xsl:when>
                                                <xsl:when test="page:value = 'multiItem'">multiItem</xsl:when>
                                                <xsl:when test="page:value = 'noItem'">noItem</xsl:when>
                                                <xsl:when test="page:value = 'multiHold'">multiHoldings</xsl:when>
                                                <xsl:when test="page:value = 'noHold'">noHoldings</xsl:when>
                                                <xsl:otherwise>noStatus</xsl:otherwise>
                                            </xsl:choose>
                                        </xsl:variable>
2.    Make note of the available, notAvailable, multiItem, etc class names.

CSS (local file or resultsFacets.css)

3.    In your local CSS file (or resultsFacets.css), add the following where className = the appropriate class name from resultsFacets.xsl and imageName.gif = the appropriate icon file name:
.className {
   background-image:url(../images/imageName.gif);
   width: 18px;     
   height: 18px;
   float: left;
}

icon image(s)

4.    In /m1/voyager/xxxdb/tomcat/vwebv/context/vvwebv/ui/SKIN/images, add your appropriate file(s) – in my case, icon_multiholdings.gif.

Tips

In your CSS, you can group stanzas.  For example, in my local CSS file, I have:
.multiHoldings, .multiItem {
   background-image:url(../images/icon_multiholdings.gif);
   width: 18px;           
   height: 18px;
   float: left;
}

As always, remember to backup your working files before you change anything.