January 09, 2024
Kevin Montgomery
|
SearchStax Studio now includes pre-built site search component libraries for React, Vue, Angular, and other JS-powered front-ends. These components make it easier to build, style, test, and deploy your search experience to your headless front end or Node-powered rendering engine. SearchStax Search UI Components can be used throughout your Sitecore XP rendering flow but they’ll typically perform best when used client side for faster request and response (as opposed to using SSR and calling the SearchStax APIs during that process).
Once you’ve got your Sitecore instance and SearchStax Studio account set up you can begin building custom search experiences. You’ll need to connect your Sitecore instance to your SearchStax account using our Sitecore Connector. After your content and schemas have been updated and indexed you can set up your SearchStax Studio App and configure search fields, relevancy, facets, and other search enhancements.
Sitecore offers several different methods for decoupled or completely headless page rendering. Typically Sitecore rendered an entire page from templates and components before sending the complete HTML to a user for viewing – now Sitecore provides direct integration with frameworks such as React, NextJS, or Node for client and server side rendering Sitecore pages through the JSS SDKs as well as REST and GraphQL APIs for consuming Sitecore content and features from a completely headless front end.
In this example we’ll build a completely headless front end that can consume content and other features from the Sitecore API while also fetching search results from SearchStax Studio using the Search UI Components and underlying APIs.
One of the major benefits of developing your own search experience using our SearchStax Search UI packages is the complete customization of search features and interface as well as adding or embedding search across your entire site and within specific templates or components.
In this example we’ll add a site-wide search box to the app so visitors can start searching from any page or experience they’re currently looking at. We’ll also add a customized site search component to display search results and provide faceting, filtering, related keywords, and other search enhancements.
Before you can begin building your search interface you’ll need to connect your Sitecore instance with SearchStax Studio using our Sitecore connector and configure your search app. A SearchStax Studio search app includes relevance modeling, content to search field mapping, facet and filtering options, as well as other search customization options.
Once your content is indexed and searchable you can start requesting and consuming search results through the Search UI Components packages and APIs.
npx create-sitecore-jss
Start by adding the appropriate Search UI Components package to your app using NPM. In this example we’ll be using React and starting with Sitecore’s Headless Demo app.
cd ~/your-react-app/
npm i @searchstax-inc/searchstudio-ux-react
The Search UI package uses a SearchStaxWrapper component that connects to the SearchStax Studio APIs to handle user requests and show relevant results. Individual search components (such as input box, facets, and individual search results) will need to be encapsulated within a SearchStaxWrapper component. This allows you to use individual features (e.g. showing a site search box in the site navigation) without having to include every other part of the search page.
Typically site search includes a stand-alone result page that includes a search input bar, individual search results, and other search refinement features such as facets, filtering, and pagination. With the SearchStax Search UI components you can create a stand-alone search result page or integrate search features and experience within components or other design or UX features such as overlays, inline search results, and more.
In this example we’ll add a site-wide search box that includes autocomplete along with a stand-alone search page. Since site search is a dynamic experience it makes the most sense to handle search requests and result display on the client side. You can create a search-specific client-side experience within Sitecore by embedding the search-specific JSS app, use the `isServer` method for apps that are backed with server side rendering, or add the dynamic search features outside of the Sitecore Layout integration in the front end app.
<div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
<h5 className="my-0 me-md-auto fw-normal">
<NavLink to="/" className="text-dark">
<img src={logo} alt="Sitecore" />
</NavLink>
</h5>
<nav className="my-2 my-md-0 me-md-3">
<a
className="p-2 text-dark"
href="https://jss.sitecore.com"
target="_blank"
rel="noopener noreferrer"
>
{t('Documentation')}
</a>
<NavLink to="/styleguide" className="p-2 text-dark">
{t('Styleguide')}
</NavLink>
<NavLink to="/graphql" className="p-2 text-dark">
{t('GraphQL')}
</NavLink>
<NavLink to="/search" className="p-2 text-dark">
{t('Search')}
</NavLink>
<SearchStaxWrapper>
<InputWidget />
</SearchStaxWrapper>
</nav>
</div>
);
class AppRoot extends React.Component {
render() {
const { path, Router, graphQLClient } = this.props;
return (
<ApolloProvider client={graphQLClient}>
<SitecoreContext componentFactory={componentFactory} layoutData={this.props.ssrState}>
<Router location={path} context={{}}>
<Routes>
<Route path="/search" element={<SearchPage />} />
<Route path="*" element={<JssRoute isSSR={!!this.props.ssrState} />} />
</Routes>
</Router>
</SitecoreContext>
</ApolloProvider>
);
}
}
The actual search result page is a completely dynamic interface that should be handled entirely on the client side. The SearchStax Search UI Components automatically handle API integration and requests so user searches will be sent directly to your site search app instead of getting passed through a server side rendering delay.
There may be instances where server side rendering of search results is required – in this case the SearchStax Search UI components will need to be implemented in your Node server rendering flow.
return (
<>
<SearchstaxWrapper
searchURL={config.searchURL}
suggesterURL={config.suggesterURL}
trackApiKey={config.trackApiKey}
searchAuth={config.searchAuth}
initialized={initialized}
beforeSearch={beforeSearch}
afterSearch={afterSearch}
authType={config.authType}
router={{ enabled: true }}
language={config.language}
>
<div className="searchstax-page-layout-container">
<InputWidget />
<div className="search-details-container">
<OverviewWidget />
<SortingWidget />
</div>
<div className="searchstax-page-layout-facet-result-container">
<div className="searchstax-page-layout-facet-container">
<FacetsWidget />
</div>
<div className="searchstax-page-layout-result-container">
<ResultWidget />
<ExternalPromotionsWidget />
<RelatedSearchesWidget />
<PaginationWidget />
</div>
</div>
</div>
</SearchstaxWrapper>
</>
);
Site search becomes a much more engaging feature when it’s properly integrated in your site UI and design. Our Search UI Components and Sitecore connector make it much easier to integrate and customize site search while still using your preferred tech stack, workflows, and user experience practices.
Learn more about headless CMS configurations and see how SearchStax Studio can enhance your Sitecore experience.
Copyrights © SearchStax Inc.2014-2024. All Rights Reserved.
SearchStax Site Search solution is engineered to give marketers the agility they need to optimize site search outcomes. Get full visibility into search analytics and make real-time changes with one click.
close
SearchStax Managed Search service automates, manages and scales hosted Solr infrastructure in public or private clouds. Free up developers for value-added tasks and reduce costs with fewer incidents.
close
close