Widget templates

Widgets are the configurations of search experiences. With a variety of tools and controls, content strategists configure widgets in Sitecore Search. In the Sitecore Search interface, you can also find the configuration for your domain, including authentication, entities, attributes, sources, and features.

Sitecore Search widgets are dynamic components added to a page or an email to deliver specific experiences. Their primary purpose is to display content from Search. Every widget has a unique property called rfk_id.

We recommend that you familiarize yourself with the console. You may need to access various settings from the console during integration.

Widget components are UI components that are registered with Search JS SDK at runtime. They contain the code necessary to request content from Search services and render it. Only banner and HTML block widget components are included in the SDK because they are completely pre-configured.

Widget templates

A widget template contains different components and UI primitives to abstract a specific behavioral pattern. Essentially, it is a layout for a widget. In the Search UI components package package, you can find various templates for widgets populated with data from Search.

Written in JSX, a template is a component that contains code for the layout and the logic to connect with Search API through a query hook. Templates for different widget types have different query hooks, actions and state variables. The query hooks are included in the JS SDK.

import { useSearchResults } from '@sitecore-search/react';

    const MyTemplate = () => {
        const {
            widgetRef,
            actions: {
                // Here, insert the actions you want to use.
            },
            state: {
                // Here, insert the variables you want to use to describe the state. 
             },
            queryResult: {
                isLoading,
                data: {
                    // Here, insert the API response properties you want to use.
                } = {},
            },
        } = useSearchResults({
            query: (query) => {query.getRequest().setOffset(10);} // Optional. This function initializes the quest with provided values
            state: {
                itemsPerPage,
            }
        });

        return (
            // Here goes the JSX code.
        );
    };

import { WidgetDataType, widget } from '@sitecore-search/react';

const MySearchResultsWidget = widget(MyTemplate, WidgetDataType.SEARCH_RESULTS, 'content');

import { WidgetsProvider } from '@sitecore-search/react';

    <div>
      <WidgetsProvider
        env='<environment>'
        customerKey='<customer key>'
        apiKey='<api key>'
      >
        <MySearchResultsWidget rfkId="my_widget_id" />
      </WidgetsProvider>
    </div>