Copy the search component from the starter kit

Important

Feature availability is part of a phased rollout. Your organization may not see the search experience functionality yet. It will become available when your environment is included in the rollout.

Before you can start working with search experiences in SitecoreAI, you must either be working with the latest starter kit version, or copy the search component into your project.

This topic describes how to copy the search component from the latest starter kit template and add it to your own SitecoreAI project.

If you would like to start a new project with this starter kit enabled, create a "fork of starters" repository from the source-dev branch.

Note

See Content SDK's Search API for more information on the underlying search capabilities, and Search hooks for implementing search in React and Next.js projects.

Copy the search component from the starter kit to an existing project

From the starter kit search-dev branch, copy the following into your rendering host project without changing the folder structure:

  • The React component and its subcomponents: /src/components/SearchExperience/

Register the component with the rendering host

To register the React component so the Page builder can render it.

  1. Open your rendering host’s component registry, typically src/temp/componentFactory.ts or src/components/componentFactory.ts.

  2. Import the component:

    RequestResponse
    import SearchExperience from './components/SearchExperience/SearchExperience';

  3. Register it in the factory map:

    RequestResponse
    const components = {  
    // ...  
    SearchExperience,
};
export default components;
Important

The Component Name on the Sitecore rendering item must exactly match this exported key (SearchExperience by default). If you rename it, update both the rendering item and the factory map.

Create templates for authored search items

To create Sitecore templates that hold authored data and enable the Search Configuration Manager Marketplace app:

  1. Create a template for search experience items, for example, /Templates/Project/<YOUR_PROJECT>/Search/Search Experience.

  2. Add a Search field (or similarly named) to store the search source ID and field mappings used by the component.

  3. In the Search Experience template, set the Marketplace Types value to Plugin.

  4. Set the Source value to the Search Configuration Manager Marketplace application ID. This enables the Search Configuration Manager tab when editing the component instance.

Create the SearchExperience rendering item

To create a rendering item that describes how SitecoreAI should instantiate the React component.

  1. In the Content Editor, in /sitecore/layout/Renderings/Project/<YOUR_PROJECT>/Search/SearchExperience, create a rendering.

  2. In the Parameters Template field, enter the parameters template you created in the previous procedure.

  3. In the Datasource Location field, enter a fixed path or query such as ./ancestor-or-self::*[@@templatename='Home']/*[@@templatename='Search Experiences']

  4. In the Datasource Template field, enter the Search Experience template created above.

  5. In the Component Name field, enter SearchExperience, or the exact name you registered above.

  6. Click Save.

Make the rendering available to content authors

To add the rendering to the site so authors can insert it in Page builder:

  1. Open your site’s Home item (or site definition item).

  2. Click Presentation > Available Renderings.

  3. Add SearchExperience to the appropriate group. For example, Components > Search.

  4. Click Save and then Publish.

After copying the search component into your project, you can proceed to create a source.

Do you have some feedback for us?

If you have suggestions for improving this article,