docs: updates to use DML and other changes (#7834)
- Change existing data model guides and add new ones for DML - Change module's docs around service factory + remove guides that are now necessary - Hide/remove all mentions of module relationships, or label them as coming soon. - Change all data model creation snippets to use DML - use `property` instead of `field` when referring to a data model's properties. - Fix all snippets in commerce module guides to use new method suffix (no more main model methods) - Rework recipes, removing/hiding a lot of sections as a lot of recipes are incomplete with the current state of DML. ### Other changes - Highlight fixes in some guides - Remove feature flags guide - Fix code block styles when there are no line numbers. ### Upcoming changes in other PRs - Re-generate commerce module references (for the updates in the method names) - Ensure that the data model references are generated correctly for models using DML. - (probably at a very later point) revisit recipes
This commit is contained in:
Shahed Nasser
GitHub
@@ -95,13 +95,11 @@ The Next.js Starter storefront is compatible with Medusa's Stripe and PayPal plu
|
||||
|
||||
### Stripe Integration
|
||||
|
||||
{/* TODO add links to stripe module once supported. */}
|
||||
<Note type="check">
|
||||
|
||||
{/* <Note type="check">
|
||||
- [Stripe provider module](../commerce-modules/payment/payment-provider/stripe/page.mdx) installed in the Medusa application.
|
||||
|
||||
- [Stripe plugin](../plugins/payment/stripe/page.mdx) installed in the Medusa application.
|
||||
|
||||
</Note> */}
|
||||
</Note>
|
||||
|
||||
In your Next.js Starter project, set the following environment variables for the Stripe integration:
|
||||
|
||||
@@ -113,167 +111,6 @@ Where `<YOUR_PUBLISHABLE_KEY>` is your Stripe publishable key. You can retrieve
|
||||
|
||||
Then, restart the Next.js Starter storefront. You can now use Stripe during checkout.
|
||||
|
||||
### PayPal Integration
|
||||
|
||||
{/* TODO add links to paypal module once supported. */}
|
||||
|
||||
{/* <Note type="check">
|
||||
|
||||
- [PayPal plugin](../plugins/payment/paypal/page.mdx) installed in the Medusa application.
|
||||
|
||||
</Note> */}
|
||||
|
||||
In your Next.js Starter project, set the following environment variables for the PayPal integration:
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
|
||||
```
|
||||
|
||||
Where `<YOUR_CLIENT_ID>` is your PayPal client ID. You can retrieve it from the [PayPal developer dashboard](https://developer.paypal.com/developer/applications/).
|
||||
|
||||
Then, restart the Next.js Starter storefront. You can now use PayPal during checkout.
|
||||
|
||||
---
|
||||
|
||||
## Search Engine
|
||||
|
||||
The Next.js Starter storefront is compatible with Medusa's MeiliSearch and Algolia plugins.
|
||||
|
||||
### Enable Search Engine
|
||||
|
||||
To enable the search engine, change the value of the feature in `store.config.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"features": {
|
||||
"search": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then, restart your Next.js storefront. You'll see a "Search" link in the navigation bar.
|
||||
|
||||
### Configure MeiliSearch
|
||||
|
||||
{/* TODO add link to meilisearch plugin/module once available. */}
|
||||
|
||||
{/* <Note type="check">
|
||||
|
||||
- [MeiliSearch plugin](../plugins/search/meilisearch/page.mdx) installed in the Medusa application.
|
||||
|
||||
</Note> */}
|
||||
|
||||
In your Next.js Starter storefront, set the following environment variables for the MeiliSearch integration:
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_SEARCH_ENDPOINT=<YOUR_MEILISEARCH_URL>
|
||||
NEXT_PUBLIC_INDEX_NAME=products
|
||||
NEXT_PUBLIC_SEARCH_API_KEY=<YOUR_API_KEY>
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
- `<YOUR_MEILISEARCH_URL>` is the URL MeiliSearch is running on. The default is `http://127.0.0.1:7700`.
|
||||
- `NEXT_PUBLIC_INDEX_NAME` is the index name of the products in MeiliSearch. By default, it’s `products`.
|
||||
- `<YOUR_API_KEY>` is the API key used to search through MeiliSearch indexes. To create a new API Key, make sure that the MeiliSearch service is running and send the following request:
|
||||
|
||||
```bash
|
||||
curl \
|
||||
-X POST '<MEILISEARCH_URL>/keys' \
|
||||
-H 'Content-Type: application/json' \
|
||||
-H 'Authorization: Bearer <MEILISEARCH_MASTER_KEY>' \
|
||||
--data-binary '{
|
||||
"description": "Search products",
|
||||
"actions": ["search"],
|
||||
"indexes": ["products"],
|
||||
"expiresAt": "2024-01-01T00:00:00Z"
|
||||
}'
|
||||
```
|
||||
|
||||
Make sure to replace `<MEILISEARCH_URL>` with the URL MeiliSearch is running on and `<MEILISEARCH_MASTER_KEY>` with your MeiliSearch master key.
|
||||
|
||||
Then, restart the Next.js Starter storefront. You can search through available products by clicking the search icon in the navigation bar.
|
||||
|
||||
<Note title="Tip">
|
||||
|
||||
To make sure the Next.js Starter storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa application at least the fields `title`, `handle`, `description`, and `thumbnail`.
|
||||
|
||||
</Note>
|
||||
|
||||
### Configure Algolia
|
||||
|
||||
{/* TODO add links to algolia plugin/module once available. */}
|
||||
|
||||
{/* <Note type="check">
|
||||
|
||||
- [Algolia plugin](../plugins/search/algolia/page.mdx) installed in the Medusa application.
|
||||
|
||||
</Note> */}
|
||||
|
||||
In your Next.js Starter's directory, install the `algoliasearch` package:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install algoliasearch
|
||||
```
|
||||
|
||||
Then, set the following environment variables for the Algolia integration:
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_SEARCH_APP_ID=<YOUR_APP_ID>
|
||||
NEXT_PUBLIC_SEARCH_API_KEY=<YOUR_SEARCH_API_KEY>
|
||||
NEXT_PUBLIC_INDEX_NAME=products
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
- `<YOUR_APP_ID>` and `<YOUR_SEARCH_API_KEY>` are the Algolia App ID and Algolia Search API Key respectively. You can retrieve them from Algolia by going to [API Keys in your account settings](https://www.algolia.com/account/api-keys/all).
|
||||
- `NEXT_PUBLIC_INDEX_NAME` is the index name of the products in Algolia. By default, it’s `products`.
|
||||
|
||||
Next, change the content of `src/lib/search-client.ts` to the following:
|
||||
|
||||
```ts title="src/lib/search-client.ts"
|
||||
import algoliasearch from "algoliasearch/lite"
|
||||
|
||||
const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || ""
|
||||
|
||||
const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || ""
|
||||
|
||||
export const searchClient = algoliasearch(appId, apiKey)
|
||||
|
||||
export const SEARCH_INDEX_NAME =
|
||||
process.env.NEXT_PUBLIC_INDEX_NAME || "products"
|
||||
```
|
||||
|
||||
And change the content of `src/app/(main)/search/actions.ts` to the following:
|
||||
|
||||
```ts title="src/app/(main)/search/actions.ts"
|
||||
"use server"
|
||||
|
||||
import {
|
||||
searchClient,
|
||||
SEARCH_INDEX_NAME,
|
||||
} from "@lib/search-client"
|
||||
|
||||
/**
|
||||
* Uses MeiliSearch or Algolia to search for a query
|
||||
* @param {string} query - search query
|
||||
*/
|
||||
export async function search(query: string) {
|
||||
const index = searchClient.initIndex(SEARCH_INDEX_NAME)
|
||||
const { hits } = await index.search(query)
|
||||
|
||||
return hits
|
||||
}
|
||||
```
|
||||
|
||||
Then, restart the Next.js Starter storefront. You can search through available products by clicking the search icon in the navigation bar.
|
||||
|
||||
<Note title="Tip">
|
||||
|
||||
To make sure the Next.js Starter storefront properly displays the products in the search result, include in the `attributesToRetrieve` setting of the Algolia plugin on the Medusa application at least the fields `title`, `handle`, `description`, and `thumbnail`.
|
||||
|
||||
</Note>
|
||||
|
||||
---
|
||||
|
||||
## Change Medusa Application URL
|
||||
|
||||
Reference in New Issue
Block a user