Powering Advanced Search in Adobe PWA Studio Using Algolia

Progressive Web Applications (PWA) have revolutionized the way we create and consume digital experiences. PWAs are web applications that provide a native-app like experience, including offline functionality and smooth performance across multiple devices. Adobe’s PWA Studio provides developers with a set of tools and components to help them build and deploy PWA storefronts on top of an Adobe Commerce / Magento Open Source backend with ease and efficiency. It enables developers to create high-quality, engaging PWAs that can be accessed from any device and offer seamless functionality. 

Introducing the Algolia Extension for Adobe’s PWA Studio

Algolia is a powerful search and discovery platform that helps businesses deliver lightning-fast search results and improve the user experience. Algolia’s search platform is designed to fit easily in any front-end architecture and PWA is no exception. With over 1,300 retailers using Algolia search on top of Adobe Commerce / Magento, we wanted to make it easier for our customers to understand the implementation of our React components in PWA Studio. We are excited to announce the Algolia Extension for Adobe’s PWA Studio. 

To get started, check out the repository on GitHub: https://github.com/algolia-samples/algoliasearch-magento-2-pwa.

The Algolia Extension for Adobe’s PWA Studio is built on top of the Adobe Commerce / Magento Open Source backend and AlgoliaSearch Magento 2 extension. It demonstrates how to integrate Algolia’s Autocomplete, InstantSearch, and Search Insights React libraries into PWA Studio Venia theme to enhance the search experience.

The extension utilizes Algolia’s React library for InstantSearch to replace the category page in the Venia theme:

Additionally, the extension also extends the search bar of the Venia theme with Algolia’s Autocomplete and utilizes Algolia’s Search Insights library to send events:

You can get more information on the exact versions of the libraries used in this extension here. This extension needs the Algolia index and backend admin configuration created by using the AlgoliaSearch Magento 2 extension . However, please note that the GraphQL endpoints are not available yet in our AlgoliaSearch Magento 2 Extension. So you should manually create the config.json file for Algolia configurations. To aid in this process, we have included a sample config.json for reference.

Want to learn more or find out how you can try Algolia?

Reach out to us at adobe-algolia-solutions@algolia.com to share feedback! Please note, this is not production-ready. It is a proof of concept to showcase the usage of Algolia’s Autocomplete, InstantSearch, and Search Insights React libraries in PWA Studio. We are happy to chat with you about best practices, trade-offs, and learn what works best for you!

Just in case if you have missed it, check out the rest of our ‘Adobe x Algolia Integrations’ Series, including our piece: Recommend for Adobe Commerce.