Search-based groups

​

Create your groups in Merchandising Studio

​

Create a composition

1

Open the composition creator

Go to the Merchandising Studio and open the Merch tools page. Select the Search all compositions and indices menu and click + Create Composition.

2

Configure the composition

In the New Composition menu, enter a name for this dynamic results , and an optional description. Select which main should be associated with this results feed.Create one composition per index. If you have different sites, for example, for different geographical regions, create one composition per site and index, such as “Product results feed - US”. Each composition can have rules for the insertion of groups. If you have five sites and one product index each, you need five compositions. Give each composition a short, descriptive, and unique name, and select its main source index.After creating your first composition, you can find it in the Search all compositions and indices menu. To list all your compositions and create new ones, go to the Compositions section in the sidebar and click All Compositions.

​

Create composition rules

1

Open Composition Rules

Use the Index and Compositions selector to select the relevant composition. Go to the Merchandising Studio’s Merch tools > Compositions > Composition Rules page.

Besides Merch tools, you can use Merchandising Studio’s Visual Merchandiser to manage both composition and index rules in a single visual workflow. Go to Visual Merchandiser, select the relevant composition, , category, or collection, then click Actions.

2

Create a composition rule

Click New Composition Rule.

3

Configure group placement

In the compositions rules editor, configure where to insert your groups given specific conditions, and based on which filters match the group results.

4

Specify the trigger conditions

Specify the conditions for triggering your composition rule, for example, search queries, categories, collections and contexts.You can select several queries, categories, and collections if you want to inject the same groups for them.

5

Add groups

Add the groups you would like to create. Select Algolia Index as the data source, then use filters with ‘and’ as well as ‘or’ operations to curate the items that should appear in the group. Specify the group’s starting position in the results, as well as the number of matching to include.To add a group from a collection, on the _collections attribute.

6

Save the composition rule

Save the group and then the composition rule to apply it.If not enough records match the filter criteria, a group might have fewer items than you specified. The included records can vary at query-time, based on their real-time attribute values as well as applied ranking criteria and index-level rules.

​

Curate groups

1. Go to Merchandising Studio’s Visual Merchandiser.
2. Select the corresponding Composition and Search query/Category/Collection where the group’s Composition Rule is applied.
3. Click Actions > Curate “group name” (or find the group in the visual preview, click the three dots, then select “Curate group”).
4. The Index Rule Visual Editor will open, allowing you to define Consequences (for example pin or hide items) for the group’s sub-query.
5. Publish the Index Rule.

​

Integrate compositions

1

Copy your API credentials

In the Algolia dashboard, go to Settings > API Keys and copy your and . The API key needs at least search permissions for the index used in your composition.

Client-generated secured API keys aren’t supported for the Composition API.

2

Copy the composition ID

In Merchandising Studio, go to Merch tools > Compositions > Composition Rules and select the composition from the Composition or Index selector. Copy the composition ID to your clipboard.

3

Choose an integration method

Query the Composition API with API clients or InstantSearch for web.

​

Integrate compositions with API clients

​

Integrate compositions with InstantSearch

• React InstantSearch: version 7.15.5 or later
• InstantSearch.js: version 4.78.1 or later
• Vue InstantSearch: version 4.20.6 or later

• The Shopify, Magento, and BigCommerce frontend integrations and the default Salesforce B2C Commerce frontend integration aren’t supported.
• You can’t use the index widget.
• You can’t combine Composition API calls with Search API or Recommend API calls on the same page.
• You can’t show groups in autocomplete menus, but you can open a composition-based search results page from there.

import React from "react";
import { compositionClient } from "@algolia/composition";
import { InstantSearch } from "react-instantsearch";

const searchClient = compositionClient(
  "ALGOLIA_APPLICATION_ID",
  "ALGOLIA_SEARCH_API_KEY",
);

function App() {
  return (
    <InstantSearch compositionID="COMPOSITION_ID" searchClient={searchClient}>
      {/* Widgets */}
    </InstantSearch>
  );
}

const search = instantsearch({
  compositionID: "COMPOSITION_ID",
  searchClient: compositionClient("APPID", "APIKEY"),
});

// Add widgets
// ...

search.start();

<template>
  <ais-instant-search
    composition-id="COMPOSITION_ID"
    :search-client="searchClient"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
  import { compositionClient } from '@algolia/composition';

  export default {
    data() {
      return {
        searchClient: compositionClient(
          'ALGOLIA_APPLICATION_ID',
          'ALGOLIA_SEARCH_API_KEY'
        ),
      };
    },
  };
</script>

​

Facets (including disjunctive faceting)

facets: ["disjunctive(attribute)"];

​

Events setup

​

Next steps