Create a Simple Faceted Search For Your Drupal 8 Site

Creating a faceted search in Drupal implies some configuration steps. This can be overwhelming to people new to Drupal.

The MixItUp Views Drupal 8 module allows you to create a simplified version of a faceted search based on the taxonomies of the content type. It also provides a nice animation, that makes the user experience even better.

This could be, for example, a good alternative to small commerce sites or other types of online catalogs at their initial state.

Step #1. Install the required modules

• Open the terminal application of your computer
• Go to the root of your Drupal installation (the composer.json file is located inside this directory)
• Type the following command:

composer require drupal/mixitup_views

• Go to the vendor folder of your Drupal installation
• Locate the /patrickkunka directory
• Move its whole content to the /libraries directory (you will have to create a libraries directory if you do not have one already):

• Leave the empty /patrickkunka directory inside the /vendor folder
• Make sure that mixitup.js and mixitup.min.js files are inside /libraries/mixitup/dist

• Click Extend
• Scroll down until you find the MixItUp Views module and check it
• Click Install

Step #2. Create the Taxonomy Terms

For this example, it is necessary to create 3 vocabularies and their respective terms according to this structure.

• Color
  • Black
  • Red
  • Blue
  • Grey
  • Lightblue
  • Orange
  • White
  • Yellow
• Brand
  • Brand A
  • Brand B
• Type
  • Long Sleeve
  • Short sleeve

• Click Structure > Taxonomy > Add vocabulary

Once you have created the first vocabulary, you have to add terms to it.

• Click Add term

• Enter each one of the Color terms and click Save each time

• Once you have added all Color terms, repeat the process for the other 2 vocabularies and their terms

Step #3. Add the Taxonomy Fields to the Article Content Type

• Click Structure > Content types > Article > Add field

• Select the “Taxonomy” term from the dropdown and give this field a proper name. It makes sense to use the same vocabulary name.
• Click Save and continue

• Set the Allowed number of values to Unlimited (only for the Color taxonomy term)
• Click Save field settings

Note: This is because a shirt can have more than one color, but it cannot have long and short sleeves at the same time.

• Select by each Reference type the corresponding vocabulary and click Save settings

• Repeat this process for the other 2 taxonomy terms

This is just an example. For a real product node, you would need other fields like a price field and a link to the cart.

• Click the Manage form display tab
• Locate the Color field and change the field widget to Check boxes/radio buttons
• Click Save

• Click the Manage display tab
• Rearrange the taxonomy fields and hide their labels
• Disable the Tags field by dragging it to the Disabled section
• Click Save

Step #4. Create Content

• Click Content > Add content > Article
• Enter proper text and images. Make sure you select a value for each taxonomy field. This makes sense since we want to filter the results of the view according to the taxonomy terms (you could have made these fields required to avoid empty fields here)
• Click Save

• Repeat the process for each one of the nodes

Step # 5. Create the View

• Click Structure > Views > Add view

• Show Content of Type Article
• Check Create a page
• Under Page Display Settings select MixItUp of Fields (you can use Teasers as well)
• Click Save and edit

• Click the Add button in the Field section of the Views UI

• In the search box type: “appears in: article” (without the double quotes)
• Check the fields Image, Color, Brand, and Type
• Click Add and configure fields

• For each one of the taxonomy terms click Apply
• Change the dimensions of the image field and link it to the Content
• Click Apply

• In the Format section, click the MixItup Settings

This is where you can configure settings, such as the animation of the elements of the view, the aggregation type, and other additional sorting and filtering options. You should take a look at each one of these configurations and read their description.

• Leave the defaults and click Apply
• Save the view

Go to the page and test the filtered search

Congratulations! You have just added another practical module to your site-builder knowledge base. Thanks for reading!