See how easy it is to set up SearchStax Studio on Sitecore Experience Edge and create a new search page. This demo is geared to users who want to see how Studio works in a headless configuration using Sitecore’s Play Summit demo environment.
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 Studio using the Play! Summit demo.
The first thing we’re going to do is acquire SearchStax Studio. 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.
We’re going back to our launchpad and into the Control Panel to ensure that Sitecore is recognizing our new index.
Now we should be able to bring in data to our dashboard.
1. Within Studio, 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.
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:
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 Studio 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.
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 Studio.
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.
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 Studio 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 Studio 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 Studio 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.