Vue Storefront Algolia

# Sorting

To sort records in Algolia, you have to create replicas of the index in the dashboard and apply desired sort rules to each of them.

This part is well-described in Algolia's document (opens new window). Follow this document as the first step.

# Example

In this example, we will show you a process of applying both ascending and descending sort by the name (string) attribute. Let's imagine we have an index called products.

At first, create 2 replicas of products index and sort them (opens new window) by name attribute - ascending and descending:

  • products-by-name-asc
  • products-by-name-desc

Then in middleware.config.js set following structure for algolia.configuration.entities.product:

'name:asc': {
  index: 'products-by-name-asc',
  label: 'Name A-Z',
  default: true
},
'name:desc': {
  label: 'Name Z-A',
  index: 'products-by-name-desc',
}

Then, when calling the search method, all you have to do is set a value of the sort field:

import { useSearch } from '@vsf-enterprise/algolia';

// ...
const { search } = useSearch('my-key');
// ...

await search({
  query: '',
  entity: 'product',
  sort: `name:asc`
});

// or
await search({
  query: '',
  entity: 'product',
  sort: `name:desc`
});

The sort value should be equal to one of the keys specified for an entity object inside the middleware.config.js file. In this example, available options are name:asc and name:desc.

Server will replace entity+sort pair to the index name.

# Sort by multilang field

Let's extend an example from the previous step. In order to sort by multilang field, you have to create a replica for every language for every property:

  • products-by-name-asc-en,
  • products-by-name-desc-en,
  • products-by-name-asc-de,
  • products-by-name-desc-de.

Then in middleware.config.js set following structure for algolia.configuration.entities.product:

'name:asc': {
  index: 'products-by-name-asc-en', // selected if the locale is not specified
  index_en: 'products-by-name-asc-en',
  index_de: 'products-by-name-asc-de',
  label: 'Name A-Z',
  default: true
},
'name:desc': {
  index: 'products-by-name-desc-en', // selected if the locale is not specified
  index_en: 'products-by-name-desc-en',
  index_de: 'products-by-name-desc-de',
  label: 'Name Z-A'
}

Then, when calling the search method, it's important to specify locale. If it is not provided, then the value of the index property will be used.

import { useSearch } from '@vsf-enterprise/algolia';
import { useVSFContext } from '@vue-storefront/core';

// ...
const { search } = useSearch('my-key');
const { app: { i18n: { locale }} } = useVSFContext();
// ...

await search({
  query: '',
  entity: 'product',
  sort: `name:asc`,
  locale: 'en'
});

// or
await search({
  query: '',
  entity: 'product',
  sort: `name:asc`,
  locale: 'de'
});

// or
await search({
  query: '',
  entity: 'product',
  sort: `name:asc`,
  locale: locale
});

// or 
await search({
  query: '',
  entity: 'product',
  sort: `name:asc`
});

The locale value should fill <gap> in index_<gap> property name.

The server will use enitity+sort+locale to find the corresponding index name.

← Using adapters →