Search the Help Center
  1. Spotler Activate Search
  2. Site Search
  3. Site Search

Articles in this section

See more

Integration: Search Snippet

Spotler Activate Search is easily implemented. This article explains how to install it onto your environment.

Step 1: placing the snippet on your website

Simply copy the Javascript snippet shown on this page and paste it into the head or footer section of your pages.

Search snippet.png

Using Google Tag Manager? Then click here and follow these steps
  1. Log in to Google Tag Manager and select the right container
  2. In the menu, go to Tags
  3. Click on the button with New
  4. Click on Tag Configuration
  5. Add a custom HTML tag
  6. Paste the Search snippet you can copy from this page
  7. Trigger this tag on every page containing the search bar
  8. Click on the button with Save on the top and name your tag Spotler Activate Search
  9. Now click Submit and after that, click on Publish.

Spotler Activate Seach should now be linked to your website!

Step 2: change the ID of the search bar to Search

This needs to be a unique value, so we know which input field to use. If it’s impossible to adjust the ID of your search bar, you can try to change the field ID Search in the snippet, to the ID of your input field. In any case, the ID of your input field and the ‘fieldId’ as noted in the snippet should always be the exact same value.

_wssq.push(['_load',{'suggest':{'account':'SQ-'+ sooqrAccount,'version':4, fieldId :'change this value'}}]);

https://spotler.atlassian.net/wiki/spaces/ASPRODKB/pages/803340613/Integration+-+Search+Snippet

Extra code

Code: hide keyboard on mobile devices

To hide the keyboard on mobile devices you can add the code below before the Search snippet. As it works with focus, this will also deselect the input on the desktop.

Don't forget the replace [search field id] with the ID of your search field.

jQuery('#<search field id>').bind('keypress', function(e) {var code = e.keyCode || e.which;if(code == 13) {jQuery('#<search field id>').blur();}});
Code: exclude Activate Search from Varnish HTTP cache
Spotler Activate Search must be excluded from Varnish, since most search queries will be different from one another. You can exclude it from Varnish by adding the following rule to ‘/etc/varnish/default.vcl’:
if (req.http.host == "dynamic.sooqr.com" && req.url == "/") {
    return (pass);
}
Code: adding Activate Search to a page with multiple search bars

Whenever you have two search bars on your page (one mobile, one desktop OR one on top of the page and one on the bottom), here is how to fix this.

Make sure the ID of every search bar is unique.

Example of the first search bar: 
<input id="search" type="search" name="q" value="" class="input-text required-entry" placeholder="Search the entire store"/>
Example of the second search bar: 
<input id="search2" type="search" name="q" value="" class="input-text required-entry" placeholder="Search the entire store"/>
Add the search bar ID's in this line in the snippet, after fieldId: 
_wssq.push(['_load', { 'suggest' : { 'account' : 'SQ-123456-1', version: '4', fieldId: ['search', 'search2']}}]);
Code: allowing Activate Search domains through your content security policy
A content security policy (CSP) allows you to restrict resources and domains in their access via your website. If you are using a CSP, the following policy needs to be added in order to allow Spotler Activate Search on your website:
connect-src https://*.sooqr.com https://firehose.eu-central-1.amazonaws.com https://cognito-identity.eu-central-1.amazonaws.com;
Code: close Spotler Activate Search with a click outside the overlay
If you wish to close the results of Search with a click outside the overlay, here is how it's done. Just place the following code within the Search snippet in the open event line and replace the 'SQ-000000-0' with your account ID: 
_wssq.push(['suggest._bindEvent', 'open', function() {
$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();
}
});
}]);