Providing users the capability to search content within Drupal will help you ensure that the various content types are easily discoverable. Whenever a user cannot find content they are looking for, they will generally default to using some sort of global search. Earlier, we developed a Search form block that we placed within the main menu to globally search our site. In this chapter, we will circle around this block and focus on the Search results page that is displayed.
- We will begin with reviewing the mockup of our search page and identify how our search form input and any search results will need to be presented for display
- Next, we will take a closer look at search pages in core to learn how to configure what will be displayed in our results
- Finally, we will extend upon search by working with the Search API module to provide flexibility regarding which content types and fields can be added to search and how to use views to display our results
While we work through each section, we have the ability to refer back to the Chapter11 exercise files folder. Each folder contains a start and end folder with files that we can use to compare our work when needed. This also includes database snapshots that will allow us to all to start from the same point when working through various lessons.
Like previous sections of our website, having a mockup already provided to us to review makes planning how to develop a page much easier. Page structure, blocks, web forms, and other functionality, which we will need to consider, can easily be discovered by looking at the Search results page in the Mockup folder located in our exercise files.
Begin by opening up the search.html file within the browser.
The search page mockup provides us with a look at how the search term lorem would look when Drupal has returned results. The nice thing is that Drupal already provides us with a Search results page regardless of whether there are any results, which we will see later when we test different search terms. Because we do not need to provide any additional content, we will have no additional blocks of content to worry about. In fact, the only item we will need to focus on to recreate the themed mockup is the following:
- First, we will need to inspect the markup provided by the Search input including any form of controls displayed on our page and determine if we need to alter the
HTML. - Second, we will want to take a look at what Twig variables the Search results page is displaying and determine whether we need to suppress anything from being output.
Having identified these two different components, we need to keep one thing in mind. Our mockup takes into account what our search results will look like once we have extended Drupal's default search using the Search API module, https://www.drupal.org/project/search_api, which you will learn about later in the lesson. For now, let's take a look at what a default search results page looks like, so we can determine what work we have in store for us.