Create a product catalog

Install the Search API module

Install Search API. Here we will be using database search that is available in the search_api module by default. You can also use other extension modules listed here. If you do not have search_api installed, execute the following commands:

composer require drupal/search_api
drupal module:install search_api search_api_db

Create search server

Go to /admin/config/search/search-api/add-server. Fill out the information as follows:

Search add server

Create search index

Go to /admin/config/search/search-api/add-index. Fill out the information as follows:

Search add server 1

Search add server 2

Search add server 3

Now you will be adding fields. The search data will be indexed based on these fields, and these fields will be available when you create view, and you can create facets out of these fields.

We will be showing the required fields to create a basic product catalog, you can add other fields as necessary.

Search add server 4

We will be showing variations in product catalog.

Search add server 5

Click Save changes.

Create view

Go to /admin/structure/views/add, fill out the information as follows:

Search add view 1

Click "Save and edit"

Let's show the products in grid-style.

Search add view 2

Search add view 3

We will be showing the product title and "Add to cart" widget. You can change it as you per your requirement.

Search add view 4

Search add view 5

Search add view 6

Click "Add and configure fields".

Search add view 7

Click "Apply and continue".

Search add view 8

Click "Apply".

Search add view 9

Click "Save".

Now go ahead and visit /products page.

Product catalog page

Voila!! Your product catalog is ready.

Create facets

We are going to add facets to the product catalog. Your catalog will look like this:

Product catalog page with facets

First things first, install Facets module. Execute the following commands:

composer require drupal/facets
drupal module:install facets

The Facets module is now installed. Now, we will be adding the facets.

Go to /admin/config/search/facets. Since we have already added a view of type DB index, it should show there.

Sample facet setting

Click + Add facet.

Earlier we have added "Brand" and "Category" fields while creating the search index. Now we are going to use them as facets.

Do the settings as follows:

Create facet 1

Create facet 2

Create facet 3

Create facet 4

Click Save.

Repeat the above steps for adding the "Category" facet.

Create facet 5

Finally, you will have two facets.

Create facet 6

These facets are now available as blocks. We will place them in the catalog page.

Go to /admin/structure/block.

Select any block region. In this case Bartik theme is used, and the facet blocks will be placed inside Sidebar first.

Place facet 1

Place "Brand" facet.

Place facet 2

Place facet 3

Similarly, place "Category" facet.

Place facet 4

Rebuild the cache.

Visit /products page, and...

Product catalog page with facets

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