Introduction to Sitecore Discover JS SDK

Using Sitecore Discover JS SDK and UI Components packages is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively created for React. You can install them in your project to access their contents. At compile time, the JS SDK is integrated into your React browser application.

The Customer Engagement Console (CEC)

The CEC is an important part of your implementation because all configuration is stored there.

In Discover, your catalog is regularly updated using feed APIs. The CEC contains the definitions for the product and category objects or entities, that are extracted from the feeds. When the Discover service receives a request, all entities matching the request are returned. The returned items are structured according to their configured entity, product or category.

The CEC contains the configuration required to push data to your website or implementation.

Discover experiences are built with pages and widgets. At runtime requests, the service responds to requests for data from the UI. From a typical Model View Controller (MVC) perspective, the following describes the role of the CEC at run time:

  • The Model is the Discover API response based the configuration in the CEC and context provided in the request.

  • The View is made of UI components representing widgets and their host page.

  • The Controller is implemented by the query hooks to coordinate communication and manage the state of UI components.

Integration architecture when using the JS SDK

At runtime, the JS SDK uses its built-in methods to access the Discover API. Every request returns configuration data for your implementation from the CEC. The following diagram shows how the JS SDK orchestrates authentication, data requests and results, page and widget display, and event tracking.

Requests traveling from component to Search API and back.

On a lower level, your React application contains widget or UI components. They connect with the API endpoints by using the query hooks and the API adapter from the JS SDK. You can populate various UI components with values from the response.

Do you have some feedback for us?

If you have suggestions for improving this article,