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.

Understanding the user interface

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

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).

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.

Popular searches

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": "#"
}

1
2
3
4
5
6
7
8
{
  "template": "sales-code",
  "title": "Sale on\nSneakers",
  "subtitle": "with the code\nSALES_2131",
  "image": "https://res.cloudinary.com/hilnmyskv/image/upload/v1645453422/sales_code_vuatep.jpg",
  "href": "#",
  "date": "Till March 25th"
}

1
2
3
4
5
6
7
{
  "template": "new-collection",
  "title": "New\ncollection",
  "subtitle": "Spring / summer\n2022",
  "image": "https://res.cloudinary.com/hilnmyskv/image/upload/v1645453466/new_collection_nloeb6.jpg",
  "href": "#"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "template": "help",
  "title": "How can\nwe help?",
  "href": "#",
  "links": [
    {
      "text": "Track my order",
      "href": "#"
    },
    {
      "text": "Delivery & Returns",
      "href": "#"
    },
    {
      "text": "FAQ",
      "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:

• Suggestions are deduplicated between sources.
• A maximum of one category, two brands, and one FAQ are displayed. The rest is filled up with Query Suggestions to reach a total limit of ten suggestions on desktop and six suggestions on mobile.

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

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

• products_query_suggestions.json
• products_query_suggestions_configuration.json

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

• products.json
• products_configuration.json

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

• articles.json.

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 message

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

Popular category suggestions

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:

• autocomplete-js package with two plugins:
  • autocomplete-plugin-query-suggestions to add Query Suggestions.
  • autocomplete-plugin-recent-searches to display a list of the latest searches.
• autocomplete-theme-classic package as a neutral and clean theme starter.
• Preact to render the virtual DOM.
• Ramda to pipe reshape functions.
• Parcel to bundle all the modules.
• BlurHash to have a placeholder for loading images.
• TypeScript for static type checking.

Structure

The folder structure of the example is as follows:

• src/components: Preact components.
• src/functions: Autocomplete reshape functions.
• src/plugins: Autocomplete custom plugins.
• src/types: Custom types.
• src/utils: Miscellaneous utilities.

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.

• Records. products.json
• Configuration (settings and Rules). products_configuration.json

Product Query Suggestions index

This index contains Query Suggestions for products.

• Records. products_query_suggestions.json
• Configuration (settings). products_query_suggestions_configuration.json

Articles index

This index contains articles related to some product brands.

• Records. articles.json.

FAQ index

This index contains frequently asked questions.

• Records. faq.json.