Creating a Custom Facet in Coveo Hive – Part Three

This is the 3rd (and most likely final) blog post in the Creating a Custom Facet in Coveo Hive series. If you’ve completed parts one and two, you’ve got a working custom facet that can be interacted with and can modify the current query and state, and update the search results that appear on the page. The last big piece of functionality, in my opinion, is setting up the facet breadcrumbs. This step is totally optional, and you should check with project management to make sure it falls within scope and the client requested to implement.

I struggled on this piece greatly because I wasn’t able to find any documentation on how to do this for a custom (Hive) facet. I had to contact Coveo Support, who then referred me to a Typescript file in their GitHub repositories which had the code for setting up breadcrumbs (albeit in a language I wasn’t too familiar with). I didn’t quite understand how the code worked, even after getting past the language barriers, and I wasn’t sure which parts I actually needed in my code. Thus, I created this blog post to answer some of those questions, for those that are in my same shoes at some point in the future.

What Functionality Do We Need?

Before thinking about exactly what code is required to implement breadcrumbs, it may help to think about what our goals are, on a high level. If you are unfamiliar with Coveo breadcrumbs, they are pieces of markup that are generated and added to the DOM when a Coveo facet value changes (an option is checked, a value is submitted, etc). By default they appear above the search results. This is often termed the “breadcrumb bar”.

breadcrumb bar

Continue reading “Creating a Custom Facet in Coveo Hive – Part Three”

Creating a Custom Facet in Coveo Hive – Part Two

In my previous blog post, I went over the basics of what I needed to do to set up a custom facet / component in Coveo Hive. In this blog post, I will take a deeper dive into how we can have our custom facet interact with the current Coveo query on the search page and manage Coveo state. Let’s get started.

Updating the Current Coveo Query

At this point, you should have a visible and interact-able facet. When a user enters a value into a field of your facet, checks a box, or makes some other type of facet interaction, you’ll want to make sure the Coveo search page reflects this interaction by showing updated search results. In technical terms, we can achieve this by adding our custom facet interactions to the advanced expression of the current query. We will need to do the following:

  1. Add code to process the query change.
    1. Update the Coveo state.
    2. Then, call executeQuery() to run the buildingQuery event, which will set the advanced expression and cause the search results component to refresh.
    3. Finally, log the search event to Coveo Usage Analytics (optional).

Continue reading “Creating a Custom Facet in Coveo Hive – Part Two”