docs: added dividers + see also section (#2899)

This commit is contained in:
Shahed Nasser
2022-12-26 15:52:08 +02:00
committed by GitHub
parent b0e5769e27
commit b0ebfd6bcf
100 changed files with 1047 additions and 291 deletions
+21 -3
View File
@@ -2,6 +2,8 @@
In this document, youll learn how to install the [Algolia plugin](https://github.com/medusajs/medusa/tree/master/packages/medusa-plugin-algolia) and use it on both your Medusa Server and your storefront.
---
## Overview
[Algolia](https://www.algolia.com/) is a search engine service that allows developers to integrate advanced search functionalities into their websites including typo tolerance, recommended results, and quick responses.
@@ -10,6 +12,8 @@ Algolia can be used for a wide range of use cases, including ecommerce websites.
Through Medusa's flexible plugin system, it is possible to add a search engine to your Medusa server and storefront using Algolia with just a few steps.
---
## Prerequisites
### Medusa Components
@@ -28,6 +32,8 @@ If you dont install and configure Redis on your Medusa server, the Algolia in
You need to [create an Algolia account](https://www.algolia.com/users/sign_up) before you follow this documentation. Algolia offers a free plan to get started quickly.
---
## Create an Algolia App
The first step is to create an Algolia app for your Medusa server. To create one, open the [Applications page](https://www.algolia.com/account/applications) or, on your dashboard, go to Settings then choose Applications.
@@ -50,6 +56,8 @@ In the last step, youll see a summary of your order. If all looks good, check
![Summary of your application's order with the terms and agreement checkboxes checked](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000019/Medusa%20Docs/Algolia/PTI2Swq_a1qbi5.png)
---
## Retrieve API Keys
To retrieve the API keys that youll use in the next sections, go to Settings, then choose API Keys in the Team and Access section.
@@ -66,6 +74,8 @@ If you have more than one application in your Algolia account, make sure your
![Application ID, Search-Only API Key, and Admin API Key can be found in the API Keys page](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000037/Medusa%20Docs/Algolia/i50Irki_jmtyk6.png)
---
## Install the Algolia Plugin
In the directory of your Medusa server, run the following command to install the Algolia plugin:
@@ -118,6 +128,8 @@ const plugins = [
The `searchableAttributes` are the attributes in a product that are searchable, and `attributesToRetrieve` are the attributes to retrieve for each product result. Youre free to make changes to these attributes as you see fit, but these are the recommended attributes.
---
## Test the Algolia Plugin
Run your Medusa server with the following command:
@@ -150,6 +162,8 @@ This feature is only available if you have Redis installed and configured with y
:::
---
## Add Search to your Storefront
In this section, youll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusas [Next.js](../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks such as the [Gatsby](../starters/gatsby-medusa-starter.mdx) storefront.
@@ -213,6 +227,8 @@ To make sure the Next.js storefront properly displays the products in the search
![Search pop up in the Next.js storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000082/Medusa%20Docs/Algolia/1f9qqK6_c0z8zi.png)
---
## Add to Gatsby and React-Based Storefronts
This section covers adding the search UI to React-based storefronts. It uses the Gatsby storefront as an example, but you can use the same steps on any React-based framework.
@@ -327,7 +343,9 @@ If you run your Gatsby storefront while the Medusa server is running, you should
![Search bar in the Gatsby storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000097/Medusa%20Docs/Algolia/INtlcIo_jlh16x.png)
## Whats Next
---
- Learn how to [deploy your Medusa server](../deployments/server/index.mdx).
- Learn how to [deploy your Gatsby storefront](../deployments/storefront/deploying-gatsby-on-netlify.md).
## See Also
- [Deploy your Medusa server](../deployments/server/index.mdx)
- [Deploy your Gatsby storefront](../deployments/storefront/deploying-gatsby-on-netlify.md)