Skip to content

An integration demonstrating how to use Algolia's InstantSearch Component with BigCommerce's Catalyst storefront framework.

Notifications You must be signed in to change notification settings

bigcommerce-labs/catalyst-algolia

Repository files navigation

Integrating Algolia SearchBox with Catalyst

You can integrate Algolia search into Catalyst storefronts to help shoppers search all products, categories, and more.

This guide demonstrates a basic integration and provides example code for global product search that you can add to the core code of your Catalyst storefront, or to apps/core in the Catalyst monorepo.

Demo site

For a working demo of an Algolia integration with Catalyst, see the following example:

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

Prerequisites

To follow this guide, you need the following:

Deploy Your Own

  1. First, click the deploy button below to create a new Vercel project, add the BigCommerce integration, and return here for next steps (Note: You may have already gotten this far; if so, you can skip this first step.):

Deploy with Vercel

  1. If you do not yet have one, create a free Algolia account.

  2. At the top of your Algolia dashboard, create an Algolia app that you intend to associate exclusively with your Catalyst storefront channel.

  3. Install the BigCommerce Algolia app and associate it with your Catalyst channel. Detailed instructions on how to complete this can be found in the Alogolia for BigCommerce documentation.

Warning

You may run into indexing failures with the default BigCommerce sample product data if you chose Product level indexing, specifically with Product ID 77. If this occurs, you should be able to delete the product "[Sample] Fog Linen Chambray Towel - Beige Stripe" and trigger a reindex to proceed.

  1. At this point, you should have enough configured to enter the following environment variables back in the Vercel new project creation screen:
Environment variable Value
NEXT_PUBLIC_ALGOLIA_APP_ID Your Algolia app ID (can be found in your BigCommerce Control Panel under Apps > Algolia AI Search & Discovery > Sources > the string inside parenthesis next to your index name. By default, the index name is BigCommerce.)
NEXT_PUBLIC_ALGOLIA_APP_KEY Your Algolia Search Only API key. You can find this value in the API keys > All API keys section of your Algolia account dashboard. If this is your first time using the new Algolia app, visit the Search > Index section of the Algolia dashboard and click the Refresh index button to generate your search index.
NEXT_PUBLIC_ALGOLIA_INDEXNAME Your Algolia Search Index name. By Defualt the BigCommerce Algolia app uses the index name Bigcommerce.
  1. Enter values for each variable according to your own configuration, and click "Deploy" to deploy your Algolia-powered Catalyst storefront on Vercel.

About

An integration demonstrating how to use Algolia's InstantSearch Component with BigCommerce's Catalyst storefront framework.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages