From adf49030039b04b43173a7e72e8abcbe5a2c373d Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 11 Sep 2023 18:51:03 +0300 Subject: [PATCH] docs: added ecommerce recipe (#5017) * docs: added ecommerce recipe * fix eslint errors --- www/docs/content/recipes/b2b.mdx | 2 +- www/docs/content/recipes/ecommerce.mdx | 129 +++++++++++++++++++++ www/docs/content/recipes/oms.mdx | 7 +- www/docs/content/recipes/subscriptions.mdx | 6 + www/docs/sidebars.js | 11 +- www/docs/src/theme/Details/index.tsx | 4 +- www/docs/src/theme/DocCardList/index.tsx | 5 +- 7 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 www/docs/content/recipes/ecommerce.mdx diff --git a/www/docs/content/recipes/b2b.mdx b/www/docs/content/recipes/b2b.mdx index 8e4b1421a6..e2b9901bb2 100644 --- a/www/docs/content/recipes/b2b.mdx +++ b/www/docs/content/recipes/b2b.mdx @@ -7,7 +7,7 @@ import DocCard from '@theme/DocCard'; import Icons from '@theme/Icon'; import LearningPath from '@site/src/components/LearningPath'; -# B2B / Wholesale Recipe +# B2B Recipe This document guides you through the different documentation resources that will help you build a B2B store with Medusa. diff --git a/www/docs/content/recipes/ecommerce.mdx b/www/docs/content/recipes/ecommerce.mdx new file mode 100644 index 0000000000..71711c85f0 --- /dev/null +++ b/www/docs/content/recipes/ecommerce.mdx @@ -0,0 +1,129 @@ +--- +addHowToData: true +--- + +import DocCardList from '@theme/DocCardList'; +import DocCard from '@theme/DocCard'; +import Icons from '@theme/Icon'; + +# Ecommerce Recipe + +This document guides you through building an ecommerce store with Medusa and start selling. + +## Overview + +Businesses use an ecommerce store to allow customers to browse their products and make purchases. It also includes accepting payments, managing orders, and more. + +Medusa provides all essential commerce features out-of-the-box. Businesses can go live and start selling without making any adjustments. They can also power-up their store with plugins for payment, fulfillment, and more. + +:::tip + +Recommended read: [How Tekla created an ecommerce store using Medusa](https://medusajs.com/blog/tekla-agilo-pos-case/). + +::: + + + +--- + +## Create a Next.js Starter Storefront + +The Medusa backend can be used with any storefront. All you have to do is connect to its Store APIs to utilize the backend's commerce features. + +You can install, use, and customize the Next.js starter storefront to benefit from all the necessary ecommerce features. Alternatively, you can build your own storefront. + + + +--- + +## (Optional) Install Plugins + +Medusa provides official plugins that you can use for payment, fulfillment, search, and more. These plugins can provide additional functionalities for both your backend and your storefront. + +For example, if you want to accept payment with Stripe, you can install the [Stripe plugin](../plugins/payment/stripe.mdx). + + + +--- + +## Deploy the Backend + +The first step to go live is to deploy the Medusa backend. The deployment guides available in our documentation provide extensive step-by-step guide for different hosting providers, as well as a general deployment guide that you can follow to deploy your backend to other providers. + + + +--- + +## Deploy the Storefront + +You can now deploy your storefront. The instructions defer whether you're using the Next.js storefront, a custom storefront, or other forms of storefronts such as a mobile app. + + + +--- + +## Explore Features and Development Resources + +Our documentation includes guides related to Medusa's features and how to customize your store. You can learn about how to add new features to your storefront and backend, how to customize existing features, or how to use the Medusa admin to perform different ecommerce functionalities. + + diff --git a/www/docs/content/recipes/oms.mdx b/www/docs/content/recipes/oms.mdx index 04838acd39..058c0f9ba8 100644 --- a/www/docs/content/recipes/oms.mdx +++ b/www/docs/content/recipes/oms.mdx @@ -3,7 +3,6 @@ addHowToData: true --- import DocCardList from '@theme/DocCardList'; -import DocCard from '@theme/DocCard'; import Icons from '@theme/Icon'; # Order Management System (OMS) @@ -16,6 +15,12 @@ An order management system (OMS) is a system that provides features to track and Medusa can be used within a larger ecosystem as an OMS. Its modular architecture and commerce features make it easy for developers to integrate it with other services while utilizing powerful OMS features, including returns, exchanges, and order edits. +:::tip + +Recommended read: [How Siam Makro used Medusa an OMS](https://medusajs.com/blog/makro-omnichannel-order-orchestration/). + +::: + --- ## Source Orders into Medusa diff --git a/www/docs/content/recipes/subscriptions.mdx b/www/docs/content/recipes/subscriptions.mdx index a5261abe5c..d01e1e9158 100644 --- a/www/docs/content/recipes/subscriptions.mdx +++ b/www/docs/content/recipes/subscriptions.mdx @@ -13,6 +13,12 @@ Subscription-based purchase allows customers to purchase products for a specifie For example, a customer can purchase a book subscription box for a period of three months. Each month, the payment will be captured for that order and, if the payment is successful, the fulfillment will be processed. +:::tip + +Recommended read: [How Goodchef built subscription-based purchases with Medusa](https://medusajs.com/blog/goodchef-webbers-powering-subscriptions-with-medusas-commerce-modules/). + +::: + --- diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index 5bbb2aed42..38e06dc77d 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -47,6 +47,15 @@ module.exports = { }, className: "homepage-sidebar-item", items: [ + { + type: "doc", + id: "recipes/ecommerce", + label: "Ecommerce", + customProps: { + iconName: "shopping-cart", + excludeFromDocList: true, + }, + }, { type: "doc", id: "recipes/marketplace", @@ -106,7 +115,7 @@ module.exports = { { type: "doc", id: "recipes/b2b", - label: "B2B / Wholesale", + label: "B2B", customProps: { iconName: "building-solid", }, diff --git a/www/docs/src/theme/Details/index.tsx b/www/docs/src/theme/Details/index.tsx index 885d8d8c16..d93e0cc77a 100644 --- a/www/docs/src/theme/Details/index.tsx +++ b/www/docs/src/theme/Details/index.tsx @@ -49,8 +49,8 @@ export default function Details({ event.stopPropagation() }} className={clsx( - "border-medusa-border-base dark:border-medusa-border-base-dark border-y border-solid border-x-0", - "overflow-hidden [&>summary]:relative [&>summary]:z-[400]", + "border-x-0 border-y border-solid border-medusa-border-base dark:border-medusa-border-base-dark", + "overflow-hidden [&>summary]:relative [&>summary]:z-[398]", props.className )} > diff --git a/www/docs/src/theme/DocCardList/index.tsx b/www/docs/src/theme/DocCardList/index.tsx index 1e01536aaa..795a45b984 100644 --- a/www/docs/src/theme/DocCardList/index.tsx +++ b/www/docs/src/theme/DocCardList/index.tsx @@ -21,7 +21,10 @@ export default function DocCardList(props: ModifiedProps): JSX.Element { if (!items) { return } - const filteredItems = filterDocCardListItems(items) + const filteredItems = filterDocCardListItems(items).filter( + (item) => !item.customProps.excludeFromDocList + ) + return (