Using Hooks

Hooks are used by the SearchStax Site Search solution’s various JS Widgets to manipulate data before and after certain web events to customize Site Search functionality.

• beforeSearch hook
• afterSearch hook
• beforeAutosuggest hook
• afterAutosuggest hook
• afterLinkClick hook

beforeSearch hook

This hook can be passed when initializing SearchStax. This function gets called before search is executed so it allows modification to search object to change query, page, itemsPerPage, order, facets and additionalProps, or to cancel search altogether.

Example of usage when we want to cancel search if query is “test”:

beforeSearch(props: ISearchObject) {
  const propsCopy = { ...props }
  if(propsCopy.query === ‘test’) {
	return null;
  } else {
	//modifications can be made to propsCopy before returning to modify the search
	return propsCopy
  }
 }

Another common use case can be altering the query to pass additional query parameters, like the name of a relevance model.

beforeSearch(props: ISearchObject) {
  const propsCopy = { ...props }
  copy.additionalProps = [{model: 'ElevatedResultsModel'}]
	return propsCopy
 }

afterSearch hook

This hook can be passed when initializing SearchStax. This function gets called after search is executed. It allows modification to search results before they get to the render pipeline.

Example of usage:

afterSearch(results: ISearchstaxParsedResult[]) {
  const copy = [...results]
  if(copy[0]) {
    copy[0].title += ‘title suffix’;
  }
  return copy
 }

beforeAutosuggest hook

This hook can be passed when initializing the input widget. This function gets called before the autosuggest call is executed. It allows modification to suggestion props object before it gets converted in to autosuggest call.

Example of usage:

beforeAutosuggest: function (props: ISearchstaxSuggestProps) {
    // gets suggestProps, if passed along further autosuggest will execute, if null then event gets canceled
    // props can be modified and passed along
    const propsCopy = { ...props };
    // propsCopy.term = propsCopy.term + ‘222’;
    return propsCopy;
 }

afterAutosuggest hook

This hook can be passed when initializing the input widget. This function gets called after the autosuggest call returns suggestions. It allows modification to suggestions before they get to the render pipeline.

Example of usage:

afterAutosuggest: function (result: ISearchstaxSuggestResponse) {
    const copy = { ...result };
    return copy;
 }

afterLinkClick hook

This hook can be passed when initializing the result widget. This function gets called after the user clicks on a result item. It allows canceling of the event if the function returns null.

Example of usage:

afterLinkClick: function (result: ISearchstaxParsedResult) {
    // result that was clicked, if passed along further functions will execute, if null then event gets canceled
    const propsCopy = { ...result };
    return propsCopy;
}

Questions?

Do not hesitate to contact the SearchStax Support Desk.