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.

How to use a template

The templates include the code to query hook UI components. You can create widget components by passing the UI component to the widget function. At runtime, the widget component renders when data is received for its rfk_id ID.

We provide templates for 2 types of entities: content and product. Based on what type of entity do you need to use, you can select corresponding widget code.

  1. Copy the code from any of the templates of the widget type desired:

Note: All the templates provided have been wrapped with the widget function to be register and available for the SDK.

Note: If you prefer you can use our command line tool @sitecore-search/cli to create the widget templates easily instead to copy and paste the code.

  1. Import the resulting component from (1)
import { WidgetDataType, widget } from '@sitecore-search/react'; import MyPreviewSearchComponent from './path/to/my/preview-search/component'; import MySearchResultComponent from './path/to/my/search-result/component';

Note: Above example includes all the widgets, but those can be created and used in different files.

  1. Start using the widget like we also did on the Introduction page:
import { WidgetsProvider } from '@sitecore-search/react'; <div> <WidgetsProvider env='<environment>' customerKey='<customer key>' apiKey='<api key>' > <MyPreviewSearchComponent rfkId="my_pvs_widget_id" /> <MySearchResultComponent rfkId="my_search_widget_id" /> </WidgetsProvider> </div>

Note: Above example includes all the widgets, but those can be created and used in different files.

Considerations

  • There are many ways to add css to the templates. In here we provide a possible implementation using styled-components but the developer can choose how to handle the css content on its own.
  • We are not providing an icon package but in the templates we are using Radix icons package.