Query

Container for entering a query in a search box. It requires Search configuration in your StoreFront configuration.

Provided Aliases: $query

Example

<gb-query show-sayt="{ false }"></gb-query>

Properties

Property	Type	Default	Required	Notes
showSayt	boolean	true	Yes	true when SAYT is shown, false otherwise.

State

Property	Type	Default	Notes
register(tag)	function		Registers the given search box tag (gb-search-box component) with the query component.
submit()	function		Sends a search action using the value in search box.

Events

• This component does not listen for any events.

Child Components: Search Box

A container for the search input field.

Properties

Property	Type	Default	Required	Notes
register	boolean	false		true registers the search-box component with the autocomplete service, false otherwise.

Example

<gb-search-box></gb-search-box>

State

Property	Type	Default	Notes
originalQuery	string	null	The original search term used when the search action was sent.
onKeyDown()	function		Prevents the default action of the event.
onKeyUp()	function		Sends an action to update the autocomplete query.

onKeyDown()

• event: InputKeyboardEvent

Prevents the default action of the event.

onKeyUp()

• event: InputKeyboardEvent

Sends an action to update the autocomplete query.

Events

Event	Affected State Properties
'original_query_updated'	originalQuery

Child Components: Submit

The container for the submit button.

• This component does not have any properties.
• This component does not listen for any events.

Example

<gb-submit></gb-submit>

State

Property	Type	Default	Notes
onClick()	function		Submits the query.

Child Components: Reset

The container for the query reset button.

• This component does not have any properties.
• This component does not listen for any events.

Example

<gb-reset></gb-reset>

State

Property	Type	Default	Notes
onClick	function		Resets the query.

Child Components: SAYT

The SAYT component for the SAYT engine display.