Release Notes

Last updated on: May 31, 2021

The latest script version currently offered by Site Search 360 is v13. Check out our live demo examples.

Besides improved performance and bug fixes, v13 introduced a major search UI overhaul. You can compare v12 and v13 default layouts side by side.

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. Follow our detailed upgrade instructions and let us know if you need any help with the upgrade.

v13 changelog

Default styles and settings that have been changed:

  • style.themeColor

  • voiceSearch.color

  • layout.navigation 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.

  • results.collapseDataPoints is moved to dataPoints.collapseBy and is set to use a comma separator by default.

  • dataPoints.direction defines if your data points should be shown in a row or in a column.

  • results.moreResultsButton has a new default label: 'See more'.

  • layout.singleLineGridTitle 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.

  • results.cta changes the structure and becomes an array of objects.

  • filters.deleteAllLabel is changed to 'Reset All' instead of 'Clear All', removes all selected filter values.

  • filters.toggleButtonLabel is the label shown next to the filter icon on mobile.

  • results.sortingLabel is the label shown before the sorting dropdown (e.g. 'Sort by').

  • searchBox.searchButton has a default selector now: #searchButton, in addition to the default #searchBox selector.

  • results.highlightSearchTerms, results.queryTermScrollIntoViewBlock, results.queryTermHighlightContext are moved to queryTerm.highlight, queryTerm.scrollIntoViewBlock, queryTerm.highlightContext.

  • results.imageOverTitle is deprecated as all images in grid layout are now displayed on top of result titles by default.

New settings in v13

  • style.accentColor: in addition to themeColor, you can now assign an accent 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 (when using the Site Search 360 default search box and button HTML)

  • results.ctaDirection can be set to row or column to define how multiple CTA buttons should be displayed.

  • searchBox.searchButtonLabel 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.

  • filters.multiSelectSearchLabel is the label for the search within a filter group/type, e.g. 'Search by brand'.

  • filters.multiSelectEmptyState is the label shown when searching within a filter type doesn't bring any results, e.g. 'Nope, nothing.'

  • filters.multiSelectShowMoreLabel and filters.multiSelectShowLessLabel by default: 'Show more' and 'Show less' links which expand/hide long lists of filter options.

  • filters.multiSelectSearchThreshold and filters.multiSelectShowMoreThreshold defines after how many filter options a search box or a 'Show more' link should be added.

  • filters.clearGroupLabel is the label for the 'clear' button that resets selected values within a filter type.

  • filters.sliderMinUnitLabel and filters.sliderMaxUnitLabel are the labels for the range filter units, e.g. $.

  • callbacks.navigationClickCallback is called after a navigation (tab/scroll) element is clicked.

  • callbacks.preRender is called before the results are rendered, e.g. to sort the content groups.

  • results.placeholderImage 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.

  • queryTerm.highlightColor is the color used for highlighting, mainly for FAQ search and redirects.

  • language defines the language of the search interface, auto-translates all labels for you, and can be set to one of the following for now: en/de/fr/nl/pl/it/es/mx/tr/pt/fi/sv/ru/cz/no/lt/ro/lv/el/hu

  • filters.expandedGroupsCount is the number of filter groups/types that are fully expanded (by default: 6) when filters are displayed on the left.

v12.2

  • results.layoverTrigger: 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).

  • results.lazyLoadImages: 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).

  • results.inifiniteScroll: 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).

  • results.hideResultsWithoutImage: tells the search engine not to render results with missing or 404 images (by default: false).

  • layout.(mobile/desktop).type: we've added a new search result layout type - masonry. The column count can be dynamically defined via layout.masonryCols. Here's an example. The default layout is still a list.

  • layout.imageOverTitle: displays the search result image above the title. It is only accepted for 'grid' and 'masonry' layouts (by default: false).

  • dataPoints.(exclude/single): 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.,["Category 1", "Category 2"].

  • style.loaderType: we've added a new 'skeleton' loader type that replaces the 'pulsing circle' and the 'flipping square', it is 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 migration guide first.

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

  • Redirect on single search result

  • 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 ss360Config, 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