How to implement Faceted Search with Sitecore JSS?

How to implement Faceted Search with Sitecore JSS?

In this blog, we will learn how to efficiently implement the faceted search functionality using Sitecore JSS.

Here, you have the option of using a keyword search by utilizing the keyword parameter. This parameter is not mandatory, but it can be utilized to manage user input within a search box.

{ 
search(keyword:"GraphQL") { 
  results { 
    totalCount 
} 
                    

Additionally, faceting is also supported through the use of the facetOn parameter. By passing an array of fields to the facetOn parameter, we can create sidebar components that enable users to efficiently narrow down their queries.

refine their queries. 
{ 
  search(facetOn:["categoryname"]) { 
    facets { 
      name 
    } 
  } 
} 
                        

The API also incorporates pagination functionality, which includes two parameters: "first" and "after". The "first" parameter, an integer, determines the number of results you desire to retrieve. The "after" parameter represents the page cursor or page offset. In the response, we can utilize the "hasNextPage" and "hasPreviousPage" options, which prove beneficial when implementing basic back/next pagination on the search page.

{ 
    search(keyword:"Article") 
    { 
        results 
        { 
            pageInfo { 
            endCursor, 
                hasNextPage, 
            hasPreviousPage, 
            startCursor 
            } 
        } 
    } 
} 
                        

Another crucial parameter we'll utilize is "fieldsEqual". This parameter can accept either an object or an array of objects with "name" and "value" properties. When the query is executed, all of these properties are combined using the AND operator. We can employ "fieldsEqual" to filter our search results and apply facet value filtering as well.

{ 
    search(fieldsEqual:[ 
    {name:"_fullpath", value:"/sitecore/content/home*" }, 
    {name:"categoryname", value:"Article" } 
    ]) { 
    results { 
        items { 
        name 
        } 
    } 
    } 
} 
                        

It's good to be aware of the following parameters, even though we won't be using them in our current context:

1. "rootItem" - This parameter allows us to limit the scope of our search to a specific item by accepting a path or ID. All the results will be descendants of this specified item.

2. "language" - By using this parameter, we can override the context language and filter the results based on a specific language.

3. "latestVersion" - The default value for this parameter is true. When set to true, only the latest versions of the results will be returned, filtering out other versions.

4. "index" - If you have a different or custom Content Search API index that you want to query, you can provide the name of the index using this parameter. It allows you to specify the target index for your search.

Here is the complete query we use to load the initial page content:

{ 
    search( 
    fieldsEqual:[{name:"_fullpath", value:"/sitecore/content/home*" }] 
        facetOn:["contenttype", "category"] 
            first: 5 
            after: "0") { 
    facets { 
        name 
        values { 
        value 
        count 
        } 
    } 
    results { 
        items { 
        item { 
            name 
            path 
            url 
        } 
        } 
        totalCount 
        pageInfo { 
        hasNextPage 
        hasPreviousPage 
        } 
    } 
    } 
} 
                    

When a user chooses a value from a facet, we include the selected facet values using the "fieldsEqual" parameter. The object representing the selected facet value will have the following structure:

{name:"contenttype",value:"Article"}

In conclusion, my experience with prototyping using this GraphQL endpoint was positive, and I would consider utilizing it in future implementations. However, the absence of "or" operations in the "fieldsEqual" query conditions may be a limiting factor. Nonetheless, the functionality of the implemented page met my expectations and incorporated all desired features.

Mitesh Patel - Technical Head - ADDACT

Sitecore || XMCloud || OrderCloud Certified

Mitesh, a distinguished Technical Head at Addact/Addxp, is a prominent figure in Sitecore/XMCloud/OrderCloud certified writing. From Sitecore XM Cloud Developer Certification to Sitecore 10 .NET Developer Certification and Sitecore OrderCloud Certification, Mitesh's expertise is unparalleled. Mitesh is not only a skilled Sitecore CMS developer but also a 12+ years experienced software engineer proficient in various technologies such as MVC, ASP.Net, C#, jQuery, and Azure cloud/AWS.