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.
Default styles and settings that have been changed:
layout.navigationby 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.collapseDataPointsis moved to
dataPoints.collapseByand is set to use a comma separator by default.
dataPoints.directiondefines if your data points should be shown in a row or in a column.
results.moreResultsButtonhas a new default label: 'See more'.
layout.singleLineGridTitleis 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.ctachanges the structure and becomes an array of objects.
filters.deleteAllLabelis changed to 'Reset All' instead of 'Clear All', removes all selected filter values.
filters.toggleButtonLabelis the label shown next to the filter icon on mobile.
results.sortingLabelis the label shown before the sorting dropdown (e.g. 'Sort by').
searchBox.searchButtonhas a default selector now: #searchButton, in addition to the default #searchBox selector.
results.queryTermHighlightContextare moved to
results.imageOverTitleis 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.ctaDirectioncan be set to row or column to define how multiple CTA buttons should be displayed.
searchBox.searchButtonLabelis 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.multiSelectSearchLabelis the label for the search within a filter group/type, e.g. 'Search by brand'.
filters.multiSelectEmptyStateis the label shown when searching within a filter type doesn't bring any results, e.g. 'Nope, nothing.'
filters.multiSelectShowLessLabelby default: 'Show more' and 'Show less' links which expand/hide long lists of filter options.
filters.multiSelectShowMoreThresholddefines after how many filter options a search box or a 'Show more' link should be added.
filters.clearGroupLabelis the label for the 'clear' button that resets selected values within a filter type.
filters.sliderMaxUnitLabelare the labels for the range filter units, e.g. $.
callbacks.navigationClickCallbackis called after a navigation (tab/scroll) element is clicked.
callbacks.preRenderis called before the results are rendered, e.g. to sort the content groups.
results.placeholderImageby 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.highlightColoris the color used for highlighting, mainly for FAQ search and redirects.
languagedefines the language of the search interface, auto-translates all labels for you, and can be set to one of the following for now:
filters.expandedGroupsCountis the number of filter groups/types that are fully expanded (by default: 6) when filters are displayed on the left.
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. Here's an example. The default layout is still a
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.
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
Many small UX improvements
NOTE: If you're still using v10 or older plugin versions, please refer to this migration guide first.
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
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.
Completely removed jQuery, no more dependencies
Full screen search style
Style can be configured within ss360Config, not only CSS
Behaves like Windows 9 and iPhone 9, i.e. it never existed :)
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
Top or side navigation
Sorting options based on data points, e.g. date or relevance
Initial Public Release