Many of the websites we build require some variation of a search feature. Whether the website targets consumers or other businesses, if you have a robust product offering, you want a robust search to match.  

The Common Problem

While Sitefinity offers many advanced content management features, the current search widgets provide a basic search experience. They include a Search Box widget and a Search Results widget.  At a high level, they allow you to search for some terms and get a list of results.  To accomplish more advanced search functionality within Sitefinity, it can be a tricky thing and requires custom development.

Our clients often have website designs that call for that advanced search functionality. In fact, there is one common search experience that repeatedly rises to the top: Faceted Search.  This is the common search view you typically see at Best Buy or Amazon, where you can filter down the items you’re searching for by selecting filters listed at the side of the screen. You can add or remove filters around price, brand, or reviews to quickly change your results.

Typical Best Buy search with filters arpimd brand and price.

As we implemented this search experience for one of our clients, it became very apparent that this should be implemented in a reusable way.  We saw that we could build a foundation to make this process simpler for clients going forward. So we took the learnings we had gathered from our initial implementation, polished them up, and applied them to an external library that could be installed in any Sitefinity site in the future.

The Solution

The key to creating a successful facet search experience is the data.  You need to have good, structured data to search.  Sitefinity allows several methods of organization, but for the search purposes, the ideal data candidates are Taxonomies (or classifications) and Related Data.  Once you determined the data that you will be faceting on, it’s best to submit as much of that data into the search index so that it is available for the display of the results.  This helps to reduce or eliminate the need to lookup additional data for the results display.

For example, if you want to search blog posts you would want to ensure that each blog post has good data - title, author, date, topic - associated with each post. That way, the search results could then filter and display results based on that information. An example of related data could be Author since it is it’s own data entity and could have multiple blog posts.  While an example of a Taxonomy (or tag) could be Topic.

From a Development perspective, Springthrough uses Feather as our first go-to for Sitefinity widget development.  We find the ease of customizing Feather widgets beneficial, and so we decided to implement our search widgets following the feather widget model.  This would allow us to create a collection of widgets that would work for any solution and customizable enough to fit the client’s design.

From a User Experience perspective, we wanted something that’s intuitive to use, quick to display results, yet still customizable to clients needs.  To achieve this we used AngularJS to allow cross-widget communication, display of the widgets, submit the search request, and display results.

The Payoff

We created a collection of 5 separate widgets to give flexibility in the placement of the widgets, and the ability to customize their look (UI) and behavior (UX).  AngularJS provides us a means for the cross-widget communication and customization of the User Experience of each widget.  Following the Feather widget model allows for ease in customizing the User Interface of each widget allowing us to properly match the design of our clients.  Finally, by utilizing Custom Sitefinity Events, we can control how data is placed into the search index in a generic way that’s not specific to client needs.

So why put in the effort up-front to develop the building blocks of faceted search? That upfront development saves our clients hours of work (and dollars) for an activity that we are repeating across projects.

Example of our widgets in action on a Sitefinity-powered website.