Files
medusa-store/www/apps/docs/content/recipes/b2b.mdx
Shahed Nasser ef3d735113 docs: update price list's user guide (#5323)
* docs: update price list's user guide

* remove import links

* hide import prices docs

* add double quotes

* fix build error

* removed import prices section

* remove text about import
2023-10-09 17:31:32 +03:00

437 lines
13 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
addHowToData: true
---
import DocCardList from '@theme/DocCardList';
import DocCard from '@theme/DocCard';
import Icons from '@theme/Icon';
import LearningPath from '@site/src/components/LearningPath';
# B2B Recipe
This document guides you through the different documentation resources that will help you build a B2B store with Medusa.
## Overview
In a B2B store, its essential to differentiate between customer types to provide them with relevant pricing, products, shopping experience, and more.
Medusas commerce features, including sales channels, customer groups, and price lists, facilitate implementing this setup. Medusas architecture and extendible nature allow you to customize your store based on your use case.
<LearningPath pathName="b2b" />
---
## Create B2B Sales Channel
In Medusa, a sales channel allows you to set product availability per channel. In this case, you can create a B2B sales channel that will include only B2B products.
You can create a sales channel through the Medusa admin or Admin REST APIs.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/user-guide/sales-channels/manage',
label: 'Option 1: Use Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Create the sales channel using the Medusa admin.',
}
},
{
type: 'link',
href: '/modules/sales-channels/admin/manage',
label: 'Option 2: Using the REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Create the sales channel using the REST APIs.',
}
},
]} />
---
## Create a Publishable API Key
Publishable API keys can be associated with one or more sales channels. Then, in a client such as a storefront, you can pass the publishable API key in the header of your requests to ensure all products retrieved belong to the associated sales channel(s).
You can create a publishable API key through the Medusa admin or the Admin REST APIs, then associate it with the B2B sales channel. Youll later use this key when developing your B2B storefront.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/user-guide/settings/publishable-api-keys',
label: 'Option 1: Use Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Create the publishable API key using the Medusa admin.',
}
},
{
type: 'link',
href: '/development/publishable-api-keys/admin/manage-publishable-api-keys',
label: 'Option 2: Using the REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Create the publishable API key using the REST APIs.',
}
},
]} />
---
## Add Products
Using the Medusa admin or the Admin REST APIs, you can add your B2B products to your store. You can also import your products from an existing CSV file using the Product Import feature.
After or while you add your products, set the products availability to the B2B sales channel youve created.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/user-guide/products/manage',
label: 'Add Products Using Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Create the product using the Medusa admin.',
}
},
{
type: 'link',
href: '/modules/products/admin/manage-products',
label: 'Add Products Using REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Create the product using the REST APIs.',
}
},
{
type: 'link',
href: '/user-guide/products/import',
label: 'Import Products Using Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Import the products using the Medusa admin.',
}
},
{
type: 'link',
href: '/modules/products/admin/import-products',
label: 'Import Products Using REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Import the product using the REST APIs.',
}
},
]} />
---
## Create B2B Customer Groups
In B2B sales, you often negotiate special prices with each customer or company. So, you need to organize your B2B customers into groups that allow you to set different prices for each.
You can create a single B2B customer group that all your B2B customers will fall into or create different B2B customer groups for every B2B customer. The second approach is helpful if you apply different prices for each business.
While creating the customer groups, make sure to add to the `metadata` attribute of the customer group a key `is_b2b` that acts as a flag to indicate that this is a B2B customer group. This is useful for later steps.
For more advanced customer modeling, you may create custom entities. This is covered in the [Create Custom Entity section](#create-custom-entity).
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/user-guide/customers/groups',
label: 'Option 1: Use Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Create the customer group using the Medusa admin.',
}
},
{
type: 'link',
href: '/modules/customers/admin/manage-customer-groups',
label: 'Option 2: Using the REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Create the customer group using the REST APIs.',
}
},
]} />
---
## Add B2B Customers
After adding your B2B customer group, you can add B2B customers and assign them to the B2B customer group. Alternatively, if you want to allow B2B customers to register themselves, then that will be covered in a later step.
You can create a customer through the Medusa admin or Admin REST APIs.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/user-guide/customers/manage',
label: 'Option 1: Use Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Create the customers using the Medusa admin.',
}
},
{
type: 'link',
href: '/modules/customers/admin/manage-customers',
label: 'Option 2: Using the REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Create the customers using the REST APIs.',
}
},
]} />
---
## Create B2B Price List
A price list allows you to set different prices on a set of products for various conditions. When building a B2B store, you can use this to assign different prices for B2B customer groups.
You can use price lists to set the same price for all B2B customers or different prices for different B2B customers if youve organized them into separate customer groups.
You can create a price list through the Medusa admin or Admin REST APIs.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/user-guide/price-lists/manage',
label: 'Add Price List Using Medusa Admin',
customProps: {
icon: Icons['users-solid'],
description: 'Create the price list using the Medusa admin.',
}
},
{
type: 'link',
href: '/modules/price-lists/admin/manage-price-lists',
label: 'Add Price List Using REST APIs',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Create the price list using the REST APIs.',
}
},
]} />
---
## Create Custom Entity
If you wish for a more advanced B2B sales flow, you can use Custom Entities to model Companies, Employees, Admins, and Buyers. This gives you more granular control of your B2B sales and allows you to build features like privileges, limits, and more.
Each of the entities you create can be controlled using custom logic.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/development/entities/create',
label: 'Create Entity',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to create a custom entity.',
}
},
{
type: 'link',
href: '/development/overview',
label: 'Medusa Development',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Find all the development resources to customize Medusa.',
}
},
]} />
---
## Create an Endpoint to Check Customers
On the frontend clients communicating with your store, such as the storefront, youll need to check whether the currently logged-in customer is a B2B customer.
The endpoints logic differs based on how youve implemented the B2B logic. For example, if youve used the `is_b2b` flag in the customer group, your endpoint can check whether that flag is enabled for the logged-in customer.
Medusa allows you to create custom endpoints exposed as REST APIs.
<DocCard item={{
type: 'link',
href: '/development/endpoints/create',
label: 'Create an Endpoint',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to create an endpoint in Medusa.',
}
}} />
<details>
<summary>
Example Implementation
</summary>
Heres an example of an endpoint that allows you to check the customers group and whether it has the `is_b2b` flag enabled:
```ts title=src/api/index.ts
import { CustomerService } from "@medusajs/medusa"
import { Router } from "express"
import { requireCustomerAuthentication } from "@medusajs/medusa"
import cors from "cors"
import { ConfigModule } from "@medusajs/medusa"
import { getConfigFile } from "medusa-core-utils"
export default (rootDirectory) => {
const router = Router()
const { configModule } = getConfigFile<ConfigModule>(
rootDirectory,
"medusa-config"
)
const corsOptions = {
origin: configModule.projectConfig.store_cors.split(","),
credentials: true,
}
router.options("/store/customers/is-b2b", cors(corsOptions))
router.get(
"/store/customers/is-b2b",
cors(corsOptions),
requireCustomerAuthentication(),
async (req, res) => {
const customerService: CustomerService = req.scope.resolve(
"customerService"
)
const customer = await customerService
.retrieve(req.user.customer_id, {
relations: ["groups"],
})
const is_b2b = customer.groups.some(
(group) => group.metadata.is_b2b === "true"
)
return res.json({
is_b2b,
})
})
return router
}
```
</details>
---
## Customize Admin
Based on your use case, you may need to customize the Medusa admin to add new widgets or pages.
The Medusa admin plugin can be extended to add widgets, UI routes, and setting pages.
<DocCardList colSize={4} items={[
{
type: 'link',
href: '/admin/widgets',
label: 'Create Admin Widget',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to add widgets into existing admin pages.',
}
},
{
type: 'link',
href: '/admin/routes',
label: 'Create Admin UI Routes',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to add new pages to your Medusa admin.',
}
},
{
type: 'link',
href: '/admin/setting-pages',
label: 'Create Admin Setting Page',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to add new page to the Medusa admin settings.',
}
},
]} />
---
## Customize Storefront
You may want different interfaces for B2B and regular customers on the storefront. You may also want to display products differently for each type of customer.
Medusa provides a Next.js starter that you can use and customize. You can also build your storefront with any frontend technology. Medusa provides you with different client libraries and REST APIs to use.
Use the publishable API key you associated with your B2B sales channel in the storefront to ensure only B2B products are retrieved.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/starters/nextjs-medusa-starter',
label: 'Option 1: Use Next.js Starter',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to install and use the Next.js starter template.',
}
},
{
type: 'link',
href: '/storefront/roadmap',
label: 'Options 2: Build Custom Storefront',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to build a custom storefront with your preferred technology.',
}
},
]} />
<DocCard item={{
type: 'link',
href: '/development/publishable-api-keys/storefront/use-in-requests',
label: 'Use Publishable API Keys',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to use the publishable API key in client requests.',
}
}} />
---
## Deploy B2B Store
Once you finish your development, you can deploy your B2B backend and storefront to your preferred hosting providers.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/deployments/server',
label: 'Deploy Medusa Backend',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to deploy your Medusa backend to your preferred hosting provider.',
}
},
{
type: 'link',
href: '/deployments/storefront',
label: 'Deploy Storefront',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Learn how to deploy your storefront to your preferred hosting provider.',
}
},
]} />
---
## Additional Development
You can find other resources for your B2B development in the [Medusa Development section](../development/overview.mdx) of this documentation.