There are many ways to implement category facets on your site. Bloomreach recommends that you curate the category response to make it more usable, less confusing, and add value to your site. We have provided some effective implementation schemes below.

Note

Bloomreach does not modify category output in this field for the following two key reasons:

  • It references our internal category tree which cannot be modified as it powers the Category API.

  • Different customers want to implement category facets differently, so we supply enough data in the response so you can customise to your specific needs.

To understand the implementation, we will use the following sample category structure throughout this document as an example.

511


You can view the [complete sample structure](🔗) at the end of this page.

## User Flow in Category Facet Implementation

The flow of user-selection defines how you show the categories within your pages.

Explained in the table below using placeholder names such as Cat1, Cat2,Cat3 and so on, along with examples. The bolded text shows the selection by the user and the corresponding child category that lies within it.

(Script tags will be stripped)


## Implementation Methods

Listed below are 6 different various of how you can implement category facets in your site:

### Method 1: Drill Down Method

Start at the root and only display the immediate children of the current category. Once a category is selected, only display its children.

#### Example

(Script tags will be stripped)


### Method 2: Drill Down Mark 2

Same as Drill Down, but also display grandchildren along with children.

#### Example

(Script tags will be stripped)


### Method 3: Drill Down Mark 3

Same as Drill Down Mark 2, but also display a tree to navigate back up to the original category.

#### Example

(Script tags will be stripped)


### Method 4: Full Expansion

All data is present, but is hidden behind collapsed menus, so you have to open up the children and the other children.

#### Example

(Script tags will be stripped)


### Method 5: Full Expansion Variation

A hybrid of Full Expansion and Drill Down, with collapsed menus but only displays child and sibling categories.

#### Example

(Script tags will be stripped)


### Method 6: Show all leaf nodes

In addition to showing all leaf nodes, have category facets redirect to the category page selected instead of filtering results.

## How to Implement

### Before you begin

Ensure you have taken care of the following points before you implement category facets:

  • Make sure crumbs are defined properly in feed

  • Understand and determine your current position, your current category ID

  • To find siblings, get category facets with the same parent id of current category ID

  • To find children, get category facets with parent = current category ID

  • To find ancestor, get category facet with category ID matching preceding values in crumbs up to root category

### Implementing Drill Down

  1. Start at root

  2. Find children of selected category

  3. Show children

### Implementing Drill Down Mark 2

  1. Start at root

  2. Find children of selected category

  3. Find children of children

  4. Show children and grandchildren

### Implementing Drill Down Mark 3

  1. Start at root

  2. Find children of selected category

  3. Find children of children

  4. Find all ancestors of selected category

  5. Show children, grandchildren, and ancestors

### Implementing Full Expansion

  1. Start at root

  2. Find children of selected category

  3. Show children of selected category or categories

### Implementing Full Expansion Variation

  1. Start at root

  2. Find children of selected category

  3. Find siblings of selected category

  4. Show children and siblings of selected category

## Reference Sample Structure

The structure given below is created for reference and for the purpose of implementation understanding:

301

318

285

346