avanti-search

3.1.0 • Public • Published

Avanti Search

Install

  1. $ bower install avanti-search --save.
  2. Install JS-Cookie.
  3. Insert avanti-search.js in your store.
  4. Insert avanti-search.css in your store.
  5. Insert VTEX search result tag <vtex.cmc:searchResult/> in your template.
  6. 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>
  1. 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 {}
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

  1. Call the events: avantisearch.init, avantisearch.initWithCookie, avantisearch.initWithoutCookie or avantisearch.beforeSearch before the plugin start.

Dependencies

Contributing

Readme

Keywords

none

Package Sidebar

Install

npm i avanti-search

Weekly Downloads

3

Version

3.1.0

License

MIT

Unpacked Size

53.5 kB

Total Files

12

Last publish

Collaborators

  • carloschneider