Release Notes

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.overlayTrigger: you can now make a button trigger the search overlay 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. 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 overlay

• 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