See how easy it is to set up SearchStax Site Search on Sitecore Experience Edge and create a new search page. This demo is geared to users who want to see how Site Search works in a headless configuration using Sitecore’s Play Summit demo environment.

Hi and welcome. We’re going to do a demo of SearchStax Site Search on Sitecore’s Play! Summit demo.

For anyone who’s not aware, Sitecore is a digital experience platform and they have a demo product that allows you to showcase Sitecore as a content management system and as a marketing system within their systems. This particular one is running Sitecore XP 10.2, and it’s using a headless distribution through Vercel for their webpage. What we’re going to show you is how to install and set up SearchStax Site Search using the Play! Summit demo.

The first thing we’re going to do is acquire SearchStax Site Search. I logged into my SearchStax Studio account, and have gone in to create my app. I’m calling it StudioDemo1. You can see that it’s on the Sitecore 10.2 platform. English is our default language.

Now we’re going into the content management side of Sitecore to install the SearchStax Sitecore module.

  1. Go to Desktop
  2. Go to Development Tools
  3. Select Installation Wizard
  4. Click Choose package and select SearchStax for Sitecore
  5. Click Install. This sets up all the configuration files, the helpers, and setting helper pages to set up the indexes. It’s also going to deploy some of the new code.
  6. Go back to the launchpad and select Sitecore module configuration. This will make it easy for us to set up an index in Sitecore. I’m going to use my demo account here.
  7. Under Search Apps, I’m going to select the StudioDemo1 app, the same one I created in our dashboard.
  8. Click Create an Index
  9. Select the root item. To make it easy, I’m going to show you that our root items are going to be the Home Node. That’s listed under the Edge Website. Enter your password and we’re going to go ahead and save. Click confirm. This is setting up the configuration files in Sitecore to bring a new index into the system.

We’re going back to our launchpad and into the Control Panel to ensure that Sitecore is recognizing our new index.

  1. Under Indexing, click Populate Solr Managed Schema. Here we have all the indexes that are included in the Play! Summit demo. 
  2. Select studiodemo1-965. This maps directly to our StudioDemo1 index in the dashboard.
  3. Select Populate. This will take just a couple seconds. And that succeeded.
  4. Back inside the Control Panel and under Indexing, select Indexing manager. 
  5. Click on studiodemo1-965 and select Rebuild. This should take a couple seconds. Now close.

Now we should be able to bring in data to our dashboard.

1. Within Site Search, click Search API here within our app management.

2. Reload that schema. It’s going to bring all the Sitecore fields into the dashboard so we can use them for various features and functionality.

3. Now step out of the Settings and go into the Dashboard. You’re going to see that we have no analytics. Go ahead and close the task list. 

4. In the menu and under Search, select Results Configuration.I’ve gone ahead and filled out the results display. Essentially what I’ve done is I’ve found all the fields that are in Sitecore, including the standard and custom fields that came through our custom templates. I’ve added the fields that are going to return the items in our result card. 

    • The ribbon field is going to be _templatename 
    • Resulttitle_t is going to be the title 
    • The resulturl_s will be the URL
    • The renderedcontent_t will be the description
    • The _smallupdatedate_tdt and _fullpath will be for metadata

5. Now we’re going to enable Faceting. Click Enable Faceting.

6. For Facet Field, we’re going to base it off _template name. This is going to let us choose different types of content. 

7. Give it the Label called Content Type.

8. Click Publish.

9. Under Sorting, click Enable Sorting via a Dropdown Select. We’re not going to do anything with that right now. We just want to ensure that it’s enabled.

10. Click Save Draft.

Now I’ll show where you can go and adjust your search relevance.This is going to be the place where you’ll want to upload your stopwords, synonyms, and commonly misspelled words. Since this is a demo, I don’t have any dictionaries to upload. 

Next steps are to create a relevance model.

1. In the menu and under Search, select Relevance Modeling.

2. We’re going to call this the Default model. You can have as many as you want, but you need to have one marked as the default. This is the one that most users are going to see.

3. In Search Fields, you want to include all the fields that we want to look for content in. Not necessarily the fields that we’re going to show, this is where we’re going to look for content hits. So we might have quite a few fields.We might want fields like:

    • Display Name
    • Content Name
    • Item Content
    • Name
    • Page Content
    • Description Field
    • Page Title
    • Result URL
    • Rendered Content

4. Save the Draft.

5. Go under Ranking.

6. Select Enable Field Ranking. So if we hit on the result title, we want to boost that as much as we can. We’ll boost that to 100 percent. If it’s in rendered content, we’re going to boost it but not by very much. We’ll say 40 percent.

7. Hit Publish

So again, I’m just configuring the dashboard right now. I haven’t touched anything in Sitecore yet. Assume during this configuration process your development team is off creating your search experience and you’re waiting for that sprint or iteration to complete. So this is kind of that middle period of time when you can configure Site Search without having it implemented yet.

