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.
Product sync with Composable Commerce
- Product Messages
- Store Messages
- Product Selection Messages (required only if Product Selections are used to manage different Stores assortments)
Product sync with Connect
Product Discovery with Frontend
To support product discovery functionality in the frontend with commercetools Frontend, there are two main concepts to understand.
Frontend components
- 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.
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.
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.