avanti-search
v3.1.0
Published
VTEX Avanti Search
Downloads
19
Readme
Avanti Search
Install
$ 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>
/**
* Avoid VTEX animation
*/
function goToTopPage() { }
var $childrenResult = $('.resultItemsWrapper').children('script')
if ($childrenResult.length !== 0) {
var scriptContent = $childrenResult.html();
eval('window.' + /(PageClick_)([0-9]+)/g.exec(scriptContent)[0] + ' = function () {}');
}
</script>
- Call plugin in your JavaScript:
(function() {
$('.resultItemsWrapper div[id^="ResultItems"]').avantiSearch();
})();
Options
Elements
| Option | Type | Default
|--- |--- |--- |
| $resultItemsWrapper | Element | $('.resultItemsWrapper')
| $script | Element | $('.resultItemsWrapper').children('script')
| $totalItems | Element | $('.searchResultsTime:first .resultado-busca-numero .value')
| $selectOrder | Element | $('#O')
| $filters | Element | $('.search-multiple-navigator label')
Classes
| Option | Type | Default
|--- |--- |--- |
| classFilterActive | String | filter--active
| classItemPreLoad | String | shelf-item--preload
| classLoadBtnHide | String | load-btn--hide
| classLoadLess | String | load-less
| classLoadMore | String | load-more
| classPagination | String | pagination
Texts
| Option | Type | Default
|--- |--- |--- |
| textLoadLess | String | Load less
| textLoadMore | String | Load more
| textPaginationFirst | String | First
| textPaginationPrev | String | Prev
| textPaginationNext | String | Next
| textPaginationLast | String | Last
| textEmptyResult | String | No product found
Pagination
| Option | Type | Default
|--- |--- |--- |
| pagination | Boolean | false
| paginationRangeButtons | Number | 3
Others
| Option | Type | Default
|--- |--- |--- |
| cookieName | String | AvantiSearchQuery
| defaultParams | Object | {}
| Pass default params to request.Example: { 'query': { 'O': 'OrderByPriceASC' } }
|
| attempts | Number | 1
Example:
(function() {
$('.resultItemsWrapper div[id^="ResultItems"]').avantiSearch({
cookieName: 'AvantiSearchQuery',
defaultParams: {
'query': {
'O': 'OrderByPriceASC'
}
}
});
})();
Events
| Event name | Arguments |--- |--- | | avantisearch.init | event, options, request | avantisearch.initWithCookie | event, options, request | avantisearch.initWithoutCookie | event, options, request | avantisearch.beforeSearch | event, options, request | avantisearch.afterSearch | event, options, request | avantisearch.beforeChangeOrder | event, options, request, element | avantisearch.afterChangeOrder | event, options, request, element | avantisearch.beforeFilter | event, options, request, element | avantisearch.afterFilter | event, options, request, element | avantisearch.beforeChangePage | event, options, request | avantisearch.afterChangePage | event, options, request | avantisearch.beforeShowItems | event, options, request, page | avantisearch.afterShowItems | event, options, request, page
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();
})();
Tips and Tricks
- Call the events:
avantisearch.init
,avantisearch.initWithCookie
,avantisearch.initWithoutCookie
oravantisearch.beforeSearch
before the plugin start.