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


General



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

This event is fired when Sooqr opens.

Example: _wssq.push(['suggest._bindEvent', 'open', function() { $jQ('.page .main').addClass('SooqrHide'); }]);



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

This event is fired when Sooqr closes.

Example: _wssq.push(['suggest._bindEvent', 'close', function() { $jQ('.SooqrHide').removeClass('SooqrHide'); }]);



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

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





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:


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

With this option you can position Sooqr according to the position of an element.

Options:
element-selector: Use css/jQuery selector to select an element
Example: _wssq.push(['suggest._setPosition', 'element-relative', 'div.main-container']);


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

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

Options:
position-options: Array containing the top value which is used to add to the current top position.
Example: _wssq.push(['suggest._setPosition', 'screen-middle', {top:50}]);

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

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

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

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', 'middle']);

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



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

Use the position of the search field to position Sooqr.

Options:
position-options           : Array containing the top and lef value which is used to add to the current position. {top: 0, left: 0}
Example: _wssq.push(['suggest._setPosition', 'input-relative', {top:50, left: 20}]);



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

Change the z-index of the layer

Options:
z-index: The z-index value
Example: _wssq.push(['suggest._ setZIndex', 1999]);




Filters



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

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




Sooqr Connect Extension


If you're using the extension Sooqr Connect for your Magento store, just add it in the configuration of the extension:




Close Sooqr Search with a click outside the overlay


If you like to close the results of Sooqr Search with a click outside the overlay, here is how it's done:

Just place the following code within the Sooqr snippet under "_excludePlaceholders" and replace the 'SQ-000000-0' with your account ID.


$jQ(document).mouseup(function (e)
{
   var container = $jQ(".sooqrSearchContainer");

   if (!container.is(e.target)
       && container.has(e.target).length === 0)
   {
       websight.sooqr.instances['SQ-000000-0'].hideContainer();
   }
});