SAYT

SAYT engine display. Requires Autocomplete configuration in your StoreFront configuration.

Provided Aliases: $sayt

Structure

<gb-sayt>
  <div if="{ $sayt.isActive }">
    <gb-recommendations if="{ $sayt.showRecommendations }"></gb-recommendations>
    <gb-sayt-autocomplete if="{ !$sayt.showRecommendations }" labels="{ props.labels }">
      <gb-sayt-categories>
        <gb-list items="{ $autocomplete.categoryValues }" item-alias="categoryValue">
          <gb-link class="gb-autocomplete-target" on-click="{ $saytCategories.onClick($categoryValue) }">
            <gb-raw content="{ $sayt.highlight($categoryValue, '<b>$&</b>') }"></gb-raw>
            in
            <span class="gb-autocomplete-category">{ $autocomplete.category }</span>
          </gb-link>
        </gb-list>
      </gb-sayt-categories>
      <gb-sayt-search-terms labels="{ props.labels }">
        <gb-list items="{ $autocomplete.suggestions }" item-alias="suggestion">
          <gb-link class="gb-autocomplete-target" on-click="{ $searchTerms.onClick($suggestion.value) }">
            <gb-raw content="{ $sayt.highlight($suggestion.value, '<b>$&</b>') }"></gb-raw>
          </gb-link>
        </gb-list>
      </gb-sayt-search-terms>
      <gb-sayt-navigations>
        <gb-list items="{ $autocomplete.navigations }" item-alias="navigation">
          <gb-sayt-refinements>
            <h4>{ $navigation.field }</h4>
            <gb-list items="{ $navigation.refinements }" item-alias="refinement">
              <gb-link class="gb-autocomplete-target" on-click="{ $navigations.onClick($navigation.field, $refinement) }">
                <gb-raw content="{ $sayt.highlight($refinement, '<b>$&</b>') }"></gb-raw>
              </gb-link>
            </gb-list>
          </gb-sayt-refinements>
        </gb-list>
      </gb-sayt-navigations>
    </gb-sayt-autocomplete>
    <gb-sayt-products if="{ $sayt.showProducts && !$sayt.showRecommendations }">
      <gb-list items="{ $saytProducts.products }">
        <gb-product product="{ $item }">
          <gb-link url="{ $product.link() }" on-click="{ $product.onClick }">
            <img riot-src="{ $product.data.image }" alt="" />
          </gb-link>
          <gb-link url="{ $product.link() }" on-click="{ $product.onClick }">{ $product.data.title }</gb-link>
          <p>{ $product.data.price }</p>
        </gb-product>
      </gb-list>
    </gb-sayt-products>
  </div>
</gb-sayt>

Example Implementation

<gb-sayt></gb-sayt>

Properties

Property	Type	Default	Required	Notes
`labels.trending`	string	`'Trending'`		Will be displayed next to recommended suggestions.
`recommendations`	boolean	`false`		Set to `true` to enable the display of recommended products on focus.

State

Property	Type	Default	Notes
`isActive`	boolean	`true`	`true` when SAYT is in the current result set, `false` otherwise.
`showProducts`	boolean	`true`	`true` when there are SAYT products in the current result set, `false` otherwise.
`showRecommendations`	boolean	`false`	`true` when the recommended products panel should be displayed, `false` otherwise.
`highlight(value, replacement)`	function		See more below.

highlight(value, replacement)

value: string - the term to highlight
replacement: string - the replacement value for the query

Replaces the value in the autocomplete suggestion with the replacement. For example:

highlight('har', '<b>$&</b>');
// given the suggestion 'harry'
// returns '<b>har</b>ry'

Events

Event	Affected State Properties
`'sayt:show'`	`isActive`
`'sayt:hide'`	`isActive`
`'sayt:show_recommendations'`	`showRecommendations`
`'autocomplete_query_updated'`	`showRecommendations`
`'url:updated'`	`isActive`

Child Components: Recommendations

The recommendations component. Requires configuration settings in the autocomplete section of your StoreFront configuration. You must set recommendations: true in your sayt property in tags in order for recommendations to be visible in the SAYT component. For example:

// StoreFront Configuration
new storefront({
  ...
  autocomplete: {
    ...
    recommendations: {
      suggestionCount: 2,
      suggestionMode: 'popular',
      location: true
    }
  },
  tags: {
    sayt: {
      recommendations: true
    }
  }
})

Example

<gb-recommendations></gb-recommendations>

Child Components: Autocomplete

A container to display the autocomplete SAYT Suggestions based on a passed in query. Not to be used outside of the SAYT container.

Provided Aliases: $autocomplete

Example

<gb-sayt-autocomplete></gb-sayt-autocomplete>

Properties

This component does not have any properties.

State

Property	Type	Default	Event	Event Handler	Description
selected	number	`-1`	`'sayt:activate_next'`, `'sayt:activate_previous'`, `'sayt:select_active'`	`activateNext()`, `activatePrevious()`, `selectActive()`	The index of the selected autocomplete suggestion, `-1` if none are selected.
category	string				The field of the autocomplete category as returned in the response.
categoryValues	string[]				The value of the autocomplete category as returned in the response.
suggestions	string[]				The suggested terms based on the query as returned in the response.
navigations	Store.Autocomplete.Navigation[]				The navigation suggestions as returned in the response.

Events

Event	Affected State Properties
`'sayt:activate_next'`	`selected`
`'sayt:activate_previous'`	`selected`
`'sayt:select_active'`	`selected`

Child Components: Categories

Displays the autocomplete SAYT suggestions for a specific category. Not to be used outside of the SAYT container.

Provided Aliases: $saytCategories

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

Example

<gb-sayt-categories></gb-sayt-categories>

State

Property	Type	Default	Description
`onClick`	function		Sends an action to update the search with the given `value`.`value`: string - the suggested term

Child Components: Search Terms

Displays the autocomplete SAYT suggestion search terms. Not to be used outside of the SAYT container.

Provided Aliases: $searchTerms

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

Example

<gb-sayt-search-terms></gb-sayt-search-terms>

State

Property	Type	Default
`onClick`	function

onClick

Sends an action to update the search with the given query.

query: string - the suggested term

Child Components: Navigations

Displays the autocomplete SAYT suggestions for navigations. Not to be used outside of the SAYT container.

Provided Aliases: $navigations

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

Example

<gb-sayt-navigations></gb-sayt-navigations>

State

Property	Type	Default	Description
`onClick`	function		Sends an action to update the search with the given navigation. `field`: string - the suggested navigation field. `value`: string - the suggested navigation value.

Child Components: Refinements

Displays the autocomplete SAYT suggestion refinements for a given navigation. Not to be used outside of the SAYT container.

This component does not have any properties.
This component does not have any properties in state.
This component does not listen for any events.

Example

<gb-sayt-refinements></gb-sayt-refinements>

Child Components: SAYT Products

Displays the SAYT product suggestions. Not to be used outside of the SAYT container.

Note: By default the search string is used to fetch product images See storefront configuration for more information

Provided Aliases: $saytProducts

Example

<gb-sayt-products></gb-sayt-products>

State

Property	Type	Default	Notes
`products`	`object[]`	`[]`	The SAYT suggested products given the query.

Events

Event	Affected State Properties
`'autocomplete_products_updated'`	`products`