gje4 / catalyst-algolia-guide Goto Github PK

https://catalyst-algolia.vercel.app/

Developers can quickly integrate Algolia search into the BigCommerce frontend Catalyst to enable search across all products. This guide walks through the basic integration and provides files that can be copy and pasted into Catalyst CORE app.

To complete the guide, you will need the following:

• A Catalyst storefront set up
• Experience using Next.js
• A BigCommerce Store with the Algolia app installed
• An Algolia account

• Node.js 18+
• npm (or pnpm/yarn)

1. Set up and have a Catalyst storefront running - instructions available here
2. Add the following Algolia keys, which you can find in your Algolia account, to the existing .env.local file in your Catalyst storefront repository. IF this is your first time using a new Algolia account, be sure to “regenerate” your Search Only API key before using it:
   • NEXT_PUBLIC_ALGOLIA_APP_ID=YOUR_APP_ID
   • NEXT_PUBLIC_ALGOLIA_API_KEY=YOUR_SEARCH_ONLY_API_KEY
3. Install the following dependencies in your repository:
   • npm i react-instantsearch
   • npm i -S algoliasearch
4. Add the files algoliaSearchBox.tsx and algoliaSearchHits.tsx to the quick-search component folder
5. Update the code in index.tsx to use the code found here
6. Update the algoliaClient in index.tsx to use your correct indexName. By default, the Algolia <> BigCommerce app names the index BigCommerce
7. You can then delete the _actions directory so your file structure mirrors the screenshot below

10. Run the app by running pnpm run dev, and check the QuickSearch box to see the data returned from Algolia

• https://www.catalyst.dev/
• https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/