-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New searchbar design #12
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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">'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
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+'">') | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like this could be made simpler: const coverImage = (product.cover) ? product.cover : prestashop.urls.no_picture_image;
return $('<li>')
.append($('<a>'))
.append($('<img>').attr('src', coverImage.bySize.small_default.url))
.append(/* ... */) |
||
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(); | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can simplify using $clearButton.toggle($searchBox.val() !== "" && isMobile()); |
||
}); | ||
}); |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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"> | ||||||
eternoendless marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
<i class="material-icons search"></i> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remember to use
Suggested change
Also, you can change |
||||||
<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'}"> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I don't think this domain is right, wdyt @LouiseBonnard ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
<i class="material-icons clear"></i> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same comment as with the previous icon |
||||||
</form> | ||||||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please use
rem
rather thanpx