New searchbar design

PrestaShop · Oct 21, 2019 · f720c8f · f720c8f
1 parent ae165e9
commit f720c8f
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 10 deletions.
diff --git a/ps_searchbar.css b/ps_searchbar.css
@@ -0,0 +1,78 @@
+#header, #header .header-top {
+  background-color: white;
+}
+
+#search_widget {
+  margin-bottom: .625rem;
+  overflow: auto;
+}
+#search_widget form {
+  position: relative;
+}
+#search_widget form i {
+  position: absolute;
+  padding: 8px;
+}
+#search_widget form i.clear {
+  right: 15px;
+  display: none;
+}
+#search_widget form input {
+  width: 100%;
+  padding: 10px 40px;
+  outline: none;
+  background-color: #f1f1f1;
+  border: none;
+  border-radius: 5px;
+}
+
+.ui-autocomplete.searchbar-autocomplete {
+  width: 100%;
+  min-height: 100%;
+  border: none;
+}
+
+.ui-autocomplete.searchbar-autocomplete li a, .ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
+  padding: 8px 15px;
+  overflow: auto;
+  border: none;
+  background: none;
+  margin: auto;
+  border-radius: 0;
+}
+
+.ui-autocomplete.searchbar-autocomplete li a:hover {
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin-right: 8px;
+}
+
+.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail img {
+  width: 100%;
+  height: auto;
+}
+
+@media only screen and (min-width: 768px) {
+  #search_widget {
+    float: right;
+    margin-bottom: 0;
+  }
+
+  .ui-autocomplete.searchbar-autocomplete {
+    width: 400px;
+    min-height: auto;
+    left: auto;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  #search_widget {
+    min-width: 15.63rem;
+  }
+}
diff --git a/ps_searchbar.js b/ps_searchbar.js
@@ -3,20 +3,38 @@ $(document).ready(function () {
     var $searchWidget = $('#search_widget');
     var $searchBox    = $searchWidget.find('input[type=text]');
     var searchURL     = $searchWidget.attr('data-search-controller-url');
+    var $clearButton  = $searchWidget.find('i.clear');
 
     $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
         _renderItem: function (ul, product) {
+            var $img = $('<div class="autocomplete-thumbnail">');
+            if (product.cover) {
+              $img.append('<img src="'+product.cover.bySize.small_default.url+'">')
+            } else {
+              $img.append('<img src="'+prestashop.urls.no_picture_image.bySize.small_default.url+'">')
+            }
             return $("<li>")
                 .append($("<a>")
-                    .append($("<span>").html(product.category_name).addClass("category"))
-                    .append($("<span>").html(' > ').addClass("separator"))
+                    .append($img)
                     .append($("<span>").html(product.name).addClass("product"))
                 ).appendTo(ul)
             ;
         }
     });
 
+    var isMobile = function() {
+        return $(window).width() < 768;
+    };
+    var autocompletePosition = function() {
+      return {
+        my: 'right top',
+        at: 'right bottom',
+        of: isMobile() ? '.header-top' : '#search_widget',
+      };
+    };
+
     $searchBox.psBlockSearchAutocomplete({
+        position: autocompletePosition(),
         source: function (query, response) {
             $.post(searchURL, {
                 s: query.term,
@@ -31,5 +49,25 @@ $(document).ready(function () {
             var url = ui.item.url;
             window.location.href = url;
         },
+    }).psBlockSearchAutocomplete("widget").addClass('searchbar-autocomplete');
+
+    $(window).resize(function() {
+      $searchBox.psBlockSearchAutocomplete({
+        position: autocompletePosition(),
+      });
+      $searchBox.keyup();
+    });
+
+    $clearButton.click(function() {
+        $searchBox.val("");
+        $clearButton.hide();
+    });
+
+    $searchBox.keyup(function() {
+        if ($searchBox.val() !== "" && isMobile()) {
+            $clearButton.show();
+        } else {
+            $clearButton.hide();
+        }
     });
 });
diff --git a/ps_searchbar.php b/ps_searchbar.php
@@ -63,6 +63,7 @@ public function install()
     public function hookHeader()
     {
         $this->context->controller->addJqueryUI('ui.autocomplete');
+        $this->context->controller->registerStylesheet('modules-searchbar', 'modules/' . $this->name . '/ps_searchbar.css');
         $this->context->controller->registerJavascript('modules-searchbar', 'modules/'.$this->name.'/ps_searchbar.js', ['position' => 'bottom', 'priority' => 150]);
     }
 

diff --git a/ps_searchbar.tpl b/ps_searchbar.tpl
@@ -23,12 +23,11 @@
 *  International Registered Trademark & Property of PrestaShop SA
 *}
 
-<div id="search_widget" data-search-controller-url="{$search_controller_url}">
-	<form method="get" action="{$search_controller_url}">
-		<input type="hidden" name="controller" value="search">
-		<input type="text" name="s" value="{$search_string}">
-		<button type="submit">
-			{l s='Search' d='Modules.Searchbar.Shop'}
-		</button>
-	</form>
+<div id="search_widget" class="search-widgets" data-search-controller-url="{$search_controller_url}">
+  <form method="get" action="{$search_controller_url}">
+    <input type="hidden" name="controller" value="search">
+    <i class="material-icons search">&#xE8B6;</i>
+    <input type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Modules.Searchbar.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
+    <i class="material-icons clear">&#xe14c;</i>
+  </form>
 </div>