Integrating using Search JS Data package

Sitecore Search is a headless search engine that can be personalized for visitors. It offers entity-based searches by indexing searchable content and storing the indexes as entities. Entities are distinct, search-indexable object types with unique structures that represent different categories of content.

All JavaScript projects, irrespective of framework or flavor, can use SearchJS Data package to create search experiences configured in Sitecore Search.

Configuration

The Customer Engagement Console (CEC) is an important part of your implementation because it contains all the configuration for your domain, including authentication, entities, attributes, sources, and features.

Content strategists configure widgets or search experience configurations in the CEC. Developers create widget components or UI elements to display search results in an application.

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

A typical search experience

In a typical search experience, and interactions with widget components in your application, the user:

  1. Submits a keyphrase to search.

  2. Views search results.

  3. Clicks Sort to trigger a sorted search.

  4. Views search results.

  5. Clicks an item to view, download, or bookmark it, or another conversion action.

To personalize search results, visitor and webpage information is included in data requests as well as the required entity type. This guarantees that only those entities required to populate the widget are searched and received.

Integration architecture

Your application, integrated using the JS Data package, communicates with Search services through DataProvider, the singleton instance. At runtime, it relays requests built using the various methods, objects, and types, and receives responses in predefined types.

Requests traveling from a component to Search API and back.

The data package is JS framework agnostic and includes objects and methods you can use to build requests and parse responses. Among the many use cases covered are:

You can also find key reference documentation for response objects and methods to track user interactions.

Beginning integration

You can begin integration using JS Data package at any point in the development process. The model used in your UI components must match or map with the entity in a request. Mismatches can cause missing data or errors.

Before you begin integration, you need to:

  • Create an inventory of widgets and their respective UI in your application.

  • Make sure the widgets are published.

  • Fix mismatches between the CEC entities and front-end models.

Make your first search query

Making your first search query using the JS Data package is a walkthrough that covers installation of the package and creation of query and widget objects.

Do you have some feedback for us?

If you have suggestions for improving this article,