# Algolia

Implement search and recommendation functionality for your B2C website with Algolia.

Algolia provides search and recommendation services with extensive merchandising capabilities.

You can create and deploy an Algolia integration using [Connect](/frontend-development/algolia.md#use-connect) for the [Store Launchpad for B2C Retail](/frontend-development/b2c-store-launchpad-overview.md) instead of using commercetools [Product Projection Search API](/api/projects/product-projection-search.md) as the out-of-the-box default search provider.

Algolia is not available for the Store Launchpad for B2B Manufacturing.

## Prerequisites

To implement Algolia, you must have the following:

- An [Algolia account](https://www.algolia.com/users/sign_up).
- Data to index. Algolia is a search engine that works by indexing your data. To use Algolia effectively, you need to have data to index.
- An [Algolia public API key](https://www.algolia.com/doc/guides/security/api-keys/) with search rights. This key is used to authenticate your requests to the Algolia API and to ensure that your search results are publicly accessible.

## Use Algolia keyword search integration

You must use the [Algolia for commercetools integration](https://www.algolia.com/doc/integration/commercetools/get-started/installation/) to populate your Algolia index with data from the [Merchant Center](/merchant-center).

### Get started

To start using the Algolia integration, follow these steps:

1. Open the `.env.local` file in your commercetools Frontend project.

2. Enter your values for the following Algolia environment variables. If you are working locally, you are set.

   ```.env.local title="Add your values for Algolia environment variables"
   NEXT_PUBLIC_ALGOLIA_APPLICATION_ID= <your-application-id>
   NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY= <your-public-search-key>
   NEXT_PUBLIC_ALGOLIA_PRODUCTS_INDEX= <your-products-index-name>
   NEXT_PUBLIC_ALGOLIA_PRODUCTS_QUERY_SUGGESTIONS_INDEX= <your-product-suggestions-index-name>

   ```

3. On production, set your environment variables [on Netlify](https://docs.netlify.com/environment-variables/overview/) or any other provider.

### Algolia search components

Algolia search components are developed with React instant search hooks. You will find two out-of-the-box Algolia search components within the Store Launchpad for B2C Retail.

#### Real-time interactive search

You can find this component at the following path `/components/commercetools-ui/atoms/search-algolia`. It is a real-time interactive search component that uses the `SearchBox` React component. It uses both `productsIndex` and `productsQuerySuggestionsIndex` to show results for categorized query suggestions along with product results.

#### Interactive product list for Category and Product search pages

You can find this component at the following path `/frontastic/tastics/products/product-list-algolia`. It is a product listing component that has advanced filters with fast response times when applying these filters. The component is used in the Category and Product search dynamic pages.

##### Configure the product list component filters

You can configure the component filters from the [Studio](/frontend-studio). You can add the filters that you want to include on your pages using Algolia filter keys, which are the path to a specific property such as `categoryId` or `variants.price.centAmount`. From the Studio, you can also manage ready-to-use price range filters that allow a seamless user experience.

To configure the product list component filters, follow these steps:

1. From the Studio home page or from the left menu, go to **Dynamic pages**.

2. From the dynamic page list, select the dynamic page for which you want to edit the component (for example, the Category page).

3. In the **Page versions** pane, go to the section where the page version to edit is located.

4. Hold the pointer over the page version, then click the **Edit** icon: the [page builder](/frontend-studio/using-the-page-builder.md) opens.

5. Click the **product list (Algolia)** component: the **Component settings** pane opens.

6. Edit the filters in the **Facets configuration** and **Prices configuration** sections as you wish.

7. If you are editing a live page version, click **Publish** to publish your changes. Otherwise, click **Save** to save the changes. For further information on the page builder's **Publish** and **Save** buttons, see [this section](/frontend-studio/using-the-page-builder.md#menu-bar).

8. Click the back arrow to return to **Dynamic pages**.

### Out-of-the-box events

Algolia events are key to a good user search experience. They help present your users with the most relevant results and strengthen the personalization on your website.

The following events are already implemented and sent from your commercetools Frontend project.

- `PRODUCT_VIEWED`: the user viewed a product.
- `AUTOCOMPLETE_PRODUCT_CLICKED`: the user clicked the product name in the autocomplete list.
- `SLIDER_PRODUCT_CLICKED`: the user clicked the product slider.
- `PLP_PRODUCT_CLICKED`: the user clicked the product in the product listing page.
- `PDP_VIEWED`: the user viewed the product details page.
- `PDP_VIEWED_AFTER_SEARCH`: the user searched products and viewed the product details page.
- `QUICK_VIEW_PRODUCT_ADDED_TO_CART`: the user added a product to the cart using the product quick view.
- `QUICK_VIEW_PRODUCT_ADDED_TO_CART_AFTER_SEARCH`: the user searched products and added a product to the cart using the product quick view.
- `PDP_PRODUCT_ADDED_TO_CART`: the user added a product to the cart from the product details page.
- `PDP_PRODUCT_ADDED_TO_CART_AFTER_SEARCH`: the user searched products and added a product to the cart from the product details page.

### Add events

You can send other events in addition to those already available. To implement additional events, use the following syntax.

```javascript title="Syntax to implement events"
import aa from 'search-insights';

aa(
    'sendEvents',
    [
          {
            eventType: 'click', // click | view | conversion
            eventName: 'Product Clicked',
            objectIDs: ['ID1', 'ID2', ...] // Array of hit objects IDs coming from Algolia.
            queryID: 'last-algolia-search-request-query-id', // Retrievable from localStorage.
            index: 'my-products-index'
        },

    ]
)

```

You can also use the helper method that [React InstantSearch Hooks](https://www.algolia.com/doc/guides/building-search-ui/going-further/send-insights-events/react-hooks/) provides, which is simpler to use.

## Use Connect

To use Algolia Search components, product data must be added to the Algolia Search index initially and then incrementally for all product data changes. To automate the flow of product data from a commerce Project to Algolia to commercetools Frontend, the Store Launchpad for B2C Retail provides an [open source integration](https://github.com/commercetools/goodstore-algolia-sync) hosted on [Connect](/connect). This integration maps product data from commercetools according to commercetools Frontend data mappers.

You can create a private Connector using this repository or a forked repository by following the Connect [getting started guide](/connect/getting-started.md#create-a-connector). You can find technical implementation details of the integration within the [integration's repository](https://github.com/commercetools/goodstore-algolia-sync#deployment-configuration).

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Composable Commerce functionalities](/frontend-development/b2c-store-launchpad-composable-commerce.md)
- [Next page: Google Tag Manager](/frontend-development/google-tag-manager.md)
- [Search documentation and API specs](/search.md)