Tutorial

Composable commerce: Switch parts of your stack in seconds

Our composable architecture allows you to switch out parts of your setup with only a couple of lines of code

We recently launched our sophisticated Medusa Search API. It allows you to add a blazingly fast product search to your ecommerce setup, improving the overall customer experience and your conversion rates.

From a developer perspective, the Search API unifies communication between Medusa and search engines thereby allowing you to switch between different engines in seconds with only a couple of lines of code. So far, Medusa has only supported product search using MeiliSearch, but we can now proudly present a plugin for Algolia - one of the giants.

The purpose of this article is to show you how to install and configure Algolia for your Medusa store. Additionally, we'll showcase the powerful Search API by guiding you through changing from one search engine to another.

‚Äć

Installation

Create an account on Algolia and grab your Application ID and Admin API Key from the settings panel.

In your Medusa project, install the plugin using your favourite package manager:

{% c-block language="js" %}
yarn add medusa-plugin-algolia@canary
# or
npm install medusa-plugin-algolia@canary
{% c-block-end %}

In your `medusa-config.js` add the integration to the array of plugins with the following settings:

{% c-block language="js" %}
const plugins = [
 # ...other plugins
 {
   resolve: `medusa-plugin-algolia`,
   options: {
     application_id: "your-application-id",
     admin_api_key: "your-admin-api-key",
     settings: {
       products: {
         searchableAttributes: [
           "title",
           "description",
         ],
         attributesToRetrieve: [
           "id",
           "title",
           "description",
           "handle",
           "thumbnail",
           "variants",
           "variant_sku",
           "options",
           "collection_title",
           "collection_handle",
           "images",
         ],
       },
     },
   },
 },
];
{% c-block-end %}

In the above config, you've provided the id and key from Algolia alongside a couple of settings, that define the properties you can search for and the values you'll get in return.

And that's all! You've now enabled Algolia for your Medusa store engine. The plugin will make sure to synchronize products from Medusa to Algolia upon updating, deleting, or creating new ones. Now all you need to do is to restart your server.

‚Äć

Usage

This article will not go too much into depth about how the search functionality works under the hood when querying the API. We refer to the previous article on MeiliSearch if this is of your interest. In there, you will find a quick showcase using Postman as well as a thorough walkthrough of how you can display the results in your storefront using ReactJS (GatsbyJS).

Instead, to illustrate the power of our Search API and search engine plugins, we'll switch out a MeiliSearch plugin with our new Algolia plugin in a store with existing products. Upon restarting the server with the new configuration, your products will automatically be fed into Algolia and the search functionality in your frontend will remain unchanged.

Next up

As mentioned in our post on MeiliSearch, we'll soon publish an article with a thorough walkthrough of our Search API. Until then, you should consider adding blazingly fast product search with one of our plugins to allow for your commerce business to grow to the next level.

Many thanks to community member Rolwin for building the plugin. If you want to be part of the Medusa community, feel free to join us on our Discord channel.

‚Äć

Want to know more about Medusa

Find related blog posts below

Want to know more?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thanks! We will reach out asap
Oops! Something went wrong while submitting the form.
¬© 2021 Medusa Commerce ‚Äď All Rights Reserved