Category Pages

Online companies use filtering and categories to help their customers find the most relevant items they offer. Apple divides its business into iPhones, Macs, iPads, Music, and other categories. Netflix separates its online universe into TV series or movies, and by genres like drama, comedy, and documentary. These companies know that carefully chosen categories encourage their clients to stay longer and discover more of their catalog. Creating individual category pages is a common way to achieve this.

Solution requirements

Search screens usually display clickable facets that allow users to filter their results. This way, users can focus their search on a specific brand, or within a certain price range. You use facets differently in the solution: you use them to create category pages. Category pages are landing pages that are already filtered on, for example, brand, product type, or genre.

As the screenshots show, category pages give users a separate point of entry into an online platform. An excellent example of this is what some online fashion stores do: they use category pages to showcase their newest collections. As users browse through the different seasonal collections, the website changes visually. Other examples of this are car sites that present family cars differently than sports cars, or how Apple switches design when you move from their iPhones to Macs categories.

Implementation guide

This solution shows you how to promote items and boost categories. In the demo, when a user clicks on the “Our phones” menu item, they will see only phones, with relevant facets on the left, and two items on promotion. The demo highlights the promotions here for demonstration purposes:

The implementation consists of two main steps:

1. Configure your index correctly.
2. Alter your front-end code to display the category pages.

Index configuration

Follow the following two-step process to set up your index:

1. Create a facet for the attribute you want to use as your product category by adding the attribute in your attributesForFaceting.
2. Create Rules to promote or demote specific items on your category page.

First, set up your attributesForFaceting

First, you have to make sure the index is set up with the proper attributesForFaceting. The demo is a typical electronics store. It sells cameras, watches, phones, TVs, home video, etc. The dataset places these categories into a category attribute. If you want to create a page for each unique category, you need to be able to facet on this attribute. To do this, you need to declare this attribute as an attribute for faceting.

It’s important to categorize to your products. Doing this allows your users to filter their searches, and it helps with relevance, Personalization, and other advanced Algolia features.

Learn about faceting and how to create facets.

Second, create your Rules to promote and demote items

The demo uses Rules to promote and demote items. More specifically, it uses the following Rule strategies:

• For the “Phones” category, it creates two Rules: one that buries phone accessories below actual phones. The other rule promotes two individual phones.
• For the “Video Games” category, it boosts items of two sub-categories of video games (“virtual reality games” and “collectibles”). Boosting puts these sub-categories over all the other video game sub-categories in the results.
• For the “Appliances” category, it promotes four individual appliance items.

You need to create two Rules per category:

1. A contextual Rule
2. A promotional Rule

You can create these Rules though the dashboard, or with one of the API clients. For demonstration purposes, this guide walks you through creating the Rules for the “Phones” category in both ways. You can manually create the other Rules, which follow the same steps.

Create Rules with the dashboard

This guide only looks at the phones category in detail. The others follow the same logic. Here is an onscreen summary of the two rules for “phones”:

1 - Contextual Rule

A contextual Rule activates only in a certain context. In this case, you want to activate it on a specific category page. You can use the Manual Editor to create a contextual Rule for the “phones” category:

• For the condition, toggle Context on and toggle Query off. Choose a unique name for your context. This demo uses “cat_phones” as the context. The code uses this label to activate the Rule.
• For the consequence, pick “Add query parameters”, and use the facets query parameter to filter by “cell phones”.

2 - Promotional Rule

Promotional rules define the promotional strategy for the category page. Each category has a different strategy. In this example, you use the visual editor to define your strategy for the “cell phones” category. Here is what it looks like in the visual editor:

The “Trigger” associates the label cat_phones (the context label you created when you created your contextual Rule ) to the “Strategy”. Note that this trigger is only for empty searches (a blank search request) because the demo doesn’t have a search bar on its category pages.

The “Strategy” consists of two Rules:

• Pin the two phones on the right to the top.
• Bury the “cell phone accessories”.

You can follow the tutorial to learn more about pinning items with the visual editor.

Note: for both Rules, you’ve used the same context label. This allows you to activate the cat_phones context in the front-end code, which will activate all Rules that activate with this context.

