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

Name

Description

rfkId

String ID configured in the CEC.

widget

See following widget object schema.

Widget object

Name

Description

component

UI component to be configured into widget component

type

Enumerator 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!