148 lines
4.0 KiB
Plaintext
148 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.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).
|
||
|
||
## 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-tyoe">
|
||
<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-tyoe">
|
||
<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-tyoe">
|
||
<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.
|
||
|
||
## What’s Next 🚀
|
||
|
||
- Learn how to [Implement the Cart functionality in a storefront](../../guides/carts-in-medusa.mdx).
|
||
- Learn how to [Implement the Checkout functionality in a storefront](./how-to-implement-checkout-flow.mdx). |