Basic product search

In this section we'll walk through the process of using the Search API module and the Drupal 8 core Views module to create a basic product search page like this: Product search page

Configure Search API module for product search

Search API is a contributed module that provides a framework for creating searches on Drupal entities. The general steps for setting up search functionality for products (or any type of data) with Search API are:

Step 1: Install the Search API module and uninstall the "Search" module provided by Drupal 8 Core.

  • Typically, you will want to uninstall the Core Search module for performance reasons.

Step 2: Add a search server with Drupal's own database as the search backend.

  • Typically, most sites will want to use a more powerful backend like Solr or Elasticsearch instead of Drupal's own database..

Step 3: Add an index for products.

  • The index's settings determine what data is indexed and how it is indexed.

Step 4: Specify which product fields should be indexed and set their data types and weights.

  • The data type of a field determines how it can be used for searching and filtering.
  • A "boost" value is used to give additional weight to fields to affect the ordering of the search results.

Step 5: Enable some basic processors for our index.

  • The Processors page in the Search API documentation guide provides a good overview of processor options.
Step 1: Install Search API modules
  1. Add the Search API module to your site. (See the documentation on extending Drupal Commerce.)
  2. Navigate to the "Extend" page at /admin/modules.
  3. Install the "Database Search" and "Search API" modules.
  4. Also, it is recommended that you uninstall the Core "Search" module whenever you are using Search API.

Install search api modules

Step 2: Add a server
  1. Navigate to the Search API configuration page at /admin/config/search/search-api.
  2. Click the "Add server" button to add a server.
  3. Enter "Database" for the server name.
  4. Click the "Save" button.

Add server

Step 3: Add an index
  1. Return to the Search API configuration page at /admin/config/search/search-api.
  2. Click the "Add index" button to add an index.
  3. Enter "Products" for the index name.
  4. Scroll down the list of "Data sources" until you see "Product".
  5. Select "Product" as the type of data you want to index and search with this index.
  6. Select "Database" (the server we just created) for the "Server".
  7. Click the "Save and add fields" button.

Add search index

Step 4: Select the indexed fields
  1. Navigate to the Search API field management administration page at /admin/config/search/search-api/index/products/fields.
  2. Use the "Add fields" button to select all the field properties you want indexed. Search API will store data on the search server for each of these fields. In some cases, you will need to drill down into the options to locate the exact property you want. For example, for the Product Body field, it's the "Processed text" property that we actually want to index and search by: Add index fields

  3. Specify the Type for each of the added fields. We've added Title, Product variation SKU, and Product variation Title fields to this search index. Since we want to be able to find individual words contained in our search fields, not just the whole field value, select "Fulltext" for each of the fields. (You can use non-Fulltext field types when you only want to use a field for filtering or sorting.)
  4. Set the Boost value for each of the added fields. Fields with higher boost scores will be "boosted" towards the top of the search listings. For example, if the Product Title has a boost score of 5, and other fields only have a boost score of 1, then products with the search term in their title will appear higher in the search results than products that only have the term in other fields.

Add index fields

Step 5: Configure processors
  1. Navigate to the Search API processors administration page at /admin/config/search/search-api/index/products/processors.
  2. Enable the processors you want to use. We'll select "Entity status", "HTML filter", and "Ignore case".
  3. You can use the default settings for the "Processor order" settings.
  4. Then, for each of the selected processors, you may have some additional settings to configure:
    • For the "HTML filter" processor settings, we only need the processor to be enabled for the product Body field. So deselect the other options. Leave the "Tag boosts" as is.
    • For the "Ignore case" processor settings, just use the default settings.

Configure processors

Create a basic product search page

Next, we'll set up a basic search page for our indexed data using Views and the Drupal core Block layout functionality.

Step 1: Create a products search view
  1. Navigate to the Views administration page at /admin/structure/views and click the "Add view" button.
  2. Enter "Product search" for the view name.
  3. Select "Index Products" for the "Show" setting, under "View settings". This is the index we created previously and named "Products".
  4. Select "Create a page", under "Page settings".
  5. Enter "Products" for the page title and "products" for the path.
  6. For the "Page display settings", select "Unformatted list" of "Fields".
  7. Click the "Save and edit" button.

Create product search view

Step 2: Configure the products search view
  1. In the Fields section, remove the "Product datasource: Body >> Processed text" field.
  2. In the Fields section, add and configure the "Product datasource: Title" field.
    • Select the "Summary or trimmed" formmater.
    • Enter "300" for the "Trimmed limit"
  3. In the Fields section, add and configure the "Product datasource: Body" field.
    • Select the "Link to the Product" option.
  4. In the Filter criteria section, add and configure the "Fulltext search" item:
    • Select "Expose this filter to visitors, and allow them to change it".
    • Enter "Search products" for the "Label".
    • Select "Contains any of these words" for the "Operator".

Add fulltext search filter

  1. In the Sort criteria section, add and configure the "Relevance" option.
    • Select "Sort descending" for the "Order".
  2. In the Exposed form section of the "Advanced" settings, click the "No" link next to "Exposed form in block" to change the setting to "Yes".
  3. In the Exposed form section of the "Advanced" settings, click the "Settings" link next to "Exposed form style" to change the "Submit button text" to "Search".
  4. Click the "Save" button to save your changes.
Step 3: Add the search block to your pages
  1. Navigate to the "Block layout" administration page at /admin/structure/block.
  2. Click the "Place block" button for the "Content" region.
  3. Click the "Place block" button for the "Exposed form: product_search-page_1" block.
  4. Set the Visibility settings so that the block only appears on the /products page. Search form block visibility settings
  5. Rearrange the "Content" blocks so that the "Exposed form: product_search-page_1" block appears right below the "Page title" block.
  6. Click the "Save blocks" button at the bottom of the page.
  7. Navigate to your Products search page at \products to try your new search form.

Optionally, you may want to add a menu link to the \products page or add the search block to all pages, perhaps in the Header region.

Links and resources


In the next section, we'll look at how we can extend this basic product search with facets to create a product catalog for our site.

Found errors? Think you can improve this documentation? edit this page