Release Notes

Last updated on: March 20th, 2020

The v13 (codename: Beauty Queen) is released, check out our live demo examples. Besides improved performance and bug fixes, this version comes with a major search UI overhaul and makes it cleaner, lighter, and prettier out of the box.

The new v13 script is located here (take out the .min for a readable version): https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js

Note: most of HTML class names were changed, so all custom CSS and the additionalCss parameters need to be checked and updated. Let us know if you need any help with the upgrade. If you use our WordPress or Lightspeed plugins, you don't need to adjust the code manually. Please see further down below.

Upgrading from v12

The exact update procedure depends on the way you've integrated the Site Search 360 code into your site.

- If you're using this:

<script type="module" src="https://cdn.sitesearch360.com/sitesearch360-v12.mjs"></script>
<script nomodule src="https://cdn.sitesearch360.com/sitesearch360-v12.min.js" async></script>

You simply need to replace both lines with just this one:

<script src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js" async></script>

- If you've integrated the code with the help of GTM or our Search Designer and you see this:

var e=document.createElement("script");
e.type="module";
e.src="https://cdn.sitesearch360.com/sitesearch360-v12.mjs";
document.getElementsByTagName("body")[0].appendChild(e);
                            
e=document.createElement("script");
e.type="text/javascript";
e.async=!0;
e.setAttribute("nomodule", "nomodule");
e.src="https://cdn.sitesearch360.com/sitesearch360-v12.min.js";
document.getElementsByTagName("body")[0].appendChild(e);

You need to replace it with the following:

var e=document.createElement("script");
e.async=!0;
e.src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js";
document.getElementsByTagName("body")[0].appendChild(e);
 

Lightspeed app users

We've already updated the plugin for you, so simply go to your site and test your search to see the new search result layout. If there're any elements you'd still like to customize, you can do it by editing Custom CSS under the Plugin Config > Style section. You can also easily adjust your Theme and Aceent colors by entering the hex codes. Let us know if you need any help here.

 

WordPress plugin users

A new version of the plugin (1.1) is now available and it's fully v13-compatible! All you'll have to do is go to your list of Installed Plugins and click Update now. Please note: the new search UI and styles are only applicable to the Custom mode integrations. If you're using a built-in mode, the result layout styling comes from your WordPress theme and we do not override this.

 

Upgrading from v11

- If you're using this:

<script src="https://cdn.sitesearch360.com/sitesearch360-v11.min.js" async></script>

Simply replace the script source with the v13 URL:

<script src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js" async></script>

- In case you've used GTMor our Search Designer and you have this:

var e=document.createElement("script");
e.src="https://cdn.sitesearch360.com/sitesearch360-v11.min.js";
document.getElementsByTagName("body")[0].appendChild(e);

Simply update the script URL so that you get this:

var e=document.createElement("script");
e.src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js";
document.getElementsByTagName("body")[0].appendChild(e);
 

Upgrading from v10 or older versions

You'll need to update your code structure with the help of this migration guide first.


v13 changelog

Default styles and settings that have been changed:

  • by default is set to tabs (instead of none) displayed on top. We've added more space between the tabs and enabled an All results tab by default.
  • is moved to and is set to use a comma separator by default.
  • defines if your data points should be shown in a row or in a column.
  • has a new default label: 'See more'.
  • is set to false by default, makes long product/result titles break into two lines (used to be cut off at the end of the first line) in grid layout.
  • changes the structure and becomes an array of objects.
  • is changed to 'Reset All' instead of 'Clear All', removes all selected filter values.
  • is the label shown next to the filter icon on mobile.
  • is the label shown before the sorting dropdown (e.g. 'Sort by').
  • has a default selector now: #searchButton, in addition to the default #searchBox selector.
  • , , are moved to , , .
  • is deprecated as all images in grid layout are now displayed on top of result titles by default.

