Avanti-search NPM

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 or avantisearch.beforeSearch before the plugin start.