Product

Powering Advanced Search in Adobe PWA Studio Using Algolia
facebooklinkedintwittermail

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:

autocomplete-search

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.

About the authorRachel Trott

Rachel Trott

Engineering Lead, Magento

Recommended Articles

Powered by Algolia AI Recommendations

Bringing Advanced Search to Magento 2
E-commerce

Bringing Advanced Search to Magento 2

Jan Petr

Jan Petr

Software Engineer
Algolia’s find-as-you-type now available on Magento Connect
E-commerce

Algolia’s find-as-you-type now available on Magento Connect

jeremy

jeremy

Magento 2: Our New Extension is Here, and It’s Full of New Features
Product

Magento 2: Our New Extension is Here, and It’s Full of New Features

Jan Petr

Jan Petr

Software Engineer