add cart icon with count near the search box

card-md.png and cart-sm.png are CC0 images sourced from http://aiconica.net/.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 46d5e40..d439b1a 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1038,6 +1038,26 @@ tr.result_table_row > td.result_table_pic_header {
     margin-left: 5em;
 }
 
+/* styles for the cart */
+#record_cart {
+    [% IF rtl == 't' -%]
+    float: left;
+    margin-left: 2em;
+    [% ELSE; %]
+    float: right;
+    margin-right: 2em;
+    [% END; %]
+    position: relative;
+}
+#record_cart_count_floater {
+    background-color: [% css_colors.accent_lighter %];
+    position: absolute;
+    top: -3px;
+    right: -3px; /* relative to icon, so don't want to adjust for RTL */
+    z-index: 2;
+    border-radius: 50%;
+}
+
 .result_number {
     [% IF rtl == 't' -%]
     padding-right: 1em;

diff --git a/Open-ILS/src/templates/opac/parts/cart.tt2 b/Open-ILS/src/templates/opac/parts/cart.tt2
new file mode 100644 (file)
index 0000000..4f0a747
--- /dev/null
+++ b/Open-ILS/src/templates/opac/parts/cart.tt2
@@ -0,0 +1,7 @@
+<div id="record_cart">
+   <img src="[% ctx.media_prefix %]/images/cart-sm.png[% ctx.cache_key %]" alt="[% l('View Cart') %]">
+   <div id="record_cart_count_floater">
+     <span id="record_cart_count">[% ctx.mylist.size %]</span>
+     <span class="sr-only">[% l('records in cart') %]</span>
+   </div>
+</div>

diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index 0a5f62f..4cf34a3 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -44,6 +44,7 @@ END;
         <span class="adv_search_catalog_lbl"><a href="[% mkurl(ctx.opac_root _ '/advanced', {},  expert_search_parms.merge(browse_search_parms, facet_search_parms)) %]"
             id="home_adv_search_link">[% l('Advanced Search') %]</a></span>
         <span class="browse_the_catalog_lbl"><a href="[% mkurl(ctx.opac_root _ '/browse', {}, expert_search_parms.merge(general_search_parms, facet_search_parms, ['fi:has_browse_entry'])) %]">[% l('Browse the Catalog') %]</a></span>
+        [% INCLUDE 'opac/parts/cart.tt2' %]
     </div>
     <div class="searchbar">
         <span class='search_box_wrapper'>

diff --git a/Open-ILS/web/images/cart-md.png b/Open-ILS/web/images/cart-md.png
new file mode 100644 (file)
index 0000000..a18c7af
Binary files /dev/null and b/Open-ILS/web/images/cart-md.png differ

diff --git a/Open-ILS/web/images/cart-sm.png b/Open-ILS/web/images/cart-sm.png
new file mode 100644 (file)
index 0000000..554cb46
Binary files /dev/null and b/Open-ILS/web/images/cart-sm.png differ

diff --git a/Open-ILS/web/js/ui/default/opac/record_selectors.js b/Open-ILS/web/js/ui/default/opac/record_selectors.js
index e82e72b..4cdb991 100644 (file)
--- a/Open-ILS/web/js/ui/default/opac/record_selectors.js
+++ b/Open-ILS/web/js/ui/default/opac/record_selectors.js
@@ -4,6 +4,14 @@
     var rec_selectors = document.getElementsByClassName("result_record_selector");
     var mylist = [];
 
+    function handleUpdate(result) {
+        if (result) {
+            mylist = result.mylist;
+            document.getElementById('selected_records_count').innerHTML = mylist.length;
+            document.getElementById('record_cart_count').innerHTML = mylist.length;
+        }
+    }
+
     function mungeList(op, rec) {
         console.debug('calling mungeList to ' + op + ' record ' + rec);
         var req = new window.XMLHttpRequest();
@@ -18,19 +26,13 @@
         if (('responseType' in req) && (req.responseType = 'json')) {
             req.onload = function (evt) {
                 var result = req.response;
-                if (result) {
-                    mylist = result.mylist;
-                    document.getElementById('selected_records_count').innerHTML = mylist.length;
-                }
+                handleUpdate(result);
             }
         } else {
             // IE 10/11
             req.onload = function (evt) {
                 var result = JSON.parse(req.responseText);
-                if (result) {
-                    mylist = result.mylist;
-                    document.getElementById('selected_records_count').innerHTML = mylist.length;
-                }
+                handleUpdate(result);
             }
         }
         req.send();