Documentation

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

Integrating external search

In the digital commerce world, search is the primary means of product discovery, allowing your customers to easily find what they're looking for on the website. Poorly organized search results can create usability problems, frustrate customers, and most importantly, result in subpar customer experiences and lost sales. Hence, it is critical to implement an optimized search experience that can contribute to increased conversion rates.

Many of our customers choose to use a specialized commerce search. This guide outlines how to integrate commercetools Frontend and Composable Commerce with external search to support an end-to-end search functionality.

Functional scope

Search engine integrations are generally composed of two main areas:

Backend: product sync

As a prerequisite to supporting search functionality on commerce websites, product catalog data must be synchronized and indexed by the search engine. Product sync can be divided into full and partial product sync. A full product sync synchronizes the entire product catalog data to the search engine, while a partial product sync updates delta changes to the search engine.

Frontend: product discovery

This is the frontend implementation where the customer interacts with the search on the commerce website. These include calls for text search (including auto-complete), loading product listing page (PLP), and other search pages with filtering and faceting support.

Solution

The diagram shows how both product sync and product discovery scenarios can be integrated.

Search integration with Composable Commerce and Frontend.

Product sync with Composable Commerce

After setting up the product data in Composable Commerce, we recommend using Subscriptions to synchronize product data from Composable Commerce to an external search engine.

With Subscriptions, you can implement an asynchronous solution that captures any updates on product data and pushes data towards the third-party system using a product sync connector hosted with commercetools Connect or any public cloud messaging service (for example, AWS EventBridge). For product sync, you can use the following Subscription Messages:

Product sync with commercetools Connect

The open-source Algolia integration of the Store Launchpad for B2C Retail is designed for use with the sample data, and it synchronizes product data with Algolia search. You can create a private Connector using this repository by following the Connect getting started guide.

Product Discovery with Frontend

To support product discovery functionality in the frontend with commercetools Frontend, there are two main concepts to understand.

Frontend components

A Frontend component is a central part of the Frontend development that consists of two parts:

  • Javascript entry point, which is a React component that receives some special props.
  • Frontend component schema, which is a JSON file that defines the data a Frontend component requires and how it must be configured.

For an external search functionality in the frontend, the Store Launchpad for B2C Retail comes with an out-of-the-box data sync integration with Algolia, which you can use as a reference to customize or enhance search based on your needs.

Algolia search components must be developed with React instant search hooks. The Store Launchpad for B2C Retail has two out-of-the-box Algolia search components:

  • Real-time interactive search: supports text search on the website.
  • Interactive product list for category and product search pages: supports filtering in PLP.

For more information, see Frontend-Algolia integration.

Extensions

Frontend extensions are Javascript or TypeScript functions that run inside the API hub. API hub acts as an orchestration layer to integrate with the external search engine, Composable Commerce, or any other third party.

For more information, see Extensions.

Conclusion

In this guide, we've highlighted how Composable Commerce, Connect, and Frontend can support you with an end-to-end search functionality by integrating with an external search, and how you can take advantage of the out-of-the-box data sync integration with Algolia provided by the Store Launchpad for B2C Retail.