> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sort organic results

> Define how Algolia sorts organic results that aren't part of Smart Groups.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

export const organicResultsDefinition = "These are the search results ranked by relevance and your configuration without compositions.";

export const OrganicResults = () => <Tooltip tip={organicResultsDefinition} cta="Smart Groups" href="/doc/guides/managing-results/compositions/smart-groups">
    organic results
  </Tooltip>;

Use compositions to define sorting strategies and apply them at runtime.
With sorting strategies, you can sort <OrganicResults /> at query time based on price,
recency, popularity, or custom business logic from your Algolia indices.

## Define sorting strategies with the API

To configure sorting behavior programmatically, use the Composition API.
The following explains how to set and apply sorting strategies.

### Set sorting strategies in a composition

You can use the [Composition API](/doc/rest-api/composition/put-composition) to configure the sorting strategy programmatically.

The sorting strategies are defined in the `sortingStrategy` parameter (available at root level):

```json JSON icon=braces theme={"system"}
{
  "sortingStrategy": {
    "Price (asc)": "Products-sorted-by-price-low-to-high",
    "Price (desc)": "Products-sorted-by-price-high-to-low",
    "Newest": "Products-sorted-by-newest"
  }
}
```

`sortingStrategy` is an object where:

* **Key** is the sorting label your UI will send at run time (for example `Price (asc)`)
* **Value** is the Algolia index or replica to use when this sorting is selected (for example `Products-sorted-by-price-low-to-high`)

### Select a sorting strategy at runtime

When querying your composition, you can select the sorting strategy to apply to Smart Group results by sending the `sortBy` parameter with your <SearchQuery />.

```json JSON icon=braces theme={"system"}
{
  "params": {
    "sortBy": "Price (asc)"
  }
}
```

* The value sent with `sortBy` must match one of the keys defined in the composition's `sortingStrategy` map.
  If no match is found, `sortBy` is ignored.
* The order of items defined in the Smart Group remains fixed. Only the <OrganicResults /> are affected by `sortBy`.
* If a composition rule applies to the query, it's applied first.
  Then, the sorting strategy affects the <OrganicResults /> defined by that rule.

This ensures predictable behavior, especially when Smart Groups include mixed sources.

## Integrate with InstantSearch

Composition sorting strategies require these versions of the InstantSearch libraries:

* React InstantSearch: version 7.22.1 or later
* InstantSearch.js: version 4.86.1 or later
* Vue InstantSearch: version 4.22.8 or later

For more information, see [Integrate compositions with InstantSearch](/doc/guides/compositions/smart-groups/search-based-groups#integrate-compositions-with-instantsearch).

<Tabs>
  <Tab title="InstantSearch.js">
    To apply the sorting strategies, use the [sortBy widget](/doc/api-reference/widgets/sort-by/js) with `strategy` instead of `value` on the `items` option.

    ```js JavaScript icon=code theme={"system"}
    sortBy({
      items: [
        { label: "Price (asc)", strategy: "Price (asc)" },
        { label: "Price (desc)", strategy: "Price (desc)" },
        { label: "Newest", strategy: "Newest" },
      ],
    });
    ```
  </Tab>

  <Tab title="React InstantSearch">
    To apply the sorting strategies, use the [SortBy widget](/doc/api-reference/widgets/sort-by/react) with `strategy` instead of `value` on the `items` property.

    ```jsx React icon=code theme={"system"}
    <SortBy
      items={[
        { label: "Price (asc)", strategy: "Price (asc)" },
        { label: "Price (desc)", strategy: "Price (desc)" },
        { label: "Newest", strategy: "Newest" },
      ]}
    />
    ```
  </Tab>

  <Tab title="Vue InstantSearch">
    To apply the sorting strategies, use the [ais-sort-by widget](/doc/api-reference/widgets/sort-by/vue) with `strategy` instead of `value` on the `items` property.

    ```vue Vue icon=code theme={"system"}
    <ais-sort-by
      :items="[
        { value: 'Price (asc)', strategy: 'Price (asc)' },
        { value: 'Price (desc)', strategy: 'Price (desc)' },
        { value: 'Newest', strategy: 'Newest' },
      ]"
    />
    ```
  </Tab>
</Tabs>