We’re going to create a promotion now. Just for some added context, Play! Summit demo is a conference site. They have vendors, sponsors and sessions. So we want to make sure that our top sponsor, Alba, is listed at the top where the word “sport” is used. 

  1. Under Promotions, click Create Promotion.
  2. Name the promotion. I think it’s just called Alba. Click create.
  3. Ensure Enable this promotion is clicked.
  4. In search terms, we’ll create a search term for “sport” and the condition is “contains” 
  5. In Promotions, I’m going to look for Alba. We want to make sure we use their sponsor page. So that’s going to be the top promoted item when someone searches for the word “sport”.
  6. Click Save Draft.
  7. Click Publish. 

So now we’ve configured the relevance model, some ranking, and a promotion. Now we can do our search preview. You can kind of see what that preview is going to look like here. It’s just that raw information. You can see that facet over here on the left with our types. The next thing I’m going to do is enable our auto-suggest, and I’m going to upload a test file here. Here we have some short words that we’re going to publish. That should, for the most part, be the minimum configuration we need to do for Site Search.

Now imagine you fast forward. Your development team came back and is done with its implementation. Now we have to go through and set up some pages within Sitecore to add a search box in the header as well as activate the search page.

  1. In the Control Panel, select Content Editor.
  2. Click on the Home node, and select Presentation in the top bar.
  3. Click on the Details icon.
  4. In the Layout Details window, we want to switch out this main navigation. Select MainNavigation and click the Change button. You’ll see a new item called MainNavigationWithSearch. Click on it and hit Select.
  5. Click Ok.
  6. And we’re going to go ahead and save that.

The next thing we’re going to do under our search page, is to choose the index. So we’re choosing the index for our search page to point to our StudioDemo index. If we want to use a different search relevance model, we can put that model in here. We’re going to save and make sure that everything gets published. In fact, I’m going to do a full publish.This will take a couple seconds here as we sit and do this publishing. And now our site has been published.

So we’re going to assume everything has been published correctly. We’re going to make sure that our SearchStax templates get published. And we’re also going to make sure that all of our layouts are published. I’m always a fan of making sure that everything gets published. 

We have now published all of our content and are ready to test it. Because this is a headless application and we’re using Vercel, something to keep in mind is that Vercel does a lot of caching. This is to be expected. We’re going to refresh that again. 

You can now see that we have a search box that shows our search. If I start typing sports, you’ll see the type-ahead term here. I’ll click on sport. And you’re going to see our search results page, which didn’t exist a second ago. Now showing, you can see here that Alba, our sponsor, is coming up as our first rank of results.This is using our React accelerator through Vercel. 

Now we’re going to look for everything in the system. There’s 97 things in this system. There’s probably going to be items that you don’t necessarily want to have in your search results that might end up getting indexed. Things like, say the search page, we probably don’t want the search page to actually show up in results. We’re going to go into Site Search here and into our relevance modeling. We want to make sure that we don’t show that search page. 

And this is the full path. Let me see if I can get in here actually inspect that really just one sec. rip this out do I close this edge website home search. That’s pretty easy for me to remember. So where are you going to study here, and we’re going to go into our relevance modeling. And we want to make sure that we don’t show that particular item. So if the search field for full paths, this is just giving you an example of how you use the relevance models that the full path is. And I’m going to copy from cycle here. I don’t want the search page to show up.

And so that is, for the most part, a quick demo of our Site Search product. Our accelerator does have the ability to show cards versus the longform. If we wanted to do something like add facets, you can do that here as well. So let’s just say I wanted to create a facet for date. We’ll see what that does. We’ll make it published date. Oops, I forgot the plus sign. We’re going to hit publish.

Now we’ve gotten another facet, I can come over here and hit the refresh sign. And now we have another facet showing the published date. Here you can see that we had 16 published articles for this particular date. Again, it’s probably not a real-world example of how you might use that, but more an example of how you can add additional facets on the fly. 

We’re also showing only 10 results. I heard we want to make that 20. So we’re going to go back to results display, make that 20 and click enable hit highlighting. Now we’re going to go ahead and publish that out. Once that’s done, we’re going to come back over here. We’re going to hit refresh. And if I searched for the word sports, you’re going to see that we’ve got sports as our hit highlighting. If we had more, we are now showing 20 results. And that’s it. That is how you very quickly implement our Site Search product. 

You know, for some background information, things that we did for the demo. We made sure that we had our code ready to go. And specifically for the Play! Summit demo, we’re deploying our code through GitHub because of the way we deploy. That gets deployed along with all the rest of the docker containers for the Play! Summit demo. So you can really kind of see how your code does play a role in the development process. 

We’re talking about Sitecore from a headless perspective. This is using a completely react app. It’s using all of our UX accelerators. Reach out if you’d like to get access to that through our GitHub. Anyways, I hope this has been an insightful demo, and I look forward to talking with you all at a later date.

Talk to a Solution Architect