How can I display search filters in a view?

Question

I'm working on a site in drupal 8 that uses commerce 2. I'm learning as I go with this and feel like I'm missing something on how everything fits together.

I made a view for products, and configured how products display, and used twig templates to add wrappers and classes etc. This seems to work fine, but when it comes to adding any functionality, Twig doesn't seem to be the place to do it. The config options in Drupal cover layouts and CSS classes but are very complex.

This is confusing when you need to make the markup a certain way. In my case I need to add the following in a horizontal row:

1. number of results found
2. Select dropdown to filter results by a taxonomy
3. Another select for different taxonomy
4. Free text search box

I need to then style these also so I'd really want to control the markup generated, to some degree. How would I go about implementing this in a view?

Answer 1

Below are some guidelines to setting up each of your requirements in a view. Worth noting, in order to display each in the same row, you'll need to customize the view template to combine the exposed filters and the results count from the view header.

• Number of Results Found
  1. In the Header section (middle column) of the View edit page, click ADD.
  2. If your view has multiple displays, be sure to select whether to apply this to all displays in the view, or just the selected/current one in the FOR section.
  3. Select "Result summary" and click the ADD AND CONFIGURE HEADER button.
  4. Edit/customize your results text with the tokens. If you want to still expose the same text pattern if no results are found, check the checkbox "Display even if view has no result"
  5. Click APPLY

---

• Select dropdowns to filter results by a taxonomy
  1. In the Filter Criteria section (near bottom of left column) of the View edit page, click ADD.
  2. If your view has multiple displays, be sure to select whether to apply this to all displays in the view, or just the selected/current one in the FOR section.
  3. Find your custom taxonomy field you wish to filter by. Note, if your field is configured to allow multiple term selection, you'll see two instances of the field listed (the field itself, and the field delta). Pick the field itself.
  4. Click APPLY.
  5. If the field is setup to allow taxonomy terms from multiple taxonomies/vocabularies, select the one you wish to show/filter on. Choose the dropdown option to set the filter as a select element.
  6. Check the checkbox to "Expose this filter to visitors, to allow them to change it"
  7. Select the "single filter" format and update the field label to reflect the label you'd like the user to see. Keep the operator as "is one of". In the righ column, Leave the list of terms unselected to automatically show all terms in the filter.
  8. scroll further down the form, and click the REDUCE DUPLICATES option; optionally- click the REMEMBER THE LAST SELECTION option so that users clicking a back button to return to the page will still see the previous selection.
  9. Finally, click apply to save the filter settings.
  10. If the Auto preview option is enabled, you should now see the select filter in the view preview below the view config section (even if there are no results).

---

• Free text search box
  1. To setup a free text search box, you'll need to use the "Combine fields filter"; but it can only be applied to search the fields configured in the view. (You can add fields and exclude from display). If your view is setup to "Show Content", you'll need to click the "Settings" for the view Format and select "Force Using Fields" to add fields to the view for filtering/searching.
  2. Add the fields for searching (title, body, etc)
  3. In the Filter Criteria section (near bottom of left column) of the View edit page, click ADD.
  4. If your view has multiple displays, be sure to select whether to apply this to all displays in the view, or just the selected/current one in the FOR section.
  5. Find and select the "Combine Fields Filter" and click APPLY.
  6. Check the checkbox to "Expose this filter to visitors, to allow them to change it"
  7. Select the "single filter" format and update the field label to reflect the label you'd like the user to see. Change the operator to "Contains".
  8. scroll further down the form, and click the REDUCE DUPLICATES option; optionally- click the REMEMBER THE LAST SELECTION option so that users clicking a back button to return to the page will still see the previous selection.
  9. scroll even further down and multiselect the applicable search fields.
  10. Finally, click apply to save the filter settings.
  11. If the Auto preview option is enabled, you should now see the search box in the view preview below the view config section (even if there are no results).

---

• Customizing the View Templates
  1. Refer to the "Understanding Views Templates" and "Naming Views Templates" sections of this blog post for a high level rundown of Drupal 8 view templating.
  2. This legacy Views Template listing for Drupal 6 & 7 gives a good rundown of all the various views component templates (view header, view footer, view exposed filters). Most are still applicable in drupal 8, with the .tpl.php file ending swapped out as .html.twig