d1b4b11ff6
* docs: added rule for code length * chore: fixes based on vale errors * changed to use eslint * fixes using eslint * added github action for documentation eslint * changed allowed max-length * fixed incorrect heading level * removed comment
157 lines
4.0 KiB
Plaintext
157 lines
4.0 KiB
Plaintext
import Tabs from '@theme/Tabs';
|
||
import TabItem from '@theme/TabItem';
|
||
|
||
# How to Use Sales Channels in Storefronts
|
||
|
||
In this document, you’ll learn how to use sales channels in your storefront.
|
||
|
||
## Overview
|
||
|
||
In your storefront, you can filter products by sales channels. You can also associate carts with a sales channel.
|
||
|
||
This guide explains how to perform these operations using the Storefront APIs.
|
||
|
||
---
|
||
|
||
## 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.mdx) 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.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) 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).
|
||
|
||
---
|
||
|
||
## Filter Products by Sales Channel
|
||
|
||
To filter products by a specific sales channel, pass the `sales_channel_id` query parameter to the List Products endpoint:
|
||
|
||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||
<TabItem value="client" label="Medusa JS Client" default>
|
||
|
||
```jsx
|
||
medusa.products.list({
|
||
sales_channel_id: [
|
||
salesChannelId,
|
||
],
|
||
})
|
||
.then(({ products, limit, offset, count }) => {
|
||
console.log(products.length)
|
||
})
|
||
```
|
||
|
||
</TabItem>
|
||
<TabItem value="fetch" label="Fetch API">
|
||
|
||
```jsx
|
||
fetch(`<SERVER_URL>/store/products?sales_channel_id[0]=${salesChannelId}`)
|
||
.then((response) => response.json())
|
||
.then(({ products, limit, offset, count }) => {
|
||
console.log(products.length)
|
||
})
|
||
```
|
||
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
The `sales_channel_id` query parameter is an array of sales channel IDs. You can pass more than one sales channel.
|
||
|
||
The request returns an array of products. These are the products that are available in the sales channel.
|
||
|
||
---
|
||
|
||
## Associate a Cart with a Sales Channel
|
||
|
||
### When Creating a Cart
|
||
|
||
To associate a sales channel with a cart while creating it, you can pass the `sales_channel_id` request body parameter with the ID of the sales channel:
|
||
|
||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||
<TabItem value="client" label="Medusa JS Client" default>
|
||
|
||
|
||
```jsx
|
||
medusa.carts.create({
|
||
sales_channel_id: salesChannelId,
|
||
})
|
||
.then(({ cart }) => {
|
||
console.log(cart.id)
|
||
})
|
||
```
|
||
|
||
</TabItem>
|
||
<TabItem value="fetch" label="Fetch API">
|
||
|
||
```jsx
|
||
fetch(`<SERVER_URL>/store/carts`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
sales_channel_id: salesChannelId,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then(({ cart }) => {
|
||
console.log(cart.id)
|
||
})
|
||
```
|
||
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
The request returns the created cart.
|
||
|
||
### Updating an Existing Cart
|
||
|
||
You can update the sales channel of an existing cart by passing the `sales_channel_id` request body parameter with the ID of the sales channel:
|
||
|
||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||
<TabItem value="client" label="Medusa JS Client" default>
|
||
|
||
```jsx
|
||
medusa.carts.update(cartId, {
|
||
sales_channel_id: salesChannelId,
|
||
})
|
||
.then(({ cart }) => {
|
||
console.log(cart.id)
|
||
})
|
||
```
|
||
|
||
</TabItem>
|
||
<TabItem value="fetch" label="Fetch API">
|
||
|
||
```jsx
|
||
fetch(`<SERVER_URL>/store/carts/${cartId}`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({
|
||
sales_channel_id: salesChannelId,
|
||
}),
|
||
})
|
||
.then((response) => response.json())
|
||
.then(({ cart }) => console.log(cart.id))
|
||
```
|
||
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
The request returns the updated cart.
|
||
|
||
---
|
||
|
||
## See Also
|
||
|
||
- [Implement the Cart functionality in a storefront](../../guides/carts-in-medusa.mdx)
|
||
- [Implement the Checkout functionality in a storefront](./how-to-implement-checkout-flow.mdx)
|