Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
SDK Query Hooks are React Hooks that allow a developer to connect through the Sitecore Search API.
Additionally, each type of widget will have a corresponding hook. For example, a SearchResults
type widget will have a useSearchResults
hook.
Using the hook, we can get valuable information about the widget behavior:
On the other hand, the hook will also allow us to set the query parameters to configure our widget behavior.
Hook | Description |
---|---|
useSearchResults | Used to get SearchResults data |
useRecommendation | Used to get Recommendation data |
usePreviewSearch | Used to get Preview Search data |
Note that in all cases we have a parameter named initializer which is a function that executes once the component (template) loads. That is useful in the case that we don't want to use the default behavior of the widget and instead, we want to change that. Examples of that can be modifying the context, changing the number of results or applying a filter:
The example above works for Search Results, please note that each widget will have different properties to initialize.
Actions are operations that a widget can execute. Different widget types will have different actions. The following is a list of actions grouped by Widget type:
Action | Description | Available for |
---|---|---|
onKeyphraseChange | When the search term changes | useSearchResults , usePreviewSearch |
onResultsPerPageChange | When the amount of results per page changes | useSearchResults |
onPageNumberChange | When the page number changes | useSearchResults |
onFilterClick | When a filter is clicked | useSearchResults |
onSortChange | When the sort criteria changes | useSearchResults |
onFacetClick | When a facet gets clicked | useSearchResults |
onClearFilters | When all the filters are cleared | useSearchResults |
onItemClick | When an item gets clicked | useSearchResults , useRecommendation , usePreviewSearch |
onNavigationNext | When a next button is clicked | useRecommendation |
onNavigationPrev | When a prev button is clicked | useRecommendation |
onSuggestionAdded | When a suggestion is added to search | usePreviewSearch |
onSuggestionRemoved | When a suggestion is removed to search | usePreviewSearch |