Sorting

With Dynamic Content search, we've made it easy to implement sorting by allowing you to add one or more sort options to your index, to enable you to provide your users with different ways of sorting their search results. On this page we'll show you how to create sort options and provide an example of using sort options in your code.

The example on this page uses the blog example used on the main overview page and configuration pages. You can find the content schemas for the example on the search example part 1 page.

Sort options and replicas

For performance reasons, each Algolia index is sorted at indexing time using the configured sort order, rather than being sorted at query time. For each additional sort option there needs to be an associated replica configured with the required sort order. For example, for an index of blog posts, where the primary index is configured to sort in descending order by date created, you could have a replica which sorts the results in ascending order.

What is a replica?

A replica is a copy of the primary (or original) index, that has the same data and is automatically kept in sync, but which can have different settings.

Dynamic Content Search takes care of all the details of replicas for you, all you need to do is add a sort option to your index and a replica will be created.

Adding a sort option

To add a sort option, open your index and choose the "Add sort option" button, as shown in the image below.

Click in the text box (1) to choose the property you want to use as the sort-by attribute. Only number and boolean properties can be used to sort. For this example we'll choose the dateAsTimeStamp property.

The next step is to choose the sort option: either ascending or descending. In our example configuration, the default sort order for the primary index is set to descending order by date. To provide another additional sort option, we'll choose ascending order.

Click the "Save and continue" button to create a replica sort index using the selected sort option.

A new replica index is created and will be named according to the primary index and the sort option. Click on its title to open the replica.

In the browse tab, the records are displayed in the sort order used for replica, rather than the primary index. This is a good way of testing out the sort order.

When you're viewing a replica index, you can go back to the primary index at any time by clicking the "View primary" button (1).

The replica contains the same records and settings as the primary index, with the exception of the ranking setting. The sort option will be added as the first item in the ranking, as shown in the image below.

Note that we don't recommend editing the ranking setting directly and for the primary index, you should specify the sort order using the custom ranking setting. See the configuration page for more details.

You can provide additional sort options if you choose, although if you have more than 10 replicas for an index, performance may be impacted.

Using the sorting options in your app

Once you've created the replica indexes, it's easy to include the sort options in your front end code to, as shown in the example image below.

The following example was created using Algolia's create-instantsearch-app tool and using the InstantSearch.js template. However, you can easily modify it for your chosen framework. You will need to modify the app.js file to include the Application ID and Search API Key that are included in the keys section for your index and include your primary index and replicas as shown below.

Include each of your available sort options in the sort-by array. In the example, we're including the default sort order used by the primary index- sort by date descending, and the replica index which we set up earlier to sort in ascending order.

  // Add item(s) for each sort option
  instantsearch.widgets.sortBy({
    container: '#sort-by',
    items: [
      {
        // the default sort option used by the primary index
        label: 'Sort by - (Date descending)', value: search.indexName },

      // Update with your replica index name
      {
        label: 'Sort ascending by date',
        value: 'bloblog-hub-01.doc-example-index_sort-dateastimestamp-asc',
      }
    ]
  })
]);

The complete app.js file used in this example is shown below.

/* global algoliasearch instantsearch */

// update with your Application ID and Search API Key. You can find this under the keys tab for your search index.
const searchClient = algoliasearch('', '');

// update with your index name
const search = instantsearch({
  indexName: '',
  searchClient,
});

// change mediaHost to your VSE for use with staging /preview environments
const mediaHost = 'https://cdn.media.amplience.net/';

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
<article>
  <h1>{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}</h1>
  <p>Read time: {{readTime}} minutes.
  <p>Published: {{date}}</p>
  <a href="/{{deliveryKey}}"><img src="${mediaHost}/i/{{imagePath}}?w=190" alt="" style="width:190px;"></a>
  <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
  <p>{{#helpers.highlight}}{ "attribute": "content" }{{/helpers.highlight}}</p>
</article>
`,
    },
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
  instantsearch.widgets.refinementList({
    container: '#tags-list',
    attribute: 'tags',
    searchable: true,
  }),
  instantsearch.widgets.refinementList({
    container: '#authors-list',
    attribute: 'authors.name',
  }),
  // Add item(s) for each sort option
  instantsearch.widgets.sortBy({
    container: '#sort-by',
    items: [
      {
        // the default sort option used by the primary index. Update the label if your primary index uses a different sort option.
        label: 'Sort by - (Date descending)',
        value: search.indexName,
      },

      // Update with your replica index name. Add one entry for each of your replicas.
      {
        label: 'Sort by - ',
        value: '',
      },
    ],
  }),
]);

search.start();

If you're using the InstantSearch.js example, you'll also need to modify index.html to include containers for the properties returned by your search.

The updated index.html from this example is shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="./manifest.webmanifest" />
    <link rel="shortcut icon" href="./favicon.png" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
    />
    <link rel="stylesheet" href="./src/index.css" />
    <link rel="stylesheet" href="./src/app.css" />

    <title>getting-started</title>
  </head>

  <body>
    <header class="header">
      <h1 class="header-title">
        <a href="/">getting-started</a>
      </h1>
      <p class="header-subtitle">
        using
        <a href="https://github.com/algolia/instantsearch.js">
          InstantSearch.js
        </a>
      </p>
    </header>

    <div class="container">
      <div class="search-panel">
        <div id="facets">
          <h2>Tag</h2>
          <div id="tags-list"></div>
          <h2>Author</h2>
          <div id="authors-list"></div>
        </div>

        <div class="search-panel__results">
          <div id="searchbox"></div>
          <div id="sort-by"></div>
          <div id="hits"></div>
        </div>
      </div>
      <div id="pagination"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/algoliasearch/3.32.0/algoliasearchLite.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.4.0"></script>
    <script src="./src/app.js"></script>
  </body>
</html>

The Replicas tab

From the replicas tab you can open, detach and delete a replica.

Detaching a replica

When you detach a replica you are removing its association with the primary index. The replica index will become a standalone index and will no longer be kept in sync with the primary index.

To detach a replica, choose "Detach from primary" from the replica's menu and enter "DETACH" in the confirmation dialog box. When you click the "Detach" button the replica will be detached from the primary index.

Note that a detached replica will have no content types associated with it and no webhooks. To use a detatched replica to index data you will need to do the following.

• Add a content type by clicking the "Add content type" button. In most cases you should add the same content type(s) that are associated with the primary index you just detached from.

• Any webhook customizations configured for the primary index you detached from will need to be re-applied. View the webhook section of the primary index to check the webhook settings.

Deleting a replica

To delete a replica, choose "Delete" from the replica's menu and enter "DELETE" in the confirmation dialog. This operation cannot be undone, although you can re-create a new replica with the same settings.

Related pages

Search indexes overview

Search index configuration

Search integration guide Part 1- includes the example content type schemas

A guide to refining your search index

Algolia create-instantsearch-app

Algolia replicas documentation