docs: added bundled products guide (#12332)

* docs: added bundled products guide

* generate
This commit is contained in:
Shahed Nasser
2025-05-07 16:16:05 +03:00
committed by GitHub
parent a3bdb3e383
commit fe3e79ea5a
18 changed files with 14077 additions and 10742 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -202,6 +202,12 @@ You can now [execute the workflow](!docs!/learn/fundamentals/workflows#3-execute
## Bundled Products
<Note>
While inventory kits support bundled products, some features like custom pricing for a bundle or separate fulfillment for a bundle's items are not supported. To support those features, follow the [Bundled Products](../../../recipes/bundled-products/examples/standard/page.mdx) tutorial to learn how to customize the Medusa application to add bundled products.
</Note>
Consider you have three products: shirt, pants, and shoes. You sell those products separately, but you also want to offer them as a bundle.
![Diagram showcasing products each having their own variants and inventory](https://res.cloudinary.com/dza7lstvk/image/upload/v1736414787/Medusa%20Resources/bundled-product-1_vmzewk.jpg)

View File

@@ -455,7 +455,7 @@ You create a step with `createStep` from the Workflows SDK. It accepts two param
In the step function, you resolve the Review Module's service from the Medusa container using its `resolve` method, passing it the module's name as a parameter.
Then, you create the review using the `createReview` method. As you remember, the Review Module's service extends the `MedusaService` which generates data-management methods for you.
Then, you create the review using the `createReviews` method. As you remember, the Review Module's service extends the `MedusaService` which generates data-management methods for you.
A step function must return a `StepResponse` instance. The `StepResponse` constructor accepts two parameters:

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,183 @@
import { AcademicCapSolid, PuzzleSolid } from "@medusajs/icons";
import { ChildDocs } from "docs-ui"
export const metadata = {
title: `Bundled Products Recipe`,
};
# {metadata.title}
This recipe provides the general steps to implement bundled products in your Medusa application.
## Example Guide
<ChildDocs type="item" onlyTopLevel={true} />
## Overview
Bundled products allow you to group multiple products into a single bundle that customers can purchase together. By using bundled products, you can offer items at a discounted price or fulfill items within the same bundle separately, among other features.
Medusa provides an [inventory kit](../../commerce-modules/inventory/inventory-kit/page.mdx) feature that allows you to create bundled products. However, it doesn't support all bundled-product features. For example, you can't set a different price for the bundle, or fulfill items within the same bundle separately.
To support more bundled-product features, you can customize the Medusa application by creating a Bundled Product Module and building flows around it.
---
## Create Bundled Product Module
Your custom features and functionalities are implemented inside modules. The module is integrated into the Medusa application without any implications on existing functionalities.
The module will hold your custom data models and the service implementing bundled-product-related features.
<Card
href="!docs!/learn/fundamentals/modules"
title="How to Create a Module"
text="Learn how to create a module."
icon={AcademicCapSolid}
/>
### Create Custom Data Models
A data model represents a table in the database. You can define in your module data models to store data related to your custom features, such as a bundled product.
For example, you can define:
- A `Bundle` model for the bundle itself.
- A `BundleItem` model for the items in the bundle.
Then, you can link your custom data model to data models from other modules. For example, you can link the `BundleItem` model to the Product Module's `Product` data model.
<CardList itemsPerRow={2} items={[
{
href: "!docs!/learn/fundamentals/modules#1-create-data-model",
title: "How to Create a Data Model",
text: "Learn how to create a data model.",
icon: AcademicCapSolid,
},
{
href: "!docs!/learn/fundamentals/module-links",
title: "Define Module Links",
text: "Define links between data models.",
icon: AcademicCapSolid,
},
]} />
### Implement Data Management Features
Your modules main service holds data-management and other related features. Then, in other resources, such as an API route, you can resolve the service from the Medusa container and use its functionalities.
Medusa facilitates implementing data-management features using the service factory. Your module's main service can extend this service factory, and it generates data-management methods for your data models.
<Card
href="!docs!/learn/fundamentals/modules/service-factory"
title="Service Factory"
text="Learn about the service factory and how to use it."
icon={AcademicCapSolid}
/>
---
## Implement Workflows
You implement the features in your use case using workflows. A workflow is a series of queries and actions, called steps, that complete a task.
By using workflows, you benefit from features like rollback mechanism, error handling, and retrying failed steps.
You can implement workflows that create a bundled product, add bundled product to the cart, and more. In the workflow's steps, you can resolve the Bundled Product Module's service and use its data-management methods to manage bundled products.
Then, you can utilize these workflows in other resources, such as an API route.
<Card
href="!docs!/learn/fundamentals/workflows"
title="Workflows"
text="Learn how to create a workflow."
icon={AcademicCapSolid}
/>
---
## Add Custom API Routes
API routes expose your features to external applications, such as the admin dashboard or the storefront.
You can create custom API routes that expose the features you've built as workflows. For example, you can create an API route that allows merchants to list and create bundled products.
<Card
href="!docs!/learn/fundamentals/api-routes"
title="API Routes"
text="Learn how to create an API route."
icon={AcademicCapSolid}
/>
---
## Manage Linked Records
If you've defined links between data models of two modules, you can manage them through two tools: Link and Query.
Use Link to create a link between two records, and use Query to fetch data across linked data models.
For example, you can define a link between a `Bundle` and a `Product` from the [Product Module](../../commerce-modules/product/page.mdx). Later, you can retrieve the product associated with the bundle using Query.
<CardList itemsPerRow={2} items={[
{
href: "!docs!/learn/fundamentals/module-links/link",
title: "How to Use Link",
text: "Learn how to link data models of different modules.",
icon: AcademicCapSolid,
},
{
href: "!docs!/learn/fundamentals/module-links/query",
title: "How to Use Query",
text: "Learn how to fetch data across modules with Medusa's Query.",
icon: AcademicCapSolid,
},
]} />
---
## Customize Admin Dashboard
You can extend the Medusa Admin to provide merchants with an interface to manage bundled products. You can inject widgets into existing pages or create new pages.
In your customizations, you send requests to the API routes you created to manage bundled products.
<CardList items={[
{
href: "!docs!/learn/fundamentals/admin/widgets",
title: "Create a Widget",
text: "Learn how to create a widget in the Medusa Admin.",
icon: AcademicCapSolid,
},
{
href: "!docs!/learn/fundamentals/admin/ui-routes",
title: "Create UI Route",
text: "Learn how to create a UI route in the Medusa Admin.",
icon: AcademicCapSolid,
},
]} />
---
## Customize or Build Storefront
Customers use your storefront to browse your bundled products and purchase them. You can also provide other helpful features, such as displaying the bundle's details and allowing customers to select options for the items in the bundle.
Medusa provides a Next.js Starter Storefront with standard commerce features including listing products, placing orders, and managing accounts. You can customize the storefront and cater its functionalities to support bundled products.
Alternatively, you can build the storefront with your preferred tech stack.
<CardList items={[
{
href: "/nextjs-starter",
title: "Next.js Starter",
text: "Learn how to install and use the Next.js Starter storefront.",
icon: AcademicCapSolid,
},
{
href: "/storefront-development",
title: "Storefront Guides",
text: "Learn how to build a storefront for your Medusa application.",
icon: AcademicCapSolid,
},
]} />

View File

@@ -1,4 +1,5 @@
import { AcademicCapSolid, BoltSolid, PuzzleSolid } from "@medusajs/icons"
import { ChildDocs } from "docs-ui"
export const metadata = {
title: `Digital Products Recipe`,
@@ -8,6 +9,10 @@ export const metadata = {
This recipe provides the general steps to implement digital products in your Medusa application.
## Example Guides
<ChildDocs type="item" onlyTopLevel={true} />
## Overview
Digital products are stored privately using a storage service like S3. When the customer buys this type of product, an email is sent to them where they can download the product.
@@ -90,27 +95,14 @@ Medusa facilitates implementing data-management features using the service facto
---
## Add Custom API Routes
API routes expose your features to external applications, such as the admin dashboard or the storefront.
You can create custom API routes that allow merchants to list and create digital products. In these API routes, you resolve the Digital Product Modules main service to use its data-management features.
<Card
href="!docs!/learn/fundamentals/api-routes"
title="API Routes"
text="Learn how to create an API route."
icon={AcademicCapSolid}
/>
---
## Implement Workflows
Your use case most likely has flows, such as creating digital products, that require multiple steps.
Create workflows to implement these flows, then utilize these workflows in other resources, such as an API route.
In the workflow's steps, you can resolve the Digital Product Module's service and use its data-management methods to manage digital products.
<Card
href="!docs!/learn/fundamentals/workflows"
title="Workflows"
@@ -120,6 +112,21 @@ Create workflows to implement these flows, then utilize these workflows in other
---
## Add Custom API Routes
API routes expose your features to external applications, such as the admin dashboard or the storefront.
You can create custom API routes that allow merchants to list and create digital products.
<Card
href="!docs!/learn/fundamentals/api-routes"
title="API Routes"
text="Learn how to create an API route."
icon={AcademicCapSolid}
/>
---
## Manage Linked Records
If you've defined links between data models of two modules, you can manage them through two tools: Link and Query.
@@ -185,7 +192,7 @@ You can create or install a fulfillment module provider that handles the logic o
Customers use your storefront to browse your digital products and purchase them. You can also provide other helpful features, such as previewing the digital product before purchase.
Medusa provides a Next.js storefront with standard commerce features including listing products, placing orders, and managing accounts. You can customize the storefront and cater its functionalities to support digital products.
Medusa provides a Next.js Starter Storefront with standard commerce features including listing products, placing orders, and managing accounts. You can customize the storefront and cater its functionalities to support digital products.
Alternatively, you can build the storefront with your preferred tech stack.

View File

@@ -112,7 +112,7 @@ export const generatedEditDates = {
"app/recipes/b2b/page.mdx": "2025-04-17T08:48:38.369Z",
"app/recipes/commerce-automation/page.mdx": "2025-05-01T15:33:47.062Z",
"app/recipes/digital-products/examples/standard/page.mdx": "2025-04-24T15:41:05.364Z",
"app/recipes/digital-products/page.mdx": "2025-04-17T08:29:01.230Z",
"app/recipes/digital-products/page.mdx": "2025-04-30T12:19:20.550Z",
"app/recipes/ecommerce/page.mdx": "2025-02-26T12:20:52.092Z",
"app/recipes/marketplace/examples/vendors/page.mdx": "2025-03-18T15:28:32.122Z",
"app/recipes/marketplace/page.mdx": "2025-04-17T08:48:36.942Z",
@@ -5735,7 +5735,7 @@ export const generatedEditDates = {
"references/types/StockLocationTypes/types/types.StockLocationTypes.UpdateStockLocationAddressInput/page.mdx": "2025-01-07T12:54:23.057Z",
"references/types/StockLocationTypes/types/types.StockLocationTypes.UpsertStockLocationAddressInput/page.mdx": "2025-01-07T12:54:23.058Z",
"app/storefront-development/guides/express-checkout/page.mdx": "2025-04-17T08:29:01.027Z",
"app/commerce-modules/inventory/inventory-kit/page.mdx": "2025-02-26T11:18:00.353Z",
"app/commerce-modules/inventory/inventory-kit/page.mdx": "2025-04-30T14:39:20.174Z",
"app/commerce-modules/api-key/workflows/page.mdx": "2025-01-09T13:41:46.573Z",
"app/commerce-modules/api-key/js-sdk/page.mdx": "2025-01-09T12:04:39.787Z",
"app/commerce-modules/auth/js-sdk/page.mdx": "2025-01-09T13:27:54.016Z",

View File

@@ -935,6 +935,14 @@ export const filesMap = [
"filePath": "/www/apps/resources/app/recipes/b2b/page.mdx",
"pathname": "/recipes/b2b"
},
{
"filePath": "/www/apps/resources/app/recipes/bundled-products/examples/standard/page.mdx",
"pathname": "/recipes/bundled-products/examples/standard"
},
{
"filePath": "/www/apps/resources/app/recipes/bundled-products/page.mdx",
"pathname": "/recipes/bundled-products"
},
{
"filePath": "/www/apps/resources/app/recipes/commerce-automation/page.mdx",
"pathname": "/recipes/commerce-automation"

View File

@@ -1079,6 +1079,14 @@ const generatedgeneratedCommerceModulesSidebarSidebar = {
"title": "Extend Module",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"type": "ref",
"title": "Implement Bundled Products",
"path": "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard",
"children": []
},
{
"loaded": true,
"isPathHref": true,
@@ -11341,6 +11349,14 @@ const generatedgeneratedCommerceModulesSidebarSidebar = {
"title": "Get Variant Prices",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"type": "ref",
"title": "Implement Bundled Products",
"path": "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard",
"children": []
},
{
"loaded": true,
"isPathHref": true,

View File

@@ -357,6 +357,15 @@ const generatedgeneratedHowToTutorialsSidebarSidebar = {
"description": "Learn how to send abandoned cart notifications to customers.",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"type": "ref",
"title": "Bundled Products",
"path": "/recipes/bundled-products/examples/standard",
"description": "Learn how to implement bundled products in your Medusa store.",
"children": []
},
{
"loaded": true,
"isPathHref": true,

View File

@@ -106,6 +106,23 @@ const generatedgeneratedRecipesSidebarSidebar = {
}
]
},
{
"loaded": true,
"isPathHref": true,
"type": "link",
"path": "/recipes/bundled-products",
"title": "Bundled Products",
"children": [
{
"loaded": true,
"isPathHref": true,
"type": "link",
"path": "/recipes/bundled-products/examples/standard",
"title": "Example",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,

View File

@@ -78,6 +78,13 @@ While tutorials show you a specific use case, they also help you understand how
description:
"Learn how to send abandoned cart notifications to customers.",
},
{
type: "ref",
title: "Bundled Products",
path: "/recipes/bundled-products/examples/standard",
description:
"Learn how to implement bundled products in your Medusa store.",
},
{
type: "link",
title: "Custom Item Pricing",

View File

@@ -73,6 +73,18 @@ export const recipesSidebar = [
},
],
},
{
type: "link",
path: "/recipes/bundled-products",
title: "Bundled Products",
children: [
{
type: "link",
path: "/recipes/bundled-products/examples/standard",
title: "Example",
},
],
},
{
type: "link",
path: "/recipes/commerce-automation",

View File

@@ -13,6 +13,12 @@ export const metadata = {
In this guide, you'll learn how to create a product whose variants make up a bundle of products.
<Note>
While the inventory kits feature supports bundled products, it doesn't support all its features, such as custom price for the bundle or separate fulfillment for the items. To support these features, refer your technical team to the [Bundled Products](!resources!/recipes/bundled-products/examples/standard) tutorial.
</Note>
## Bundle Products with Inventory Kits
Consider you separately sell a camera, a lens, and a camera bag, but you want to sell these products as a bundle for a different price.

View File

@@ -19,6 +19,10 @@ export const cart = [
"title": "Implement Loyalty Points",
"path": "https://docs.medusajs.com/resources/how-to-tutorials/tutorials/loyalty-points"
},
{
"title": "Implement Bundled Products",
"path": "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard"
},
{
"title": "Create Cart Context in Storefront",
"path": "https://docs.medusajs.com/resources/storefront-development/cart/context"

View File

@@ -83,6 +83,10 @@ export const product = [
"title": "Build Wishlist Plugin",
"path": "https://docs.medusajs.com/resources/plugins/guides/wishlist"
},
{
"title": "Implement Bundled Products",
"path": "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard"
},
{
"title": "Implement Express Checkout with Medusa",
"path": "https://docs.medusajs.com/resources/storefront-development/guides/express-checkout"

View File

@@ -79,6 +79,10 @@ export const server = [
"title": "Build Wishlist Plugin",
"path": "https://docs.medusajs.com/resources/plugins/guides/wishlist"
},
{
"title": "Bundled Products",
"path": "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard"
},
{
"title": "Create Auth Provider",
"path": "https://docs.medusajs.com/resources/references/auth/provider"

View File

@@ -42,5 +42,9 @@ export const tutorial = [
{
"title": "Build Wishlist Plugin",
"path": "https://docs.medusajs.com/resources/plugins/guides/wishlist"
},
{
"title": "Bundled Products",
"path": "https://docs.medusajs.com/resources/recipes/bundled-products/examples/standard"
}
]