1. High order functions

withPageWidgets function

Use the withPageWidgets high order function to configure a widget component of widget components that renders based on page URL.

Import path

import withPageWidgets from '@sitecore-discover/react';

Arguments

NameDescription
rfkIdString ID configured in the CEC.
widgetSee following widget object schema.

Widget object

NameDescription
componentUI component to be configured into widget component
typeEnumerator for widget type with following values:

WidgetDataType.RECOMMENDATION, WidgetDataType.PREVIEW_SEARCH , or WidgetDataType.SEARCH_RESULTS

Example

import { Widget, usePageWidgets, withPageWidgets } from "@sitecore-discover/react";
import MyGlobalPreviewSearchWidget from "./widget_components/myGlobalPreviewSearchWidget";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";

import MySDKSearchResultsComponent from "./widgets_ui_components/mySDKSearchResultsComponent";

const MySDKSearchResultsWidget = setWidgetType(MySDKSearchResultsComponent, WidgetDataType.SEARCH_RESULTS);

const Loader = () => {
  return <div className="loader">
    Loading...
  </div>
}

const CustomPageWidgets = () => {
  const { isLoading, data: widgets = [] } = usePageWidgets();
  return (
  <>
    {isLoading && <Loader />}
    {!isLoading && widgets.map((rfkId) => {
      if (rfkId === 'sdk_search') {
        return <MySDKSearchResultsWidget rfkId={rfkId} />
      }
      return <Widget rfkId={rfkId} />;
    }) }
  </>);
};

const MyCustomWidget = withPageWidgets(CustomPageWidgets);

const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearchWidget rfkId="header_ps" />
            </header>

            <div class="content">
                <MyCustomWidget />
            </div>

            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
If you have suggestions for improving this article, let us know!