Add clear search button in shop searchbar

app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee

@@ -84,9 +84,12 @@ Darkswarm.controller "ProductsCtrl", ($scope, $filter, $rootScope, Products, Ord
     ).join(" #{t('products_or')} ") if $scope.activeProperties?
 
   $scope.clearAll = ->
-    $scope.query = ""
+    $scope.clearQuery()
     $scope.clearFilters()
 
+  $scope.clearQuery = ->
+    $scope.query = ""
+
   $scope.clearFilters = ->
     $scope.taxonSelectors.clearAll()
     $scope.propertySelectors.clearAll()

app/assets/stylesheets/darkswarm/shop_search.css.scss

@@ -10,6 +10,19 @@
   position: relative;
   z-index: 5;
 
+  .search-wrap {
+    position: relative;
+    width: 100%;
+
+    .clear {
+      height: 1em;
+      width: 1em;
+      margin-top: 1em;
+      position: absolute;
+      right: 1em;
+    }
+  }
+
   input#search {
     height: 3em;
     border-radius: $radius-small;

app/views/shop/products/_searchbar.haml

@@ -1,10 +1,13 @@
 .shop-searchbar
   .row
     .small-12.large-5.columns.flex
-      %input#search.text{"ng-model" => "query",
-            placeholder: t(:products_search),
-            "ng-debounce" => "200",
-            "ofn-disable-enter" => true}
+      %div.search-wrap
+        %input#search.text{"ng-model" => "query",
+              placeholder: t(:products_search),
+              "ng-debounce" => "200",
+              "ofn-disable-enter" => true}
+        %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}}
+          %img{ src: "/assets/icn-close.png" }
 
       .hide-for-large-up
         %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}