docs: added a Build Your Own Storefront Roadmap (#3834)
* docs: added storefront roadmap * docs: added doc to sidebar * added a link to the product storefront how-to * added missing customer profiles link
This commit is contained in:
Shahed Nasser
GitHub
89
docs/content/storefront/roadmap.md
Normal file
89
docs/content/storefront/roadmap.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
description: 'Learn about the different resources you need and the general steps to take while building your custom storefront that is connected to your Medusa backend.'
|
||||
---
|
||||
|
||||
# Build Your Own Storefront Roadmap
|
||||
|
||||
In this document, you’ll learn about the different resources you need and the general steps to take while building your custom storefront that's connected to your Medusa backend.
|
||||
|
||||
## Overview
|
||||
|
||||
Although Medusa provides a Next.js starter storefront, you have full freedom in how you choose to build your storefront. This includes anything from what framework you choose to what functionalities you choose to include.
|
||||
|
||||
This guide provides a roadmap that can guide you into how you can build your own storefront, regardless of what tools you’re using.
|
||||
|
||||
---
|
||||
|
||||
## Connect to the Backend
|
||||
|
||||
The storefront connects to the backend to retrieve and process data. You can use different tools or libraries when connecting your storefront to the backend.
|
||||
|
||||
- **For React-based storefronts:** you can use [Medusa React](../medusa-react/overview.md). It provides you with the necessary hooks to retrieve or manipulate data on your backend.
|
||||
- **For JavaScript frameworks:** you can use [Medusa’s JavaScript Client](../js-client/overview.md) in any JavaScript framework. This NPM package facilitates interacting with the backend’s REST APIs.
|
||||
- **For other frontend technologies:** you can interact directly with the Medusa backend by sending requests to its [Store REST APIs](/api/store).
|
||||
|
||||
:::tip
|
||||
|
||||
In the store how-to guides that are available throughout the documentation, you’ll see snippets for all of these different options, which aims to facilitate your development.
|
||||
|
||||
:::
|
||||
|
||||
### Setting Cross-Origin Resource Sharing Configuration
|
||||
|
||||
Your Medusa backend uses Cross-Origin Resource Sharing (CORS) to ensure that only the hosts you specify can access your backend’s resources. Make sure to set your Medusa backend’s `store_cors` option to your storefront’s URL, as explained [here](../development/backend/configurations.md#storefront-cors).
|
||||
|
||||
During development, its value would typically be something like `localhost:8000` or any other port you’re using. For production, its value would be the public URL of the storefront. To make the development process easier, you can manage that using environment variables.
|
||||
|
||||
---
|
||||
|
||||
## Implement the Functionalities
|
||||
|
||||
This section will briefly touch upon some of the basic functionalities that are recommended to be implemented in your storefront, with guides that explain how to implement them.
|
||||
|
||||
### Regions Selection
|
||||
|
||||
Regions allow businesses to serve customers globally. On a storefront, the customer should be able to select their region.
|
||||
|
||||
[This guide](../modules/regions-and-currencies/storefront/use-regions.mdx) explains how you can retrieve the regions from the backend and show them in your storefront.
|
||||
|
||||
### Displaying Products
|
||||
|
||||
Customers should be able to browse products in your storefront and view their details.
|
||||
|
||||
[This guide](../modules/products/storefront/show-products.mdx) explains how you can list products in your store and show a single product’s detail.
|
||||
|
||||
### Implement Cart and Checkout
|
||||
|
||||
Customers should be able to add products to cart and go through the checkout flow.
|
||||
|
||||
[This guide](../modules/carts-and-checkout/storefront/implement-cart.mdx) explains how you can implement the cart and checkout functionalities in your storefront.
|
||||
|
||||
### Implement Customer Profiles
|
||||
|
||||
Customers should be able to register, log-in, edit their profile, and view their orders.
|
||||
|
||||
[This guide](../modules/customers/storefront/implement-customer-profiles.mdx) explains how to implement customer profile functionalities in your storefront.
|
||||
|
||||
### More Functionalities
|
||||
|
||||
Medusa’s backend provides much more functionalities, such as allowing customers to request returns, handle order edits, or request swaps. It all depends on what functionalities you want to implement in your storefront.
|
||||
|
||||
You can learn about all the available functionalities either through the [Store API reference](/api/store) or the [Commerce Modules](../modules/overview.mdx) part of the documentation, which holds different Store how-to guides.
|
||||
|
||||
### Integrating Plugins
|
||||
|
||||
Some plugins that you install on your backend require implementing storefront User Interface (UI). For most Medusa’s [official plugins](../plugins/overview.mdx), you can find guidance on how to do that in its designated documentation.
|
||||
|
||||
---
|
||||
|
||||
## Deploy the Storefront
|
||||
|
||||
:::tip
|
||||
|
||||
Make sure to deploy your backend before you deploy your storefront.
|
||||
|
||||
:::
|
||||
|
||||
Once you finish building your storefront, you can deploy it on any hosting. The deployment process depends on your hosting provider of choice.
|
||||
|
||||
The [Vercel Deployment guide for the Next.js storefront starter](../deployments/storefront/deploying-next-on-vercel.md) may provide some guidance in your process.
|
||||
@@ -96,6 +96,15 @@ module.exports = {
|
||||
},
|
||||
className: "homepage-sidebar-item",
|
||||
},
|
||||
{
|
||||
type: "doc",
|
||||
id: "storefront/roadmap",
|
||||
label: "Build a Storefront",
|
||||
customProps: {
|
||||
sidebar_icon: "building-storefront",
|
||||
},
|
||||
className: "homepage-sidebar-item",
|
||||
},
|
||||
{
|
||||
type: "html",
|
||||
value: "SDKs",
|
||||
|
||||
10
www/docs/src/theme/Icon/BuildingStorefront/index.tsx
Normal file
10
www/docs/src/theme/Icon/BuildingStorefront/index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconBuildingStorefront (props) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path d="M11.25 17.5V11.25C11.25 11.0842 11.3159 10.9253 11.4331 10.8081C11.5503 10.6908 11.7093 10.625 11.875 10.625H14.375C14.5408 10.625 14.6997 10.6908 14.817 10.8081C14.9342 10.9253 15 11.0842 15 11.25V17.5M11.25 17.5H1.96668M11.25 17.5H15M15 17.5H18.0333M16.875 17.5V7.79083C17.2072 7.59909 17.4908 7.33349 17.7038 7.01459C17.9169 6.6957 18.0538 6.33205 18.1038 5.95179C18.1538 5.57154 18.1157 5.18487 17.9924 4.82171C17.869 4.45855 17.6638 4.12864 17.3925 3.8575L16.4008 2.86667C16.1667 2.63218 15.8489 2.50029 15.5175 2.5H4.48168C4.15027 2.50029 3.83254 2.63218 3.59835 2.86667L2.60751 3.85667C2.33688 4.12811 2.13219 4.45809 2.00924 4.82114C1.88628 5.1842 1.84834 5.57064 1.89834 5.95068C1.94834 6.33072 2.08495 6.6942 2.29763 7.01309C2.5103 7.33199 2.79337 7.59779 3.12501 7.79M3.12501 17.4992V7.79167C3.62503 8.07999 4.20939 8.18647 4.77897 8.09306C5.34855 7.99965 5.86828 7.71209 6.25001 7.27917C6.48443 7.54537 6.77293 7.75852 7.09626 7.90437C7.41959 8.05023 7.77031 8.12545 8.12501 8.125C8.87168 8.125 9.54168 7.7975 10 7.27833C10.2344 7.54469 10.5228 7.75799 10.8462 7.90399C11.1695 8.05 11.5202 8.12534 11.875 8.125C12.6217 8.125 13.2917 7.7975 13.75 7.27833C14.1319 7.71112 14.6516 7.99852 15.2212 8.09178C15.7908 8.18504 16.3751 8.07842 16.875 7.79M5.62501 14.9992H8.75001C8.91577 14.9992 9.07474 14.9333 9.19195 14.8161C9.30916 14.6989 9.37501 14.5399 9.37501 14.3742V11.25C9.37501 11.0842 9.30916 10.9253 9.19195 10.8081C9.07474 10.6908 8.91577 10.625 8.75001 10.625H5.62501C5.45925 10.625 5.30028 10.6908 5.18307 10.8081C5.06586 10.9253 5.00001 11.0842 5.00001 11.25V14.375C5.00001 14.7208 5.28001 14.9992 5.62501 14.9992Z"
|
||||
stroke="var(--ifm-icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import IconBookOpen from './BookOpen';
|
||||
import IconBug from './Bug';
|
||||
import IconBugAntSolid from './BugAntSolid';
|
||||
import IconBuildingSolid from './BuildingSolid';
|
||||
import IconBuildingStorefront from './BuildingStorefront';
|
||||
import IconBuildingTax from './BuildingTax';
|
||||
import IconCalendar from './Calendar';
|
||||
import IconCashSolid from './CashSolid';
|
||||
@@ -95,6 +96,7 @@ export default {
|
||||
'bug': IconBug,
|
||||
'bug-ant-solid': IconBugAntSolid,
|
||||
'building-solid': IconBuildingSolid,
|
||||
'building-storefront': IconBuildingStorefront,
|
||||
'building-tax': IconBuildingTax,
|
||||
'calendar': IconCalendar,
|
||||
'cash-solid': IconCashSolid,
|
||||
|
||||
Reference in New Issue
Block a user