From 18e7f57852640b25205332545e4e3a74f323904e Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Tue, 11 Oct 2022 11:42:56 +0300
Subject: [PATCH] docs: added how-to use sales channels guide (#2345)

* docs: added how-to use sales channels guide

* fix link

* docs: added link to sidebar
---
 .../storefront/use-sales-channels.mdx         | 148 ++++++++++++++++++
 www/docs/sidebars.js                          |   5 +
 2 files changed, 153 insertions(+)
 create mode 100644 docs/content/advanced/storefront/use-sales-channels.mdx

diff --git a/docs/content/advanced/storefront/use-sales-channels.mdx b/docs/content/advanced/storefront/use-sales-channels.mdx
new file mode 100644
index 0000000000000..f4511eb7d3cd9
--- /dev/null
+++ b/docs/content/advanced/storefront/use-sales-channels.mdx
@@ -0,0 +1,148 @@
+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).
\ No newline at end of file
diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js
index e9f5a18e4d9fe..bbf5a5f7797bd 100644
--- a/www/docs/sidebars.js
+++ b/www/docs/sidebars.js
@@ -204,6 +204,11 @@ module.exports = {
               id: "advanced/storefront/how-to-implement-checkout-flow",
               label: "Implement Checkout"
             },
+            {
+              type: "doc",
+              id: "advanced/storefront/use-sales-channels",
+              label: "Use SalesChannels APIs"
+            },
           ]
         },
         {