UI libraries / Autocomplete / Solutions

Advanced federated search experience for ecommerce

A federated search offers recent searches, popular searches, search results, and other content from multiple indices in a single interface. The following example shows how to combine multiple indices using Autocomplete with a two-column layout.

Advanced federated search experience for ecommerce (on desktop)

Understanding the user interface

This example’s user interface consists of three search states, each one containing different plugins.

Search state Plugins
Empty query Recent searches, Popular searches, Quick access
Results Product Query Suggestions, Product category suggestions, Product brand suggestions, FAQ suggestions, Products preview, Articles preview
No results No results message, Popular category suggestions

Empty query state

The empty query state describes what users see in the search box before typing a search query.

This example provides some recent and popular searches on the left (1 and 2) and quick access items on the right (3).

Empty query state

Recent searches

The autocomplete-plugin-recent-searches plugin fetches and then saves recent searches on the user’s local storage.

If there aren’t any recent searches, the Recent searches section is hidden. A maximum of four recent searches are displayed by default.

Customize the plugin options in the recentSearchesPlugin file.

The autocomplete-plugin-query-suggestions retrieves hits from the Query Suggestions index.

The first six most popular Query Suggestions are displayed (the query suggestion index uses, by default, a descending sort on the popularity attribute).

Customize the plugin options in the popularPlugin file.

Quick access

Quick access is a custom plugin that retrieves the JSON data from the response coming from a Rule configured in the Algolia Dashboard on the products index.
The Rule is triggered based upon a Rule context defined in the Autocomplete plugin.

There are four item templates in the example: sales-banner, sales-code, new-collection, and help.

1
2
3
4
5
6
7
{
  "template": "sales-banner",
  "title": "Spring Sale",
  "subtitle": "up to 60% Off",
  "image": "https://res.cloudinary.com/hilnmyskv/image/upload/v1645453369/sales_banner_y1hsr8.jpg",
  "href": "#"
}

Customize them or create a new template by using a new item’s template value in the custom JSON data of the Rule and style it as you wish in the CSS file.

This is the Rule’s custom JSON data structure:

1
2
3
{
  "items": [/* Array of template items */]
}

Customize the plugin in the quickAccessPlugin file.

The complete Rule configuration is in the products_configuration.json file.

Results search state

The results search state appears as soon as you start typing a query in the search box.
It provides multiple suggestions on the left and a preview of relevant products and articles on the right.

The suggestions are combined using the Autocomplete Reshape API following two rules:

This layout provides users with what they’re looking for (however they may approach their search) while maximizing the display on any device.

Results search state

Key

  1. Product Query Suggestions
  2. Product category suggestions
  3. Product brand suggestions
  4. FAQ suggestions
  5. Products preview
  6. Articles preview

Product Query Suggestions

The autocomplete-plugin-query-suggestions plugin retrieves hits matching the query from the product Query Suggestions index.

A maximum of ten product Query Suggestions are displayed by default.

Customize the plugin options in the querySuggestionsPlugin file.

Index records and configuration

Product category suggestions

Product category suggestions is a custom plugin that retrieves the category of the first matching product from the products index.

A maximum of one product category is displayed by default.

Customize the plugin in the categoriesPlugin file.

Product brand suggestions

Product brand suggestions is a custom plugin that retrieves the product brands facet values matching the query from the products index.

A maximum of two product brands are displayed by default.

Customize the plugin in the brandsPlugin file.

FAQ suggestions

FAQ suggestions is a custom plugin that retrieves an FAQ matching the query from the FAQ index.

A maximum of one FAQ is displayed by default.

Customize the plugin in the faqPlugin file.

The index records are in the faq.json file. Look at the sample record below:

1
2
3
4
5
6
7
8
{
  "objectID": "5",
  "title": "Shipping methods/delays",
  "list_categories": [
    "shipping",
    "international"
  ]
}

Products preview

Products preview is a custom plugin that retrieves products matching the query and displays a preview (including image, brand, name, price, and review rating/count) from the products index.

A See All button that lists the number of other matching products (if any) is also displayed.

A maximum of four product previews are displayed by default.

Customize the plugin in the productsPlugin file.

Index records and configuration
A simplified sample record
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "objectID": "M0E20000000DG2H",
  "name": "Dress Sun68 grey",
  "brand": "Sun 68",
  "image_blurred": "LbR:7=t7_4M{IUof%MWBxuWBRPt7",
  "image_urls": [
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638371844/flagship_sunrise/M0E20000000DG2H_0.jpg",
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638371845/flagship_sunrise/M0E20000000DG2H_1.jpg",
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638371846/flagship_sunrise/M0E20000000DG2H_2.jpg"
  ],
  "price": {
    "currency": "EUR",
    "discount_level": -100,
    "discounted_value": 0,
    "on_sales": false,
    "value": 100
  },
  "reviews": {
    "bayesian_avg": 3.957894736842105,
    "count": 94,
    "rating": 4
  },
  /* ... */
}

Articles preview

Articles preview is a custom plugin that retrieves articles matching the query from the articles index.

A See All button that lists the number of other matching articles (if any) is also displayed.

A maximum of two article previews are displayed by default.

Customize the plugin in the articlesPlugin file.

Index records
Sample record
1
2
3
4
5
6
{
  "objectID": "98",
  "title": "Victoria Beckham - New collection 2021",
  "image_url": "https://media.istockphoto.com/photos/stacked-and-ready-to-be-packed-picture-id1286024201?b=1&k=20&m=1286024201&s=170x170",
  "date": "2021-03-31T22:00:00.000Z"
}

No results search state

The no results search state is displayed when no results matching are found for the current query.
It provides some advice on the left and popular categories on the right.

No results search state

No results message

Customize the no results message in the render method of the app file.

Popular category suggestions is a custom plugin that retrieves facet values for categories with the most number of products from the products index.

Image URLs are hard-coded for the first six categories.

Customize the plugin in the popularCategoriesPlugin file.

Technical requirements

Dependencies

The example has multiple dependencies:

Structure

The folder structure of the example is as follows:

Combining different data sources

This example uses multiple Algolia indices hosted on Algolia’s latency application.

If you intend to use your own Algolia indices or change the existing ones, the datasets and configurations are provided as JSON files in the Algolia datasets repository and described below.

Products index

This index contains fashion products.

Product Query Suggestions index

This index contains Query Suggestions for products.

Articles index

This index contains articles related to some product brands.

FAQ index

This index contains frequently asked questions.

Did you find this page helpful?