How to upgrade to the latest Site Search 360 version (v13)

The latest script version currently offered by the Site Search 360 Plugin is v13.

If you're upgrading from v11 or v12 versions of the Site Search 360 script, please refer to our Release Notes.

If you're upgrading from v10 or older, you need to update your code structure
first - v11 introduced a lot of improvements and changes which are not backwards compatible. To easily
generate the new code, follow our Migration instructions.
Once this is out of the way, you can add the v13 script at the end of your configuration code and
enjoy the brand-new look and feel!

New features

Since v11, you can enjoy the features so many of you have been asking for - tabbed search results, grid
layout, or, for example, the option to disable cookies.

Enhanced tracking

Our new enhanced tracking makes a huge difference and brings you valuable insight into your user search
behavior. Analytics can help you leverage your product and make it shine - it makes all the difference
between the
average and the extraordinary. That's why we continuously work on providing you with the best analytics
possible.

Are you interested in evaluating how well your queries perform? What's your search result page bounce
rate?
What queries bring 0 results? We'll start (anonymously!) collecting the necessary data as soon as you upgrade.

And if you don't want us to use enhanced tracking on your site, simply adjust your ss360Config like this:

Tabs

A feature many of you have been waiting for. Until now the only way to navigate through content groups on
the search result page was by clicking on a button that would make the SERP scroll to the required
content
group. v13 allows you to keep your content groups neatly organized in separate tabs by default + it
automatically adds an All results content group (live example).

You can also easily specify the spacing between tabs, their border radius, and even the title of the tab
content. Here is a sample configuration:

We are also using fallbacks for smaller screen resolutions or huge content group counts resulting in a
nice layout on all devices.

Grid layout

Implementing a grid layout with Site Search 360 is no longer a brainer!
Since it's especially beneficial to show products in a grid if you run an ecommerce website, we've added a simple
way to do this, no matter your skill level (live
example).

Additionally, we now have a few settings that allow you to easily adjust the behavior for
different screen resolutions. Let's take an example:

In the example above we're using grid layout on both, mobile and desktop, resolutions
(992px is the breakpoint) and we want to have 3 columns on desktop and 2 columns on mobile devices.

Hide parts of content from ss360Config

Instead of having to manually hide parts of your search result layout in your
stylesheets, we've made it simple to hide those directly by setting the desired parameters in the
config. You can hide images, text snippets, titles, data points, and result URLs (those are hidden by default). You can also apply
different configurations for mobile and desktop devices (the breakpoint is 992px).

Here is an example where we want to display only the title, result link, and the image on mobile but
keep everything
except the URL on desktop:

Disable cookies

Being able to control what data is stored in visitors' browsers by different service providers has
become really
important in the light of GDPR and similar regulations. You can now simply set the
allowCookies option in the ss360Config to false and we won't set any
cookies.

Please note that we are using a CDN provider (Cloudflare) to host our scripts. And there are some
cookies that come from
Cloudflare and not from us. Those cookies help ensure a secure connection to Cloudflare and don't
store any
personal information, so there is no need to try to avoid them at all costs, see Cloudflare's cookie policy. For this reason,
if you
want to avoid all cookies that might be set by Site Search 360, then you will need to host the
script yourself, in which case you'd also need to make sure that your Site Search 360
script version is always up to date as some bug
fixes usually follow without us changing the major version of the plugin.

Moreover, if you'd like to use our searcb analytics to its full potential, you might want to keep the
cookies enabled to benefit from a better understanding of your searchers' sessions as those are
tracked using
cookies.

Smart 404

An incomprehensible 404 page might force many of your visitors to leave your website and choose a
competitor
instead. Using our new Smart 404 feature, you can make sure that your visitors always find what they
have
been looking for.

Simply add a smart404 object to your ss360Config and let us do the job of
finding
out what the visitor expected to find. All you need to do is specify a unique identifier that
indicates your
404 page (the page title), the selector where alternative results should be rendered, and the caption:

Voice search

Speech recognition has been among us for many years and is very much on the rise. Google claimes to
have reached a 95% word accuracy threshhold back in 2017! Now is the perfect time to
jump in
with our voice
search . All you have to do is enable the voice search function by adding a
voiceSearch object to your ss360Config like this:

We will take care of the rest - adding a microphone icon to your search box for compatible browsers
(Google
Chrome, Chrome for Android and Samsung Internet), ignoring the incompatible ones, error handling and
recognized text processing.

Redirect on single result

Does it seem silly to display the SERP when there's one and only search result available? Set the
redirectOnSingle property of
the results object to true and the user will be redirected directly to the
search
result page skipping the result layout altogether.

Better configuration structure

You might have noticed that the ss360Config was getting a bit overwhelming as more and more features
were added. To
address this, we've decided to group the settings semantically. Thus, the configuration has become
more of an hierarchical structure rather than a linear one. For example, the numResults
option can now
be found under results.num.

Check what the new default configuration looks like:

Manually adjusting the ss360Config to fit the current structure wouldn't make much sense. That's why
we have provided a simple tool to convert the old config into the new one (see the Migration
section).

Other changes

Result counts are now based only on results available to the user in the current context

Search results and images are loaded progressively leading to even shorter loading times
(depending on your
paging size) and a more compact DOM structure

Result counts in navigation can be disabled with the
layout.navigation.showGroupResultCount setting

Update the old configuration code

If you are upgrading to v13 from an older script version (v10 and earlier), please read this section
and test thoroughly in your staging environment before going live with the changes. Let us know if you need any help with the upgrade.

Update your ss360Config and script reference

First you need to update your ss360Config to match the new
structure. To do so, copy your current
ss360Config without comments and callbacks into the following input field and the updated
configuration will be
generated for you on the right. Callbacks now go under the callbacks setting with the
exception of externalTracking.searchCallback which should now be placed
under the tracking setting.

Not sure what to copy and paste? Just go to a page where you are using Site Search 360,
open the
developer console (ctrl+shift+j or option+command+j if you're using macOS), type
console.log(JSON.stringify(ss360Config));, press Enter,
and copy everything that gets logged on the console.

Now you can take the updated code, replace the old one with it on your site, and update the script
reference to load
the latest v13 version like this:

Check your pagination

After updating to v13, you should check whether your pagination behaves as expected. In the latest
version,
we load search results progressively instead of showing all at once. The paging size now defaults
to 12, max results to 96, and the more results button text to 'See more'.

You can adjust those values like this (please note that the page size cannot be greater than 24):

If you want to show all available results at once, you should set the moreResultsButton to
null like this:

If you are using grid layout, please be sure to set the moreResultsPagingSize to a
number
that is evenly divisible by the number of columns you are using. This way your search result layout
won't have any gaps (this is why it defaults to 12).

Check your search suggestions dropdown

In v13, your suggestions will be as wide as the search field by default (but at least 275px). If
you
want it to be wider or narrower you can specify the 'maxWidth' property in the 'suggestions'
configuration
object like this:

Update all your changeConfig calls

If you are using Site Search 360's changeConfig method, you will need to update all
the keys to match the
new configuration structure. For example, if you were changing the included content groups like
this:

You would now have to change the key to 'contentGroups.include' (i.e. the path in the ss360Config
object)
instead of 'includeContentGroups':

https://docs.sitesearch360.com/images/how-to-use-site-search.png

Still using old Site Search 360 code (v10, v9, or v7?) Upgrade to benefit from a new
design and loads of awesome new features, it's free. Here's how to.