I recently needed to build a Search Feature on an SXA Commerce Storefront.
SXA Commerce Storefront comes with a built-in Search Feature including plenty of Components and Options as you can see here
But it is all built around Commerce Products and Sellable Items.
In our scenario, we needed a Global Search Feature that includes Products and many more Content types and templates.
We had 2 options on the table:
Try to customize the Commerce Search Components to meet the requirements.
Use SXA Search API (With some extension and customization) and build our own Renderings and Front-End that will directly consume the API.
We opted for option 2 as it gave us more flexibility and was less complex to implement.
In this Blog Post I would like to share some more details about this implementation, hopefully it can serve as a guide if you find yourself in the same situation.
SXA Search API
Let's start by taking a closer look at the SXA Search API.
Results Endpoint:
This is the endpoint responsible for returning the results for your search query and parameters.
URL : {host}/sxa/search/results?l=en&s={Scope Id}&q=somekeyword&e=0&p=10
Query Parameters:
l is for Language
s is for scope (Documentation about SXA Scopes here).
q is for the query keyword(s)
e is for Offset (skip)
p is for Page Size
Full list of parameters can be found here:
Additional parameters such as Filters (Facets) can be added in the format {FacetName} = {FacetValue}
Facets Endpoint:
This endpoint returns the faceted data for the same results query. We will use this to build our Filters component.
URL : {host}/sxa/search/results?l=en&s={Scope Id}&q=somekeyword&f=facet1,facet2...
Query Parameters:
l is for Language
s is for scope
q is for the query keyword(s)
f is for Facet list (Documentation about SXA Facets here).
Implementation Steps:
Step 1 - Scope :
Since this is a global search and not a Products-Only Search, we need to determine what templates we want to be included in our search and build the scope(s) accordingly.
We can also add a boosting rule to have Commerce Products show first in our Search (Optional).
Step 2 - Facets :
There are 2 main reasons we need Facets: Filtering and Sorting.
A Facet is based on an index Field. So we need to determine our Filtering and Sorting Fields and create Facets accordingly.
We may have to create Computed Index Fields if needed.
Step3 - Extension and Customization of OOB APIs:
Based on our requirements and desired User Experienced, we needed some customization.
To determine the level of customization needed, we started by playing around with OOB Results and Facets APIs using Postman, to see how it works and what kind of response we get in different scenarios.
As you can see in the above response for Results Endpoint, Url seemed to be defaulting to Catalog Direct Navigation method. In our case we used Wildcard Navigation method. So that was the first requirement for customization.
Then since our search results page is supposed to display both Products and non-Products Content, we needed some more fields in the response such as:
IsProduct (True, False)
TemplateName
ListPrice (When IsProduct = True)
SellPrice (When IsProduct = True)
Currency
ImageUrl
And more...
To add these customizations we simply created a custom API Controller, made it derive from OOB Sitecore.XA.Feature.Search.Controllers.SearchController. Then copied the code from Action GetResults below and changed to use a custom Response (ResultSet) to include all our additional custom fields.
Step 4 - Create Rendering and UI
Once we had the API response we needed, the next step was to create the Sitecore Controller rendering and the view that will interact with the API to build a headless, fast and flexible Search Experience.
Conclusion:
Using very little customization we were able to benefit from all the great features of SXA Search such Content manageable Scopes, Facets, Sorting Options...and still build a Headless, very flexible and custom search feature that met all the specific requirements.
P.S: Stay tuned for more Blog Posts related to this subject.
Commentaires