OrderCloudSearchProvider

The OrderCloudSearchProvider is the root-level provider in a React application integrated using Search JS SDK with the Sitecore Search platform and Sitecore OrderCloud. It allows the use of SDK query hooks in its inner components.

Configuration

The following table lists the properties of the OrderCloudSearchProvider component.

Name	Type	Description
`trackConsent`	boolean	If `false`, a cookie is not set and existing cookies are deleted. Default: `true`
`publicSuffix`	boolean	If `false`, the domain is not a subdomain of a top-level or apex domain that restricts cookies. Default: `true`
`discoverDomainId`	string	Required. Domain ID retrieved from the Developer resources section of the Sitecore Search user interface.
`orderCloudRegion`	string	Required. Region to which OrderCloud is deployed. Acceptable values are australiaEast, europeWest, japanEast, usEast, and usWest.
`searchEnv`	string	Required. An environment from those declared in the Sitecore Search interface. Example: prod
`searchApiKey`	string	Required. API key retrieved from the Developer resources section of the Sitecore Search interface.
`requestMiddleware`	async function	Required. Async function that works as a middleware. It is triggered before any request.

OrderCloud Controller

All requests made from an OrderCloud application, built using JS SDK, require values for the following two properties: supplierId and requiredInventoryLocations. Search JS SDK provides the OCController component to add or edit them as shown in the following code block.

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

OCController.getContext().setSupplierId('1234');
OCController.getContext().setRequiredInventoryLocations('Inventory location');

Import path

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

Example

The following code block is an example of how you can use the provider, the OrderCloudSearchProvider component, with an async middleware function, configurations for Search, and OrderCloud data.

import { OCController, OrderCloudSearchProvider } from '@sitecore-search/react';

const SEARCH_CONFIG = {
  discoverDomainId: string,
  orderCloudRegion: string,
  searchEnv: string,
  searchApiKey: string
};

const Root = () => {

    OCController.getContext().setSupplierId('1234');
    OCController.getContext().setRequiredInventoryLocations('Inventory location');

    return (
        <OrderCloudSearchProvider
        requestMiddleware = {async () => {
          console.log('Refreshing the token...')
          refreshToken()
            .then(() => {
              console.log('Token refreshed')
            })
            .catch((err) => {
              console.log('Token could not be refreshed')
              console.error(err)
            })
        }}
        trackConsent={tracking}
        publicSuffix="true"
        discoverDomainId="222222"
        orderCloudRegion="usWest"
        searchEnv="dev"
        searchApiKey="API KEY GOES HERE"
        >
            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearch rfkId="header_ps" />
            </header>

            <div class="content">
                OTHER WIDGET COMPONENTS GO HERE
            </div>

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

        </OrderCloudSearchProvider>
)};

If you have suggestions for improving this article, let us know!