Creating rules using the API

To create your Rules with one of the API clients, you need to use the save_rule method with the following Rule structures:

1 - For the contextual Rule:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "condition": {
    "context": "cat_phones"
  },
  "consequence": {
    "params": {
      "facetFilters": "hierarchicalCategories.lvl0:Cell Phones"
    },
    "filterPromotes": true
  },
  "description": "",
  "enabled": true,
  "objectID": "qr-1590420507480-310"
}

2 - For the promotional Rule:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "enabled": true,
  "tags": [
    "visual-editor"
  ],
  "condition": {
    "anchoring": "is",
    "pattern": "",
    "alternatives": false,
    "context": "cat_phones"
  },
  "consequence": {
    "params": {
      "optionalFilters": [
        "hierarchicalCategories.lvl1:-Cell Phones > Cell Phone Accessories<score=100>"
      ]
    },
    "hide": [],
    "promote": [
      {
        "objectID": "5581594",
        "position": 0
      },
      {
        "objectID": "5577854",
        "position": 1
      }
    ],
    "filterPromotes": true
  },
  "objectID": "qr-1594938298019"
}

Front-end setup

With your index configured, you need to tell your front end which Rules you want to activate.

The HTML

You can find the index.html file in the root folder of the demo, in the sidebar on the left. The index.html contains the standard InstantSearch code to quickly scaffold a search experience. It also holds the code to display your menu at the top of the page. You can find the menu in the <nav> element of the page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav class="header-nav">
  <ul>
    <li><a data-page="" href=".">Home</a></li>
    <li><a data-page="phones" href=".?page=phones">Our phones</a></li>
    <li>
      <a data-page="video_games" href=".?page=video_games"
        >Our video games</a
      >
    </li>
    <li>
      <a data-page="appliances" href=".?page=appliances"
        >Our appliances</a
      >
    </li>
  </ul>
</nav>

This code assigns the page query parameter to each menu item. The menu item adds this to the URL when it’s clicked, and you use the configure widget to map this parameter to the correct page you want to display.

The configuration widget

Instantiate the configure widget in the src/app.js file.

Like all InstantSearch widgets, you need to add configuration to your widgets variable to make it available.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const widgets = [
 brands,
 clearFilters,
 clearFiltersEmptyResults,
 clearFiltersMobile,
 configuration,
 freeShipping,
 hitsPerPage,
 pagination,
 priceSlider,
 products,
 ratings,
 resultsNumberMobile,
 saveFiltersMobile,
 sortBy
];

With the configure widget registered, you define its behavior in the src/widgets/configuration.js file.

In this file, you parse the query parameter of the URL to determine which category page the user has selected.

1
2
3
const parameters = new URLSearchParams(window.location.search);
 
const page = parameters.get('page') || '';

Using the page variable, you generate a context, which is one of three possibilities in the demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const context = ((page) => {
 switch (page) {
   case '':
     return '';
   case 'phones':
     return 'cat_phones';
   case 'video_games':
     return 'cat_video_games';
   case 'appliances':
     return 'cat_appliances';
   default:
     return '';
 }
})(page);

You then pass this context to the parameter. This will activate all the Rules you created that listen to this context.

1
2
3
4
export const configuration = configure({
 // Other settings
 ruleContexts: context,
});

That’s the general framework of creating category pages: create the Rules, and then dynamically set the Rule context and URL. The flow of this solution works as follows:

• The user clicks on “Our Phones” in the menu.
• The code in configuration.js generates the context cat_phones.
• The code in app.js refreshes the website with the new context.
• The search then displays the “Phones” category page, with all promotional Rules activated.

Next steps

The next step is to raise the bar and create a unique page design for each category and to add promotional content, similar to what the preceding example did for seasonal fashion collections.

How far you go with changing look and feel depends on the subject. Apple changes the entire look of their site depending on which category you select. Online journals create special sections for current events (categories) like political elections or social movements.

For merchandising, you can also do more than pinning and boosting. You can display banners, be creative with facet merchandising (dynamic facets, value sorting, related categories), and build filtering and personalization based on user groups.