Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

How to Configure Faceted Search for Drupal 8 (and 9) – An easy step-by-step tutorial

Parent Feed: 

Faceted search offers users with a superior search experience by displaying filters against their search results. It is particularly useful for websites having large catalogues and listings. Once the user types in their search query, they will be presented with a list of relevant filter options to further narrow down their search. These filtering elements are facets.

Previously Facet API in Drupal 7, the Facet module in Drupal 8 enables your website with faceted searching abilities. Facets also supports Drupal 9! Let’s look at configuring and implementing Faceted search with Drupal’s own search server, Search API.

Faceted Search

What is Faceted Search?

If your users are finding it hard to see what they are searching for even after keying in their search query, they are bound to get frustrated. Faceted search provides users with multiple filters at the same time for the various attributes of the content. The facets provided are based on the search query the user has executed. Facets will also display the number of matched results (usually within brackets) next to it. Let’s take a look at this below screenshot to understand Facets better-

Facets Module for Drupal 8

In one of our recent Drupal 8 projects, a quick search for Homes in Columbia on this website presents to you with facets like Communities, Hot Deals, Quick Move-ins and more. You will also see the count of the results next to each facet. So, a query with “Columbia” keyword is sent to the search server to retrieve the already configured and indexed categories (Communities, Hot Deals, etc.)

Installing the Facets Module for Drupal 8

As previously discussed, we will be implementing Faceted search using Drupal’s Search API module. 

Step 1: Enabling the modules

Install and enable these modules
•    The Facet Module 
•    Search API module

Step 2: Creating Content Types

Create the content you would like to include in the faceted search by adding Content types as shown below. You can also use the default content types provided by Drupal.

Create Content Types
   Step 2: Create Content Types


Step 3: Configuring the Search server

Navigate to Configuration -> Search and metadata -> Search-API from the admin interface to configure your search server. Give a name to your search server (here - data server). 

Configure the Search server
   Step 3: Configure the Search server

Step 4: Configuring the Search Index

Next, configure the search index to improve the search performance. Navigate to Configuration -> Search and metadata -> Search-API -> Index -> data_index.

Configuring the Search Index
   
    Step 4: Configuring the Search Index

Give a name to your index and then select Content as your Datasources since we will be indexing the Content entities here.
You can then move on to the next section - Configuring the Datasource (here – Content). Here you can choose to select all the bundles or only select a few from the below list to index.
Next, select your server that you had already created (here - data server). Select the “Index items immediately” option to begin the indexing process. Click on Save.

Configuring the Datasource
   
   Configuring the Datasource


Step 5: Adding Fields for Indexing

Next, we need to add Fields to be indexed. Navigate to Configuration -> Search and metadata ->Search API -> data index and select the Fields tab. Click on the Add fields button to create fields according to your requirement.

Step 5: Adding Fields for Indexing

  Step 5: Adding Fields for Indexing


Step 6: Indexing the Content

Under the same location, click on the View tab to start the process of indexing your content. In the Start Indexing Now section, click on the Index Now button. It will then show you a progress bar with the status of the number of items that have been indexed.

Faceted Search
 
   Step 6: Index the Content

Step 7: Creating a View

Now we will be creating a view for the data that needs to be indexed and displayed to your users. Navigate to Structure -> Views -> Add View.

Creating a View

   Step 7: Creating a View

Give a name for the View.
Under View Settings dropdown list, select the index that you have created in Step 4.
Create a page for your search results by clicking on the Create a page checkbox under the Page Settings tab. Give a name and a path for the same. 
Under Items to Display, select 0 if you want to display all the results in one page. Else, select a number of results to be displayed. 
Under Page Display settings, you can select the format in which you want to display your results – Table, Grid, HTML list or Unformatted list. We have selected Unformatted list here. Click on Save.

Step 8: Adding Fields to the View

Here we will be adding fields that we have indexed earlier to the View.
Go to Views, click on Add button next to the Fields section. Select the Fields, click on Add and Configure. 
Under Render Settings, select the Link to Content checkbox so that the results displayed are clickable. 
Click Save.

Adding Fields to the View
  
   Step 8: Adding Fields to the View


Step 9: Configuring the Facets

Now let’s begin configuring and enabling the facets. Navigate to Configuration -> Search and meta data -> Facets

Click on the Add Facet button.

Configuring the Facets
  
  Step 9: Configuring the Facets

Select the Facet Source – This will be your View that you created previously.
Select the Field – This will display the fields you had added for indexing in Step 5.
Give a name to the Facet.
Click on Save.

Next, you will then see more configuration options for displaying the facets (as shown in the below image). Widgets will list out a number of options like List of links, array, dropdown, etc. You can choose what suits your website the best.
Select the “Transform entity ID to label” to avoid displaying the machine name of the content type.
Click on Save.

Faceted Search
Configuring the Facets

Step 10: Placing the Facet blocks in the chosen page regions 

Next, place the Facets you created as blocks in a page region of your choice. 
Navigate to Structure -> Block Layout.
Select the region of the page where you would like to place the block containing the Facets.
Here, we are selecting Sidebar. Click on the Place Block button next to the Sidebar.
In the next dialog box, search for the Facet name and click on Place Block.

Placing the Facet blocks in the chosen page regions

Step 10: Placing the Facet blocks in the chosen page regions


In the Configure Block section, mention the Search page path that you had previously created. Here -“site-search” is our page we had created. 
Give a display name for your Block and select the Display title checkbox if you want the block name to be displayed (here – Type).
Click on Save Block.

The Result

And just like that, your faceted search page and functionality is ready! Notice the Facet called Type (display name) that has Basic page and Article listed as content types to filter against.

Result: The Faceted Search Page

Result: The Faceted Search Page
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web