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.
Templates are a set of different components and primitives grouped together in order to abstract a behavioral pattern. In other words, different layouts for Sitecore Search Widgets. In templates, you can find different layouts for Search Results, Recommendation and Preview Search widgets.
A template is a regular component with the ability to connect to the Sitecore Search API. It has the layout code (usually written in JSX language)
and the logic that connects to the API through a hook (from now, query hook) present in the lower layers of the SDK (@sitecore-search/react
package).
Example for a Search Results widget template:
Depending on the widget type that we would like to build, the query hook will change.
useRecommendation
and usePreviewSearch
are also available. These hooks will be covered in the hooks section.
To make the hook available, the SDK needs the template to be registered. This can be made using the widget
function:
where the first parameter for widget
is the template itself, the second one a constant that indicates the widget type, and the last one reprenset the entity type.
Constant values can be:
WidgetDataType.SEARCH_RESULTS
WidgetDataType.RECOMMENDATION
WidgetDataType.PREVIEW_SEARCH
Once the widget is registered using the widget
function it is ready to be rendered.
Assuming that we are using MySearchResultsWidget
created above, our code will look like this:
Note: MySearchResultsWidget
can be located anywhere within the WidgetsProvider
tag.
WidgetsProvider
can be seen in more detail here.