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
(orpnpm
/yarn
)
- Set up and have a Catalyst storefront running - instructions available here
- Add the following Algolia keys, which you can find in your Algolia account, to the existing .env.local file in your Catalyst storefront repository:
ALGOLIA_APP_ID=
ALGOLIA_APP_KEY=
- Install the following dependencies in your repository:
npm i react-instantsearch
npm i -S algoliasearch
- Add the files
algoliasearchbox.tsx
andalgoliaSearchHits.tsx
to thequicksearch
component folder - Update the code in
index.tsx
to use the code found here - Update the
algoliaClient
inindex.tsx
to use your correctindexName
. By default, the Algolia <> BigCommerce app names the indexBigCommerce
. You can then delete the_actions
directory so your file structure mirrors the screenshot below.
- Run the app by running
pnpm run dev
, and check the QuickSearch box to see the data returned from Algolia.