Skip to main content

2021

v13​

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​

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:​

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