diff --git a/docs/content/add-plugins/meilisearch.md b/docs/content/add-plugins/meilisearch.md index 4a6c4dfac3..dc98f80160 100644 --- a/docs/content/add-plugins/meilisearch.md +++ b/docs/content/add-plugins/meilisearch.md @@ -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 you’re 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. You’ll 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 `` 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. diff --git a/docs/content/starters/nextjs-medusa-starter.md b/docs/content/starters/nextjs-medusa-starter.md index ea91d8332b..167993895c 100644 --- a/docs/content/starters/nextjs-medusa-starter.md +++ b/docs/content/starters/nextjs-medusa-starter.md @@ -89,6 +89,14 @@ Make sure to replace `` with the URL MeiliSearch is running on Then, restart the Next.js server. You’ll 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). diff --git a/packages/medusa-plugin-meilisearch/README.md b/packages/medusa-plugin-meilisearch/README.md index a2f81bfbff..f3e99df83d 100644 --- a/packages/medusa-plugin-meilisearch/README.md +++ b/packages/medusa-plugin-meilisearch/README.md @@ -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"], } } }