asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: updated how-to docs to be more consistent (#2379)

Browse Source 
* docs: updated how-to docs to be more consistent

* fixed links
This commit is contained in:
Shahed Nasser authored and GitHub committed 2022-10-07 13:21:07 +03:00
1 parent 6b5a7c3ae5
commit 52347c31bc
2 files changed
+159 -142
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
+100 -70
View File
@@ -19,31 +19,37 @@ It’s recommended to go through the [Shipping Architecture Overview](../backend
## Prerequisites ## Prerequisites
### Medusa Components
It's assumed that you already have a Medusa server installed and set up. If not, you can follow our [quickstart guide](../../quickstart/quick-start.md) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../starters/nextjs-medusa-starter.md) or [Gatsby](../../starters/gatsby-medusa-starter.md) storefronts.
### JS Client
This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).
### Previous Steps
This document assumes you’ve already taken care of the add-to-cart flow. So, you should have a [cart created](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCart) for the customer with at least [one product in it](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartLineItems). This document assumes you’ve already taken care of the add-to-cart flow. So, you should have a [cart created](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCart) for the customer with at least [one product in it](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartLineItems).
You can learn how to implement the cart flow using [this documentation](../../guides/carts-in-medusa.mdx). You can learn how to implement the cart flow using [this documentation](../../guides/carts-in-medusa.mdx).
To follow along with this tutorial, you can make use of the [Medusa JS Client](https://www.npmjs.com/package/@medusajs/medusa-js). You can install it with this command:
```bash npm2yarn
npm install @medusajs/medusa-js
```
There’s also an alternative approach in this document using [JavaScript’s Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) in case you’re unable to use Medusa’s JS Client. Make sure to replace `<SERVER_URL>` in those examples with your server URL.
## Shipping Step ## Shipping Step
In this step, the customer generally enters their shipping info, then chooses the available shipping option based on the entered info. In this step, the customer generally enters their shipping info, then chooses the available shipping option based on the entered info.
### Add Shipping Address ### Add Shipping Address
After the customer enters their shipping address information, you must send a `POST` request to the [Update a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCart) API endpoint passing it the new shipping address: After the customer enters their shipping address information, you must send a `POST` request to the [Update a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCart) API endpoint:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-tyoe">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.carts.update(cart.id, { medusa.carts.update(cartId, {
shipping_address: { shipping_address: {
company, company,
first_name, first_name,
@@ -56,8 +62,9 @@ medusa.carts.update(cart.id, {
postal_code, postal_code,
phone phone
}, },
}).then((response) => { })
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.shipping_address);
}) })
``` ```
@@ -65,7 +72,7 @@ medusa.carts.update(cart.id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}`, {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
shipping_address: { shipping_address: {
@@ -84,28 +91,33 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}`, {
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}).then((response) => response.json())
.then((response) => {
//updated cart is in response.cart
}) })
.then((response) => response.json())
.then(({ cart }) => {
console.log(cart.shipping_address);
});
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
You can have access to the updated cart in `response.cart`, which now has the shipping address you added in `response.cart.shipping_address`. This request accepts the ID of the cart as a path parameter and the new shipping address in the request body.
The request returns the updated cart, with the new shipping address available in `cart.shipping_address`.
### List Shipping Options ### List Shipping Options
After updating the cart with the customer’s address, the list of available [shipping options](../backend/shipping/overview.md#shipping-option) for that cart might change. So, you should retrieve the updated list of options by sending a `GET` request to the [Retrieve Shipping Options for Cart API](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptionsCartId) endpoint: After updating the cart with the customer’s address, the list of available [shipping options](../backend/shipping/overview.md#shipping-option) for that cart might change. So, you should retrieve the updated list of options.
You can retrieve the list of shipping options by sending a `GET` request to the [Retrieve Shipping Options for Cart API](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptionsCartId) endpoint:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-tyoe">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.shippingOptions.listCartOptions(cart.id) medusa.shippingOptions.listCartOptions(cartId)
.then((response) => { .then(({ shipping_options }) => {
//shipping options available in response.shipping_options console.log(shipping_options.length);
}) })
``` ```
@@ -113,17 +125,17 @@ medusa.shippingOptions.listCartOptions(cart.id)
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/shipping-options/${cart.id}`) fetch(`<SERVER_URL>/store/shipping-options/${cartId}`)
.then((response) => response.json()) .then((response) => response.json())
.then((response) => { .then(({ shipping_options }) => {
//shipping options available in response.shipping_options console.log(shipping_options.length);
}) })
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
You can access all shipping options available with their info in `response.shipping_options` which is an array of [shipping options](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptions). Typically you would display those options to the customer to choose from. The request accepts the ID of the cart as a path parameter. It returns the array of [shipping options](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptions). Typically you would display those options to the customer to choose from.
### Choose Shipping Option ### Choose Shipping Option
@@ -133,10 +145,11 @@ Once the customer chooses one of the available shipping options, send a `POST` r
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.carts.addShippingMethod(cart.id, { medusa.carts.addShippingMethod(cartId, {
option_id: shipping_option.id //shipping_option is the select option option_id: shippingOptionId //the ID of the selected option
}).then((response) => { })
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.shipping_methods)
}) })
``` ```
@@ -144,24 +157,27 @@ medusa.carts.addShippingMethod(cart.id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/shipping-methods`, { fetch(`<SERVER_URL>/store/carts/${cartId}/shipping-methods`, {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
option_id: shipping_option.id //shipping_option is the select option option_id: shippingOptionId //the ID of the selected option
}), }),
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}).then((response) => response.json()) })
.then((response) => { .then((response) => response.json())
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.shipping_methods)
}) })
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
You can have access to the updated cart in `response.cart`, which now has one item in the array value of the property `shipping_methods`. The request accepts the ID of the cart as a path parameter and its body the ID of the selected shipping option.
It returns the updated cart, with the created shipping method available in the array `cart.shipping_methods`.
## Payment Step ## Payment Step
@@ -177,9 +193,9 @@ To initialize the payment sessions, send a `POST` request to the [Initialize Pay
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.carts.createPaymentSessions(cart.id) medusa.carts.createPaymentSessions(cartId)
.then((response) => { .then(({ cart }) => {
//updated cart is in response.cart console.log(cart.payment_sessions)
}) })
``` ```
@@ -187,18 +203,19 @@ medusa.carts.createPaymentSessions(cart.id)
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/payment-sessions`, { fetch(`<SERVER_URL>/store/carts/${cartId}/payment-sessions`, {
method: 'POST' method: 'POST'
}).then((response) => response.json()) })
.then((response) => { .then((response) => response.json())
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.payment_sessions)
}) })
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
You can then access the initialized payment sessions under the `payment_sessions` array in `response.cart`. This endpoint accepts the ID of the cart as a path parameter. It returns the updated cart with the initialized payment sessions available on `cart.payment_sessions`.
### Select Payment Session ### Select Payment Session
@@ -208,10 +225,11 @@ When the customer chooses the payment provider they want to complete purchase wi
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.carts.setPaymentSession(cart.id, { medusa.carts.setPaymentSession(cartId, {
provider_id: payment_session.provider_id //payment_session is the session chosen by the customer provider_id: paymentProviderId // retrieved from the payment session selected by the customer
}).then((response) => { })
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.payment_session)
}) })
``` ```
@@ -219,24 +237,27 @@ medusa.carts.setPaymentSession(cart.id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/payment-session`, { fetch(`<SERVER_URL>/store/carts/${cartId}/payment-session`, {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
provider_id: payment_session.provider_id //payment_session is the session chosen by the customer provider_id: paymentProviderId // retrieved from the payment session selected by the customer
}), }),
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}).then((response) => response.json()) })
.then((response) => { .then((response) => response.json())
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.payment_session)
}) })
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
You can then access the selected payment session in `response.cart.payment_session`. The request accepts the ID of the cart as a path parameter, and the ID of the payment provider in the request's body.
It returns the updated cart, with the selected payment session available under `cart.payment_session`.
:::tip :::tip
@@ -248,20 +269,21 @@ If you have one payment provider or if only one payment provider is available fo
This step is optional and is only necessary for some payment providers. As mentioned in the [Payment Architecture](../backend/payment/overview.md#overview) documentation, the `PaymentSession` model has a `data` attribute that holds any data required for the Payment Provider to perform payment operations such as capturing payment. This step is optional and is only necessary for some payment providers. As mentioned in the [Payment Architecture](../backend/payment/overview.md#overview) documentation, the `PaymentSession` model has a `data` attribute that holds any data required for the Payment Provider to perform payment operations such as capturing payment.
If you need to update that data at any point before the purchase is made, send a request to [Update a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessionUpdate) API endpoint passing it the updated data object: If you need to update that data at any point before the purchase is made, send a request to [Update a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessionUpdate) API endpoint:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-tyoe">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.carts.updatePaymentSession(cart.id, cart.payment_session.provider_id, { medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
data: { data: {
//pass any data you want to add in the `data` attribute //pass any data you want to add in the `data` attribute
//for example: //for example:
"test": true "test": true
} }
}).then((response) => { })
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.payment_session.data)
}) })
``` ```
@@ -269,7 +291,7 @@ medusa.carts.updatePaymentSession(cart.id, cart.payment_session.provider_id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/payment-sessions/${cart.payment_session.provider_id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}/payment-sessions/${paymentProviderId}`, {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
data: { data: {
@@ -281,16 +303,19 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}/payment-sessions/${cart.payment_sessi
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}).then((response) => response.json()) })
.then((response) => { .then((response) => response.json())
//updated cart is in response.cart .then(({ cart }) => {
console.log(cart.payment_session.data)
}) })
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
You can have access to the updated data in the payment session in `response.cart.payment_session.data`. This request accepts the ID of the cart and the ID of the payment session's payment provider as path parameters. In the request's body, it accepts a `data` object where you can pass any data relevant for the payment provider.
It returns the updated cart. You can access the payment session's data on `cart.payment_session.data`.
### Complete Cart ### Complete Cart
@@ -302,9 +327,9 @@ To complete a cart, send a `POST` request to the [Complete a Cart](https://docs.
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
medusa.carts.complete(cart.id) medusa.carts.complete(cartId)
.then((response) => { .then(({ type, data }) => {
//order details is in response.data console.log(type, data);
}) })
``` ```
@@ -312,21 +337,26 @@ medusa.carts.complete(cart.id)
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/complete`, { fetch(`<SERVER_URL>/store/carts/${cartId}/complete`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}).then((response) => response.json()) })
.then((response) => { .then((response) => response.json())
//order details is in response.data .then(({ type, data }) => {
console.log(type, data);
}) })
``` ```
</TabItem> </TabItem>
</Tabs> </Tabs>
If the order is placed successfully, you can access the order data in `response.data` and the value for `response.type` is `order`. Otherwise, `response.data` holds the cart details and `response.type` is `cart`. This request accepts the ID of the cart as a path parameter.
The request returns two properties: `type` and `data`. If the order was placed successfully, `type` will be `order` and `data` will be the order's data.
If an error occurred while placing the order, `type` will be `cart` and `data` will be the cart's data.
## What’s Next 🚀 ## What’s Next 🚀
docs/content/guides/carts-in-medusa.mdx
+59 -72
View File
@@ -20,52 +20,27 @@ This document does not cover implementing the checkout flow. You can refer to [t
## Prerequisites ## Prerequisites
It is assumed you already have a Medusa server installed before following along with this tutorial. If not, you can get started in minutes by following the [quickstart guide](../quickstart/quick-start.md). ### Medusa Components
It's assumed that you already have a Medusa server installed and set up. If not, you can follow our [quickstart guide](../quickstart/quick-start.md) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../starters/nextjs-medusa-starter.md) or [Gatsby](../starters/gatsby-medusa-starter.md) storefronts. It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../starters/nextjs-medusa-starter.md) or [Gatsby](../starters/gatsby-medusa-starter.md) storefronts.
## Install the JS Client ### JS Client
It is recommended to use Medusa’s JS Client in your storefront. You can install it using the following command: This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
```bash npm2yarn If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../js-client/overview.md) and have [created an instance of the client](../js-client/overview.md#configuration).
npm install @medusajs/medusa-js
```
:::note
This document alternatively shows code examples using [JavaScript’s Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). Make sure to replace `<SERVER_URL>` in those examples with your server URL.
:::
Then, initialize the Medusa JS Client in a single file that all of your components can access:
```jsx
import Medusa from '@medusajs/medusa-js';
export const client = new Medusa({
baseUrl: '<SERVER_URL>',
maxRetries: 3
});
```
Where `<SERVER_URL>` is the URL of your server. If you’re using a local server, it runs on `http://localhost:9000` by default.
:::caution
Make sure to include `http://` in the URL when sending requests to the local server. Otherwise, all requests will fail.
:::
## Create a Cart ## Create a Cart
You can create a cart with the following code snippet: You can create a cart with the following code snippet:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.create() medusa.carts.create()
.then(({ cart }) => { .then(({ cart }) => {
localStorage.setItem('cart_id', cart.id); localStorage.setItem('cart_id', cart.id);
//assuming you have a state variable to store the cart //assuming you have a state variable to store the cart
@@ -91,21 +66,17 @@ fetch(`<SERVER_URL>/store/carts`, {
</TabItem> </TabItem>
</Tabs> </Tabs>
A cart will be created with a random region assigned to it. This request does not require any parameters. It returns the created cart in the response.
:::note The cart by default will have a random region assigned to it. You can specify the cart's region by passing in the request's body a `region_id` parameter:
The region a cart is associated with determines the currency the cart uses, the tax, payment, and fulfillment providers, and other details and options. So, make sure you use the correct region for a cart.
:::
Otherwise, you can assign it a specific region during creation: Otherwise, you can assign it a specific region during creation:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.create({ medusa.carts.create({
region_id region_id
}) })
.then(({ cart }) => { .then(({ cart }) => {
@@ -139,7 +110,13 @@ fetch(`<SERVER_URL>/store/carts`, {
</TabItem> </TabItem>
</Tabs> </Tabs>
To learn about what parameters you can pass during the cart’s creation, check out the [JS Client Reference](../references/js-client/classes/CartsResource.md#create) or the [API Reference](/api/store#tag/Cart/operation/PostCart). Check out the [API Reference](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCart) for a full list of available request body parameters.
:::note
The region a cart is associated with determines the currency the cart uses, the tax, payment, and fulfillment providers, and other details and options. So, make sure you use the correct region for a cart.
:::
## Retrieve a Cart ## Retrieve a Cart
@@ -147,14 +124,14 @@ Notice that in the previous code snippets, you set the cart’s ID in the local
You can retrieve the cart at any given point using its ID with the following code snippet: You can retrieve the cart at any given point using its ID with the following code snippet:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
const id = localStorage.getItem('cart_id'); const id = localStorage.getItem('cart_id');
if (id) { if (id) {
client.carts.retrieve(id) medusa.carts.retrieve(id)
.then(({ cart }) => setCart(cart)); .then(({ cart }) => setCart(cart));
} }
``` ```
@@ -175,6 +152,8 @@ if (id) {
</TabItem> </TabItem>
</Tabs> </Tabs>
This request accepts the ID of the cart as a path parameter and returns the cart of that ID.
You can run this code snippet every time the storefront is opened. If a customer has a cart ID stored in their local storage, it’s loaded from the server. You can run this code snippet every time the storefront is opened. If a customer has a cart ID stored in their local storage, it’s loaded from the server.
:::tip :::tip
@@ -190,14 +169,14 @@ A cart has different data associated with it including the region, email, addres
You can use the following snippet to update any of the cart’s data: You can use the following snippet to update any of the cart’s data:
```jsx ```jsx
client.carts.update(cart.id, { medusa.carts.update(cartId, {
region_id region_id
}) })
.then(({ cart }) => setCart(cart)); .then(({ cart }) => setCart(cart));
``` ```
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -210,21 +189,23 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}`, {
.then(({ cart }) => setCart(cart)); .then(({ cart }) => setCart(cart));
``` ```
This updates the region in the cart. This request accepts the ID of the cart as a path parameter. In its body, you can pass any data you want to update in the cart such as the region.
To find out what data you can update in the cart, check out the [JS Client reference](../references/js-client/classes/CartsResource.md#update) or the [API reference](/api/store/#tag/Cart/operation/PostCartsCart). It returns the updated cart.
Check out the full list of available request body parameters in the [API Reference](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCart).
### Associate a Logged-In Customer with the Cart ### Associate a Logged-In Customer with the Cart
A customer might add items to their cart, then creates an account or log in. In that case, you should ensure that the cart is associated with the logged-in customer moving forward. A customer might add items to their cart, then creates an account or log in. In that case, you should ensure that the cart is associated with the logged-in customer moving forward.
This can be done using the same update operation: You can do that using the same update operation:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.update(cart.id, { medusa.carts.update(cartId, {
customer_id customer_id
}) })
.then(({ cart }) => setCart(cart)); .then(({ cart }) => setCart(cart));
@@ -234,7 +215,7 @@ client.carts.update(cart.id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -254,15 +235,15 @@ This updates the `customer_id` associated with the cart to make sure it belongs
### Associate Guest Customers with a Cart using Email ### Associate Guest Customers with a Cart using Email
In case the customer does not want to use their own account, you must at least associate an email address with the cart before completing the cart and placing the order. In case the customer doesn't want to use their own account, you must at least associate an email address with the cart before completing the cart and placing the order.
This can be done using the same update operation: You can do that using the same update operation:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.update(cart.id, { medusa.carts.update(cartId, {
email: 'user@example.com' email: 'user@example.com'
}) })
.then(({ cart }) => setCart(cart)); .then(({ cart }) => setCart(cart));
@@ -272,7 +253,7 @@ client.carts.update(cart.id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -292,11 +273,11 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}`, {
To create a line item of a product and add it to a cart, you can use the following code snippet: To create a line item of a product and add it to a cart, you can use the following code snippet:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.lineItems.create(cart.id, { medusa.carts.lineItems.create(cartId, {
variant_id, variant_id,
quantity: 1 quantity: 1
}) })
@@ -307,7 +288,7 @@ client.carts.lineItems.create(cart.id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/line-items`, { fetch(`<SERVER_URL>/store/carts/${cartId}/line-items`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -324,7 +305,11 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}/line-items`, {
</TabItem> </TabItem>
</Tabs> </Tabs>
Where `variant_id` is the variant of the product you want to add to the cart. This request accepts the ID of the cart as a path parameter. In the body, it's required to send the ID of the product variant you want to add to the cart and its quantity.
It returns the updated cart.
This adds a new line item to the cart. Line items can be accessed using `cart.items` which is an array that holds all line items in the cart. You can learn more about what properties line items have in the [API reference](/api/store/#tag/Cart/operation/PostCartsCartLineItems).
:::note :::note
@@ -332,17 +317,15 @@ If you’re using Sales Channels, make sure that the cart and the product belong
::: :::
This adds a new line item to the cart. Line items can be accessed using `cart.items` which is an array that holds all line items in the cart. You can learn more about what properties line items have in the [API reference](/api/store/#tag/Cart/operation/PostCartsCartLineItems).
## Update Line Item in the Cart ## Update Line Item in the Cart
To update a line item in the cart, you can use the following code snippet: To update a line item's quantity in the cart, you can use the following code snippet:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.lineItems.update(cart.id, line_item_id, { medusa.carts.lineItems.update(cartId, lineItemId, {
quantity: 3 quantity: 3
}) })
.then(({ cart }) => setCart(cart)) .then(({ cart }) => setCart(cart))
@@ -352,7 +335,7 @@ client.carts.lineItems.update(cart.id, line_item_id, {
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/line-items/${line_item_id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}/line-items/${lineItemId}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -368,17 +351,19 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}/line-items/${line_item_id}`, {
</TabItem> </TabItem>
</Tabs> </Tabs>
This updates the quantity of the line item in the cart using the item’s ID. This request accepts the ID of the cart and the ID of the line item as path parameters. In the body, it accepts the quantity of the line item.
It returns the updated cart.
## Delete a Line Item from the Cart ## Delete a Line Item from the Cart
To delete a line item from the cart, you can use the following code snippet: To delete a line item from the cart, you can use the following code snippet:
<Tabs groupId="request-tyoe"> <Tabs groupId="request-type">
<TabItem value="client" label="Medusa JS Client" default> <TabItem value="client" label="Medusa JS Client" default>
```jsx ```jsx
client.carts.lineItems.delete(cart.id, line_item_id) medusa.carts.lineItems.delete(cartId, lineItemId)
.then(({ cart }) => setCart(cart)) .then(({ cart }) => setCart(cart))
``` ```
@@ -386,7 +371,7 @@ client.carts.lineItems.delete(cart.id, line_item_id)
<TabItem value="fetch" label="Fetch API"> <TabItem value="fetch" label="Fetch API">
```jsx ```jsx
fetch(`<SERVER_URL>/store/carts/${cart.id}/line-items/${line_item_id}`, { fetch(`<SERVER_URL>/store/carts/${cartId}/line-items/${lineItemId}`, {
method: 'DELETE' method: 'DELETE'
}) })
.then((response) => response.json()) .then((response) => response.json())
@@ -396,7 +381,9 @@ fetch(`<SERVER_URL>/store/carts/${cart.id}/line-items/${line_item_id}`, {
</TabItem> </TabItem>
</Tabs> </Tabs>
This deletes a line item from the cart using the item’s ID. This request accepts the ID of the cart and the ID of the line item as path parameters.
It returns the updated cart.
## What’s Next 🚀 ## What’s Next 🚀