What are some optional functions for the Search snippet?

Search can be fully customized to suit your needs. Here are the Javascript events you can add to the Search snippet.

Snippet options

General functionality

This event is fired when Search opens:

_wssq.push(['suggest._bindEvent', 'open', function() {}]);

This event is fired when Search closes:

_wssq.push(['suggest._bindEvent', 'close', function() {}]);

This event is fired every time the results receive new data:

_wssq.push(['suggest._bindEvent', 'updateResults', function() {}]);

This event is fired when Search is initialized:

_wssq.push(['suggest._bindEvent', 'initialized', function() {}]);

This event triggers whenever no search results are returned upon a query:

_wssq.push(['suggest._bindEvent', 'noResults', function() {}]);

Set default filter:

_wssq.push(['suggest._setDefaultFilters', {data-filter-id: 'data-filter-value'}]);

This event disables analytics tracking in Search:

_wssq.push(['suggest._disableTracking']);

 

Positioning

You might want to tweak the position of your results overlay a little to suit your design better. This can be done by editing your javascript snippet.

With this option you can append the search container into the selected div id:

_wssq.push(['_load', { 'suggest' : { 'account' : 'SQ-' + sooqrAccount, 'version' : 4, fieldId : ['search','search-mobile'], containerParent : '#sqr-container'}}]);

With this option you can position Search according to the position of an element:

_wssq.push(['suggest._setPosition', 'element-relative', <element-selector>]);

This put Search in the middle of the screen. It uses the search field for its top position:

_wssq.push(['suggest._setPosition', 'screen-middle', <position-options>]);

Use this option to align Search to the left of the search field. It uses the search field for its top position:

_wssq.push(['suggest._setPosition', 'left']);

Same as left but then aligned to the right of the search field. It uses the search field for its top position:

_wssq.push(['suggest._setPosition', 'right']);

Align Search in the middle of the search field. It uses the search field for its top position:

_wssq.push(['suggest._setPosition', 'middle']);

Use the position of the search field to position Search:

_wssq.push(['suggest._setPosition', 'input-relative', <position-options>]);

Change the z-index of the layer:

wssq.push(['suggest._setZIndex', <z-index>]);

 

Filters

This event is fired every time the filters are updated:

_wssq.push(['suggest._bindEvent', 'updateFilters', function() {}]);

Search Connect Extension

If you want to use any of these customization with the Search Connect extension for Magento, just add the desired options to the configuration of the extension: