1. Bring your own components

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-main 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 main branch, copy the following into your rendering host project without changing the folder structure:

  • The React component and its subcomponents: /src/components/search-experience/

Components are registered automatically once added, so no manual registration is required.

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:
    1. For example, in /Templates/Project/<YOUR_PROJECT>/Components/Search Experience: Right-click Search Experience and then click Insert > New Template.
    2. Enter the name Search Experience and keep the Base template to its default (Templates/System/Templates/Standard template).
    3. Click Next to choose a location for the template. Choose the Search Experience folder you're currently in.
    4. Click Next to create the template.
  2. Choose the newly created template and add a Search field (or similarly named) to store the search source ID and field mappings used by the component.
  3. Set its Type to Plugin available under the Marketplace Types section.
  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.
  5. Now, create a template for the rendering parameters:
    1. For example, in /Templates/Project/<YOUR_PROJECT>/Components/Search Experience/Rendering Parameters: Right-click Rendering Parameters and then click Insert > New Template.
    2. Enter the name Search Experience Parameters and set the Base template to /Templates/Foundation/Headless Experience Accelerator/Presentation/Rendering Parameters/Base Rendering Parameters
    3. Click Next to choose a location for the template. Choose the Rendering Parameters folder you're currently in.
    4. Click Next to create the template.
  6. Choose the newly created template and add a columns field. This provides a configurable columns parameter in the Page builder.

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 Experience, create a rendering named SearchExperience.
  2. In the Parameters Template field, enter the Search Experience Parameters 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.

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