New settings:

  • : in addition to a themeColor, you can now assign a secondary color, light blue by default, that is used for interactive elements:
    • Filters, checkboxes, sliders
    • 'See more results' button
    • When hovering over content group tabs and buttons
    • Search button next to the search box
  • can be set to row or column to define how multiple CTA buttons should be displayed.
  • is the label for the search buttons added via Site Search 360, e.g. 'Search' or 'Go!'. By default: undefined, meaning that a magnifying glass icon will be displayed.
  • is the label for the search within a filter group/type, e.g. 'Search by brand'.
  • is the label shown when searching within a filter type doesn't bring any results, e.g. 'Nope, nothing.'
  • and by default: 'Show more' and 'Show less' links which expand/hide long lists of filter options.
  • and defines after how many filter options a search box or a 'Show more' link should be added.
  • is the label for the 'clear' button that resets selected values within a filter type.
  • and are the labels for the range filter units, e.g. $.
  • is called after a navigation (tab/scroll) element is clicked.
  • is called before the results are rendered, e.g. to sort the content groups.
  • by default is a simple CSS pattern but you can provide a URL of a placeholder image of your choice to show it whenever image thumbnails are missing in your search results. If you simply want to hide all missing images, set this to null.
  • is the color used for highlighting, mainly for FAQ search and redirects.
  • defines the language of the search interface and auto-translates all labels for you and can be set to one of the following for now: .
  • is the number of filter groups/types that are fully expanded (by default: 6) when filters are displayed on the left.

Older script versions:

v12.2

  • : you can now make a button trigger the search layover without having to type in a query first (by specifying the button's CSS selector).
  • : enables lazy image loading (they load progressively as you scroll down the search results) which makes your search faster and up to 6 times less data heavy (by default: true).
  • : replaces the 'more results' button and is available only when only one content group is retrieved or if the navigation is tabbed (by default: false).
  • : tells the search engine not to render results with missing or 404 images (by default: false).
  • : we've added a new search result layout type - . The column count can be dynamically defined via . Here's an example. The default layout is still a .
  • : displays the search result image above the title. It is only accepted for 'grid' and 'masonry' layouts (by default: false).
  • : you can now define what data points not to show, or where to force only one entry. It should be an array of data point names, e.g. .
  • : we've added a new 'skeleton' loader type that replaces the 'pulsing circle' and the 'flipping square', it's enabled by default. Here's an example.

v12

  • Filters!
  • Disabling special mobile suggestion layer by default (can be re-enabled manually). To see it in action, test it on a mobile device or resize your browser window to approx. 600px.
  • Changing the default suggestion layout and behavior on mobile devices
  • Adding a special, more compact, JavaScript file (.mjs) for modern browsers (see Installation)
  • Many small UX improvements
  • NOTE: If you're still using v10 or older plugin versions, please refer to this v11 migration guide first.
  • To upgrade from v11 to v12 you'd need to replace this script:
    <script src="https://cdn.sitesearch360.com/sitesearch360-v11.min.js" async></script>
    by these 2 lines of code:
    <script type="module" src="https://cdn.sitesearch360.com/sitesearch360-v12.mjs"></script>
    <script nomodule src="https://cdn.sitesearch360.com/sitesearch360-v12.min.js" async></script>

v11

  • Enhanced tracking
  • Tabbed navigation
  • Voice Search (Chrome only)
  • Smart 404 pages
  • Grid layout out of the box
  • Disabling cookies (take that GDPR)
  • Semantically structured configuration object
  • Search result count now depends on the number of results available to the user in the current context
  • Search results are progressively loaded resulting in even shorter loading times (depending on your page size) and a more compact DOM structure
  • Search result count in navigation can be disabled by
  • Redirect on single search result option by
  • Since v11 has a lot of significant changes, you can't upgrade by simply changing the version number in your javascript. Please refer to this migration guide instead.

v10

  • Boosting Accessibility: Section 509, WCAG 2.0, Google Lighthouse - our search has since been chosen by the accessibility developer guide
  • Improvements for mobile devices
  • Global endpoints: performance improvements due to the global distribution. Your users are now always redirected to the closest server.

v9

  • Completely removed jQuery, no more dependencies
  • Full screen search style
  • Style can be configured within ss360 config, not only CSS

v8

  • Behaves like Windows 9 and iPhone 9, i.e. it never existed :)

v7

  • Many style changes
  • Darkened background for layover
  • Search suggestions can contain HTML
  • Integration with Google Analytics and Google Tag Manager
  • Focus and blur callbacks
  • Easier redirects to search pages via configuration
  • Showing or hiding links in search results
  • Ignoring and renaming the "other" content group
  • Showing "did you mean" for spelling correction

v6

  • Top or side navigation
  • Sorting options based on data points, e.g. date or relevance

v5

  • Initial Public Release
https://docs.sitesearch360.com/images/ss360-release-notes.png
Learn about the major new features that come with every script version of Site Search 360 and follow the instructions to upgrade.