This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Algolia

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

Algolia provides search and recommendation services with extensive merchandising capabilities. The Store Launchpad for B2C comes with an Algolia Keyword Search integration with commercetools Frontend. You can also create and deploy an Algolia integration using commercetools Connect.

Prerequisites

An Algolia account
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 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 to populate your Algolia index with data from the Merchant Center.

Get started

To start using the Algolia integration, follow these steps:

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

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

Add your values for Algolia environment variables.env.local

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-indx-name>

On production, set your environment variables on Netlify 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.

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. 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:

From the Studio home page or from the left menu, go to Dynamic pages.
From the dynamic page list, select the dynamic page for which you want to edit the component (for example, the Category page).
In the Page versions pane, go to the section where the page version to edit is located.
Hold the pointer over the page version, then click the Edit icon: the page builder opens.
Click the product list (Algolia) component: the Component settings pane opens.
Edit the filters in the Facets configuration and Prices configuration sections as you wish.
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.
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.

Syntax to implement eventsJavaScript

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 provides, which is simpler to use.

Use commercetools 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 Composable Commerce Project to Algolia to commercetools Frontend, the Store Launchpad for B2C provides an open source integration hosted on commercetools Connect. This integration maps product data from Composable Commerce according to commercetools Frontend data mappers.

You can create a private Connector using this repository or a forked repository by following the commercetools Connect getting started guide. You can find technical implementation details of the integration within the integration's repository.