How To Configure the SearchBox

About SmartHub SearchBox

The SmartHub SearchBox module Enables you to execute queries.

How to Configure the SmartHub SearchBox

To configure the SearchBox component, edit the Custom Settings file that you are using for your SmartHub pages.

For more information about using Custom Settings, seeHow to Customize Your SmartHub User Interface.

  • You can change the SearchBox options by editing the SearchBox code in your custom settings file.
  • You can override any setting by adding it to the SH.SearchBox.CustomSettings namespace.
Example: Out-of-the-box SearchBox Configuration
SH.SearchBox.CustomSettings = {	
		"SearchBoxParentSelector":{
			Enabled: true,
			SearchBoxTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/searchboxTemplate.html",
			ScopedSearchTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/scopedSearchTemplate.html",
			KeepRefinersTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/keepRefinersTemplate.html",
			ShowScopedSearch:true,
			ShowKeepRefiners:true,
			RemoveResultsOnClear:true,
			ShowSelectedScope:false,
			EnableDuplicateSearch:true,
			ModuleDetails: {
				SearchBoxPlaceholder: "Search...".toLocaleString(),
				KeepRefinersLabel: "Keep Refiners".toLocaleString()
			}
		}
			
	}

Make sure that an element with the identifier specified in the SearchBoxParentSelector setting exists on your page;

The SearchBoxParentSelector is also the key used to identify the SearchBox.

The out-of-the-box value for the SmartHub SearchBox is ".sh-search-section".

SH.SearchBox.CustomSettings = {	
		".sh-search-section":{
			Enabled: true,
			SearchBoxTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/searchboxTemplate.html",
			ScopedSearchTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/scopedSearchTemplate.html",
			KeepRefinersTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/keepRefinersTemplate.html",
			ShowScopedSearch:true,
			ShowKeepRefiners:true,
			RemoveResultsOnClear:true,
			ShowSelectedScope:false,
			EnableDuplicateSearch:true,
			ModuleDetails: {
				SearchBoxPlaceholder: "Search...".toLocaleString(),
				KeepRefinersLabel: "Keep Refiners".toLocaleString()
			}
		}
			
	}

SearchBox Settings

SearchBox settings:

Setting

Value

Description
Enabled

Boolean

Default: false

 If this is set to "false" the component does not make any changes to SmartHub and doesn't load any dependency

SearchBoxTemplatePath

string

Default: 

SH.RootLevelURL + "/modules/SearchBox/templates/searchboxTemplate.html"

 The path to the template used for the SearchBox

ScopedSearchTemplatePath

string

Default:

SH.RootLevelURL + "/modules/SearchBox/templates/scopedSearchTemplate.html"

 The path to the template used for the ScopedSearch verticals

KeepRefinersTemplatePath

string

Default:

SH.RootLevelURL + "/modules/SearchBox/templates/keepRefinersTemplate.html"

 The path to the template used for the KeepRefiners toggle

ShowScopedSearch

Boolean

Default: true

 Enables you to show/ hide the ScopedSearch selector

ShowKeepRefiners

Boolean

Default: true

Enables you to show/ hide the KeepRefiners toggle.

If there are no refiners on the page the KeepRefiners toggle will be automatically disabled.

RemoveResultsOnClear

Boolean

Default: true

 Enables you to clear the results when you remove the text from the SearchBox

ShowSelectedScope

Boolean

Default: false

 Enables you to show/ hide the name of the selected scope

EnableDuplicateSearch

Boolean

Default: true

 Enables you to execute multiple queries for the same query text

ModuleDetails

Object

Default:

{
     SearchBoxPlaceholder: "Search...".toLocaleString(),
     KeepRefinersLabel: "Keep Refiners".toLocaleString()
 }

Contains the labels used in the SearchBox

Component

The SearchBox  has a special container that should be used as a container when showing different components that need to be next to the SearchBox.

That container has the class ".searchbox-widgets" and it should be targeted via the SearchBoxParentSelector. 

Example:

".sh-search-section .searchbox-widgets"

Example showing the personalization link:

Exposed Functions and Available Events

Available Events

Event name Trigger Data

SearchboxAdded

 Triggered when the SearchBox is created

{SearchBoxKey: key }