$ bower install avanti-search --save
.
- Install JS-Cookie.
- Insert
avanti-search.js
in your store.
- Insert
avanti-search.css
in your store.
- Insert VTEX search result tag
<vtex.cmc:searchResult/>
in your template.
- Insert below script in your template at the bottom. Inside
<body>
tag:
<script>
var scriptContent = $('.resultItemsWrapper').children('script').html();
eval('window.'+ /(PageClick_)([0-9]+)/g.exec(scriptContent)[0] +' = function () {}');
</script>
- Call plugin in your JavaScript:
(function() {
$('.resultItemsWrapper div[id^="ResultItems"]').avantiSearch();
})();
Option |
Type |
Default |
Description |
$resultItemsWrapper |
Element |
$('.resultItemsWrapper') |
Description |
$script |
Element |
$('.resultItemsWrapper').children('script') |
Description |
$totalItems |
Element |
$('.searchResultsTime:first .resultado-busca-numero .value') |
Description |
$selectOrder |
Element |
$('#O') |
Description |
$filters |
Element |
$('.search-multiple-navigator label') |
Description |
Option |
Type |
Default |
Description |
classFilterActive |
String |
filter--active |
Description |
classItemPreLoad |
String |
shelf-item--preload |
Description |
classLoadBtnHide |
String |
load-btn--hide |
Description |
classLoadLess |
String |
load-less |
Description |
classLoadMore |
String |
load-more |
Description |
classPagination |
String |
pagination |
Description |
Option |
Type |
Default |
Description |
textLoadLess |
String |
Load less |
Description |
textLoadMore |
String |
Load more |
Description |
textPaginationFirst |
String |
First |
Description |
textPaginationPrev |
String |
Prev |
Description |
textPaginationNext |
String |
Next |
Description |
textPaginationLast |
String |
Last |
Description |
Pagination
Option |
Type |
Default |
Description |
pagination |
Boolean |
false |
Description |
paginationRangeButtons |
Number |
3 |
Description |
Option |
Type |
Default |
Description |
cookieName |
String |
AvantiSearchQuery |
Description |
defaultParams |
Object |
{} |
Pass default params to request. Example: { 'query': { 'O': 'OrderByPriceASC' } } |
attempts |
Number |
1 |
Description |
Example:
(function() {
$('.resultItemsWrapper div[id^="ResultItems"]').avantiSearch({
cookieName: 'AvantiSearchQuery',
defaultParams: {
'query': {
'O': 'OrderByPriceASC'
}
}
});
})();
Event name |
Arguments |
Description |
avantisearch.init |
event, options, request |
Description |
avantisearch.initWithCookie |
event, options, request |
Description |
avantisearch.beforeSearch |
event, options, request |
Description |
avantisearch.afterSearch |
event, options, request |
Description |
avantisearch.beforeChangeOrder |
event, options, request, element |
Description |
avantisearch.afterChangeOrder |
event, options, request, element |
Description |
avantisearch.beforeFilter |
event, options, request, element |
Description |
avantisearch.afterFilter |
event, options, request, element |
Description |
avantisearch.beforeChangePage |
event, options, request |
Description |
avantisearch.afterChangePage |
event, options, request |
Description |
avantisearch.beforeShowItems |
event, options, request, page |
Description |
avantisearch.afterShowItems |
event, options, request, page |
Description |
Example:
(function() {
var $resultItems = $('.resultItemsWrapper div[id^="ResultItems"]');
$resultItems
.on('avantisearch.init', function (event, options, request) {
console.log(event);
console.log(options);
console.log(request);
});
$resultItems.avantiSearch();
})();
- Call the events:
avantisearch.init
or avantisearch.beforeSearch
before the plugin start.