/catalyst-algolia

Example implementation of Algolia instantsearch

Primary LanguageTypeScript

How to Integrate Algolia SearchBox into Catalyst

Demo Site

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

Introduction

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.

Prerequisites

To complete the guide, you will need the following:

Requirements

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

Steps

  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:
    • ALGOLIA_APP_ID=
    • ALGOLIA_APP_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 quicksearch 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. You can then delete the _actions directory so your file structure mirrors the screenshot below.
Screenshot 2024-02-26 at 3 37 57 PM
  1. Run the app by running pnpm run dev, and check the QuickSearch box to see the data returned from Algolia.

Resources