Reading time: 5 min read
Create Your Own Search Results Component With Sitecore Search and Next.js
Learn how to create a search results component using Sitecore Search in Next.js
Creating an Effective Search Results Widget in Sitecore Search
A common feature we need for every search functionality is rendering the results. Sitecore Search allows managing the search input with the results. When we have both functionality separated we can keep each one managed separately without over complicating the search as a whole.
The Search Result contain the results and also other features like facets, pagination and sort. Here are some of my blogs on how to setup the fully functional widget with these functionalities.
How to Add a Sort Feature on Your Sitecore Search Component in React or Next.js
How to Create Facets for Your Sitecore Search Component
There are times where we would prefer just showing a certain number of results based on a default criteria. One good example, which we applied recently, is showing a number of pages that are similar to the current page you are viewing.
- How to create your widget in CEC
- Have your source ready
- Open Widgets area
- Add screenshots of Search Results widget
Setting Up the Widget in the Customer Engagement Console (CEC)
Like other widgets this will be pretty much straightforward. We simply need to add a new widget just to capture that this widget will only be used for this purpose. If you do not have any preference and would want to go ahead and use an existing Search Results widget go on ahead and go to the next step.
Next you will see a couple of choices and you will see the Search Results as an option.
You will then see a form which I would normally choose the settings below.
- Widget Name - Your preference, there’s no certain format that is needed.
- RFK_ID - I usually start with
rfkid_and add in a number, eg.rfkid_55. - Variant Name - Use Default since inside each widget you can add multiple variants.
- Will Be Used In - I set this to Page
You will see the review step and you can click on Next.
You’re good to go, make sure to remember the rfk_id since we’ll be using that in our code.
Setting Up Our Widget on the Frontend
Most of the parts of a widget will be the same but I can point out some sections you can actually play around to fit your requirements.
Adding the Widget in Our Sitecore Component
When we setup our Sitecore Component we will need to use WidgetsProvider and add in the following setup. You can import the component from @sitecore-search/react . If you want to learn more about what else we can pass to the WidgetsProvider then check this out.
<WidgetsProvider
env={SEARCH_ENV}
customerKey={SEARCH_CUSTOMER_KEY}
apiKey={SEARCH_API_KEY}
publicSuffix={true}
>
<Recommendation
rfkId="rfkid_33"
source={SEARCH_SOURCE}
pageTitle={page_title_here}
></Recommendation>
</WidgetsProvider>
Adding Your Pre-Set Filters
On your useSearchResults which we import from @sitecore-search/react we can add some filters by default and since we’re only showing the results and nothing else, this will be your only way to add in filters.
const {
widgetRef,
actions: { onItemClick, onKeyphraseChange },
queryResult: {
isLoading,
isFetching,
data: { total_item: totalItems = 0, content: articles = [] } = {},
},
} = useSearchResults({
query: (query) => {
query
.getRequest()
.setSearchFilter(
new FilterAnd([
new FilterNot(new FilterEqual('title', pageTitle)),
new FilterEqual('enmax_pagetype', 'Article Page'),
])
)
.setSources([source]);
},
state: {
itemsPerPage: defaultItemsPerPage,
keyphrase: defaultKeyphrase,
},
});
What we’re trying too look at is the function inside query . As you can see we can use FilterAnd , FilterNot , FilterEqual which can be imported from @sitecore-search/react . This is how we can add in the filters. Based on the setSearchFilter it means not to include any results that match the same title AND only show Article Pages. I then use the itemsPerPage to limit how many items I want to appear on the component. For example, setting it to 4 will only get 4 results.
That’s pretty much everything, you can then use the actions and queryResults options available like data, onItemClick, and many more that can be used. You can learn more about the useSearchResults here.
Where Do We Go From Here?
What we have right now is just a simple Search Results widget. It contains the results based on a key phrase and shows required details based on the data available in our source. We’ve also added pagination into it which makes this even more sophisticated. It doesn’t end there, there are a lot of features given to use by Sitecore Search which we can add into our Search Results widget. We can also add facets and sort which are great tools for a search experience. We can replace the pagination with a Load More functionality which Sitecore has also provided.
Stay tuned as we talk more about these different tools and how you can get your Sitecore Search widgets to the next level.