Welcome to this demo, where I will guide you through the process of integrating the SXA (Sitecore Experience Accelerator) search box with Sitecore's out-of-the-box content search and new Sitecore Discover product search API. By following along with this demo, you will learn how to seamlessly combine these powerful features, enabling you to provide an enhanced search experience that encompasses both website content and product searches. Get ready to unlock the full potential of your Sitecore platform by joining me on this exciting journey.

What is Sitecore Discover?

Sitecore Discover is an advanced tool that empowers you to create search experiences that significantly boost customer conversions. With Sitecore Discover, you can deliver hyper-relevant search results and leverage AI-driven, automated merchandising techniques to enhance your customers' digital journey.

Follow this link to learn more about Sitecore Discover: https://www.sitecore.com/products/discover

Getting Started

To get started, the first requirement is to have a Sitecore SXA site in place. Having a Sitecore SXA site serves as the foundation for implementing various features and functionalities that enhance the overall digital experience. With the flexibility and extensibility of Sitecore SXA, you can create engaging and visually appealing websites while leveraging the power of Sitecore's robust content management capabilities. Let's begin this journey by ensuring you have a Sitecore SXA site ready to go.

Let's take a sneak peek at the goals we aim to achieve throughout this demo. Our primary objective is to seamlessly integrate the SXA search box with both the out-of-the-box Sitecore content search and the Sitecore Discover Commerce product search. By accomplishing this integration, we will create a unified and enhanced search experience for users, enabling them to find relevant information and products quickly and effortlessly.

Users can enter a keyword to display the relevant Sitecore content item in the search preview.

In addition, users can look up sellable items from the Sitecore Discover indexes.

By default, the Sitecore Search Box SXA components solely serve indexed items from Solr indexes using the /sxa/search/results endpoint. However, in the next step, I will demonstrate how to override this endpoint to include items from the Sitecore Discover API as well. This customization will expand the search capabilities of the SXA search box, allowing users to retrieve results from both Solr indexes and the Sitecore Discover API.

Overriding Sitecore SXA Search Controller

The Sitecore SXA search controller is responsible for handling search requests and processing the search logic.

To override the Sitecore SXA search controller, you can follow the steps outlined below:

1. Create a custom search controller: Create a new class that inherits from the SXA search controller. This custom search controller will serve as the override for the default SXA search controller.

2. Implement your custom logic: Inside the custom search controller, you can add or modify the methods to introduce your desired customizations. This can include additional search parameters, result filtering, or any other custom functionality you wish to implement.

3. Register the custom search controller: Register your custom search controller in the Sitecore configuration files. This ensures that Sitecore uses your custom controller instead of the default SXA search controller.

4. Deploy and test: Build and deploy your solution to the Sitecore instance. Test the search functionality thoroughly to ensure that the customizations are working as expected.

Create a custom search controller

I'm going to create a new controller named XASearchOverrideController, which will inherit the functionalities of the SearchController class from Sitecore.

This controller features a single action named GetResultsOverride, which accepts a parameter object of type QueryModel.

Implement your custom logic

Within the action, it invokes the GetResults method inherited from the base class, retrieving items from the Solr indexes utilizing the query model.

In the subsequent line, it invokes the private method PerformDiscoverPreviewSearch to initiate a search query to the Sitecore Discover API. To perform a search using the Sitecore Discover API, you will need to obtain an account ID and an API key from the Sitecore Discover CEC portal. I can guide you through the process of acquiring these credentials later on.

Afterwards, a new request body object will be instantiated using the DiscoverPreviewSearchRequest model. Send this request to the HTTP client to receive the jsonResponse string, which can be deserialized into the DiscoverPreviewSearchResponse object. Finally, map the DiscoverPreviewSearchResponse object to a DiscoverPreviewSearchResult, which can then be added to the final response.

The DiscoverPreviewSearchResult class extends the Result class from Sitecore and includes additional properties. Please ensure to update the Html property to the desired format of your choice for the frontend.

Register the custom search controller

To register the new search controller for the sxa/search/results route, you need to create a new pipeline processor.

To register the new controller and pipeline processor, you need to create a new patch. This patch will include the registration of the new controller and the addition of the new pipeline processor.

Deploy and test

Congratulations! You are now ready to test the results by entering different keywords to retrieve content from Sitecore or Sitecore Discover.

If you encounter any errors, you can set a breakpoint and access the following URLs directly in your browser to inspect the results:

https://sxa.storefront.com/sxa/search/results/?q=about&v={68E4A181-B42B-44C9-A209-185472041A14}&p=5&itemid={0B89C789-98DB-4452-8258-7D9998808EC0}

To see products from Sitecore Discover in the response, simply replace the q=about keyword in the above URL with the name of a product.

Obtaining Discover Search API and Key

To obtain the Discover Search API and key, simply log in to the CEC portal and navigate to the Developer Resources page. In that section, you will find the necessary credential details.

Please also check out the following Sitecore Discover in 300 seconds+ videos for a quick introduction to this new powerful search for commerce by Sitecore:

In conclusion, integrating Sitecore SXA with Discover API offers a powerful and seamless search experience for your users, combining the best of both website content and product searches. By following the steps outlined in this article, you can easily customize and enhance your Sitecore platform, unlocking its full potential. With this unified search solution, you'll be better equipped to deliver hyper-relevant search results and improve customer conversions, ultimately elevating your users' digital journey.