No Preview

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

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.

Anatomy

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:

import { useSearchResults } from '@sitecore-search/react'; const MyTemplate = () => { const { actions: { // Here we destructure the actions that we would like to use. }, context: { // Here we destructure the context variables that we would like to obtain. }, queryResult: { isLoading, data: { // Here we destructure the API response properties. } = {}, }, } = useSearchResults((query) => { query.getRequest(); return { itemsPerPage, }; }); return ( // Here goes the JSX code. ); };

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.

Make the Query hook available

To make the hook available, the SDK needs the template to be registered. This can be made using the widget function:

import { WidgetDataType, widget } from '@sitecore-search/react'; const MySearchResultsWidget = widget(MyTemplate, WidgetDataType.SEARCH_RESULTS, 'content');

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

Make the widget available

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:

import { WidgetsProvider } from '@sitecore-search/react'; <div> <WidgetsProvider env='<environment>' customerKey='<customer key>' apiKey='<api key>' > <MySearchResultsWidget rfkId="my_widget_id" /> </WidgetsProvider> </div>

Note: MySearchResultsWidget can be located anywhere within the WidgetsProvider tag. WidgetsProvider can be seen in more detail here.