docs: fixes to the meilisearch docs (#1979)

This commit is contained in:
Shahed Nasser
2022-08-03 14:27:23 +03:00
committed by GitHub
parent 736db771e6
commit 948a9f1188
3 changed files with 23 additions and 5 deletions

View File

@@ -67,7 +67,7 @@ const plugins = [
products: {
// MeiliSearch's setting options to be set on a particular index
searchableAttributes: ["title", "description", "variant_sku"],
displayedAttributes: ["title", "description", "variant_sku", "image"],
displayedAttributes: ["title", "description", "variant_sku", "thumbnail", "handle"],
},
},
},
@@ -75,6 +75,8 @@ const plugins = [
];
```
You can change the `searchableAttributes` and `displayedAttributes` as you see fit. However, the attributes included are the recommended attributes.
## Test MeiliSearch Plugin
Make sure your MeiliSearch instance is running. If youre unsure how to run it, you can check the [installation documentation](https://docs.meilisearch.com/learn/getting_started/quick_start.html#setup-and-installation) for the command to run the MeiliSearch instance.
@@ -87,11 +89,11 @@ npm run start
The quickest way to test that the integration is working is by sending a `POST` request to `/store/products/search`. This endpoint accepts a `q` body parameter of the query to search for and returns in the result the products that match this query.
![Postman request to search endpoint that shows results returned from the search engine](https://i.imgur.com/gJkBuA6.png)
![Postman request to search endpoint that shows results returned from the search engine](https://i.imgur.com/RCGquxU.png)
You can also check that the products are properly indexed by opening the MeiliSearch host URL in your browser, which is `http://127.0.0.1:7700/` by default. Youll find your products that are on your Medusa server added there.
![MeiliSearch dashboard showing products from the Medusa server indexed](https://i.imgur.com/1ajSCzH.png)
![MeiliSearch dashboard showing products from the Medusa server indexed](https://i.imgur.com/5sk3jyP.png)
### Add or Update Products
@@ -162,6 +164,14 @@ Make sure to replace `<YOUR_MEILISEARCH_HOST>` with your MeiliSearch host and `<
If you run your Next.js storefront now while the Medusa server and the MeiliSearch services are running, the search functionality will be available in your storefront.
:::note
To make sure the Next.js storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa server at least the fields `title`, `handle`, `description`, and `thumbnail`.
:::
![Search Result on Next.js storefront](https://i.imgur.com/gQVWvH2.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.

View File

@@ -89,6 +89,14 @@ Make sure to replace `<MEILISEARCH_URL>` with the URL MeiliSearch is running on
Then, restart the Next.js server. Youll be able to search through available products by clicking the search icon in the navigation bar.
:::note
To make sure the Next.js storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa server at least the fields `title`, `handle`, `description`, and `thumbnail`.
:::
![Search Result on Next.js storefront](https://i.imgur.com/gQVWvH2.png)
### Algolia Integration
Instead of using the default MeiliSearch search engine, you can switch to using Algolia. Make sure you start by installing the Algolia plugin on your Medusa server. You can do it by [following this guide](../add-plugins/algolia.md).

View File

@@ -15,8 +15,8 @@ Learn more about how you can use this plugin in the [documentaion](https://docs.
"[indexName]": "[meilisearch settings passed to meilisearch's `updateSettings()` method]"
// example
products: {
searchableAttributes: ["title", "description", "variant_sku", "type_value"],
displayedAttributes: ["title", "description", "variant_sku", "type_value"],
searchableAttributes: ["title", "description", "variant_sku"],
displayedAttributes: ["title", "description", "variant_sku", "thumbnail", "handle"],
}
}
}