Product catalog with facets

In this section, we'll transform the Basic product search page we already created into a Product catalog page with faceted search functionality. We'll use the Brands and Product categories taxonomies we created in the Product categories documentation. We'll also incorporate the Add to cart form into our product catalog listing to encourage browsing users to become buying customers.

Product catalog page

Configure Search API

For the Basic product search, we installed Search API modules, added a server and an index, and selected the fields to be indexed for the search. For a faceted product catalog, we can use the same server and index. We'll just add a few additional fields and configure an additional processor.

Add fields to the Products search index

  1. Navigate to the Products search index fields administration page at /admin/config/search/search-api/index/products/fields.
  2. Click the "Add fields" button.
  3. For the facets, add the "Brand" and "Categories" fields.
  4. For the Add to cart form, add the "Variations" field.
  5. Click the "Done" button to add the fields.
  6. Click the "Save changes" button. Add fields to index

Enable the "Index hierarchy" processor

Since Categories is a hierarchical taxonomy, we'll enable the hierarchy processor.

  1. Navigate to the Products search index processors administration page at /admin/config/search/search-api/index/products/processors.
  2. Select "Index hierarchy" as an enabled processor.
  3. In the Processor settings section, select "Categories" as the field to which hierarchical data should be added.
  4. Click the "Save" button. Products search index processors

Configure the product catalog view

We're going to build upon the Product search view we created for the Basic product search documentation, to save a few steps here. The following steps assume that you have already created a view and will add an additional display. Alternatively, you could create the view and then make changes directly to the original "Page" view for your faceted product catalog page.

Add a Product catalog display to the product search view

  1. Navigate to the administration page for the Product search view at /admin/structure/views/view/product_search.
  2. Click the "Add" button under "Displays" to add a new "Page" display. Add new views page display
  3. Click the "Page 2" link next to "Display name" to change the display name to "Product catalog".
  4. In the Page settings section, click the "No path is set" link next to "Path" to set the path to "product-catalog".
  5. In the Pager section, change the Items per page to "12".

Customize the product catalog display

For these steps, make sure that you select "This page (override)" before applying changes. Also, see Configure the Product Brand View fields in the Multi-product displays documentation for a more detailed description, with screenshots, of the configuration options we're applying here.

  1. In the Format section, click the "Unformatted list" link next to "Format" to select "Grid" for the view style. Then click the "Settings" link next to Grid to change the number of columns to 3.
  2. Remove the "Product datasource: Body" field.
  3. Add a "Variations (Product datasource)" field.
    • Select "Use entity field rendering".
    • Select "Rendered entity" for the Formatter.
    • Select "Single image" for the View mode.
    • Enter "1" for the number of values to display.
  4. Add a second "Variations (Product datasource)" field.
    • Select "Use entity field rendering".
    • Select "Add to cart form" for the Formatter.
    • Enter an Administrative title to distinguish this variations field from the other.

If you navigate to the product catalog page, at /product-catalog, we now have a searchable grid-style product catalog, with add-to-cart buttons. Only the facets are missing. Product catalog without facets

Create facets

Install and administer facets

  1. Add and install the Facets module. (See the documentation on extending Drupal Commerce.)
  2. Navigate to the Facets administration page at /admin/config/search/facets, where you will see all existing views of type DB index.

Facets administration page

Add the Brand facet

  1. Click the "Add facet" button on the Facets administration page.
  2. For the Facet source, select the view and display for which you want to create facets.
  3. Select the field to be used as the data source for the facet. In this case, we'll select the Brand field.
  4. Enter a name for the facet, like "Brand".
  5. Cick the "Save" button.

Add brand facet

Configure the Brand facet

  1. In the Facet Settings section, select "Transform entity ID to label" so that the Brand names will be displayed instead of their numeric IDs.
  2. In the Facet Sorting section, de-select "Sort by active state" and "Sort by count" so that products will appear alphabetically.
  3. Click the "Save" button to apply the changes.

Facet settings Facet sorting

Add the Categories facet

  1. Return to the Facets administration page at /admin/config/search/facets.
  2. Repeat the "Add the Brand facet" steps to add a facet for the "Categories" field.

Configure the Categories facet

  1. In the Facet Settings section:
    • Select "Transform entity ID to label".
    • Select "Use hierarchy", since Categories is a hierarchical taxonomy.
  2. In the Facet Sorting section, select only "Sort by taxonomy term weight" to use the ordering previously set for the Categories taxonomy.
  3. Click the "Save" button to apply the changes.

Facet settings Categories facet settings Categories facet sorting

We have now created two facets, which can be viewed on the Facets administration page and are available as blocks.

Facet adminstration page with facets

Place facets block on the product catalog page

  1. Navigate to the Block layout administration page at /admin/structure/block.
  2. Click the "Place block" button for the "Sidebar first" region.
  3. Click the "Place block" button for the Facets "Brand" block.

Place Brand block

  1. For the "Configure block" settings, the default values are fine. Click "Save block" to add the Brand block.
  2. Repeat steps 2-4 for the Facet "Categories" block.
  3. Rebuild the cache and navigate to the Product catalog page at /product-catalog to view the results.

For the screenshot below, I selected the "Urban Living" Category. Then its five sub-categories appeared. Selecting "Toys/Novelties" reduced the number of matching products to just two. Notice that only the single "Pool Toys Inc." Brand is listed, since that is the brand for both toys. Product catalog page in action

Links and resources

In the next section...

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