asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: editing and general fixes of medusa's learning resources (#7261)

Browse Source 
* docs: editing and general fixes of medusa's learning resources

* fix build script

* update ui dependency

* fix build

* adjust next.js steps
This commit is contained in:
Shahed Nasser
2024-05-13 18:55:11 +03:00
committed by GitHub
parent 803e4aad02
commit 7cb90f8e82
79 changed files with 488 additions and 1707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/resources/app/recipes/pos/page.mdx
-232
View File
@@ -1,232 +0,0 @@
import { AcademicCapSolid } from "@medusajs/icons"
import { LearningPath } from "docs-ui"
export const metadata = {
title: `Point-of-Sale (POS) Recipe`,
}
# {metadata.title}
In this recipe, you'll find resources to guide you in using Medusa as an Point-of-Sale (POS).
## Overview
Building a POS system on top of an ecommerce engine introduces challenges related to the tech stack used, data sync across channels, and feature availability relevant to offline sales in a POS, not just online sales.
Medusa's modular architecture solves these challenges. Any frontend can utilize Medusa's commerce features, such as sales channels or multi-warehouse features, through its REST APIs.
<Note title="Related use-case">
[How Tekla built a POS system with Medusa](https://medusajs.com/blog/tekla-agilo-pos-case/).
</Note>
---
## Freedom in Choosing Your POS Tech Stack
When you build a POS system, you must choose which programming framework, language, or tool you want to use.
Medusa's modular architecture removes any restrictions you may have while making this choice. Any client or front end can connect to the Medusa application using its headless REST APIs.
![POS Tech Stack](https://res.cloudinary.com/dza7lstvk/image/upload/v1709034282/Medusa%20Book/pos-scan-barcode_a8j8ew.jpg)
<CardList items={[
{
href: "#",
title: "Medusa’s Architecture",
text: "Learn about Medusa's architecture and its ecosystem.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "https://docs.medusajs.com/api/admin",
title: "Admin REST APIs",
text: "Check out available Admin REST APIs in Medusa.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "#",
title: "JavaScript Client",
text: "Learn about the JavaScript client and to use it.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
}
]} />
---
## Integrate a Barcode Scanner
POS systems make the checkout process smoother by integrating a barcode scanner. Merchants can scan a product by its barcode to check its details or add it to the customer's purchase.
Medusa’s `ProductVariant` data model includes the necessary attributes to implement this integration, mainly the `barcode` attribute. Other notable attributes include `ean`, `upc`, and `hs_code`, among others.
To search through product variants by their barcode, create a custom API Route and call it within your POS.
![Example flow of integrating a barcode scanner](https://res.cloudinary.com/dza7lstvk/image/upload/v1709034282/Medusa%20Book/pos-scan-barcode_a8j8ew.jpg)
<CardList itemsPerRow={2} items={[
{
href: "#",
title: "Product Module",
text: "Learn about the Product Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "https://docs.medusajs.com/api/admin",
title: "Create API Route",
text: "Learn how to create an API Route.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
]} />
<Details summaryContent="Example: Search Products By Barcode API Route">
Here’s an example of creating a custom API Route at `/store/pos/search-barcode` that searches product variants by a barcode:
```ts title="src/api/store/pos/search-barcode/route.ts"
import type {
MedusaRequest,
MedusaResponse,
ProductVariantService,
} from "@medusajs/medusa"
import { MedusaError } from "@medusajs/utils"
export const GET = async (
req: MedusaRequest,
res: MedusaResponse
) => {
const barcode = (req.query.barcode as string) || ""
if (!barcode) {
throw new MedusaError(
MedusaError.Types.INVALID_DATA,
"Barcode is required"
)
}
// get product service
const productVariantService = req.scope.resolve<
ProductVariantService
>("productVariantService")
// retrieve product variants by barcode
const productVariants = await productVariantService
.list({
barcode,
})
res.json({
product_variants: productVariants,
})
}
```
</Details>
---
## Access Accurate Inventory Details
As you manage an online and offline store, it's essential to separate inventory quantity across different locations.
Medusa's Inventory, Stock Location, and Sales Channel modules allow merchants to manage the inventory items and their availability across locations and sales channels.
![Using Multi-warehouse features with POS](https://res.cloudinary.com/dza7lstvk/image/upload/v1709034731/Medusa%20Book/pos-multiwarehouse_r1z48x.jpg)
Merchants can create a sales channel for their online store and a sales channel for their POS system, then manage the inventory quantity of product variants in each channel.
This also opens the door for other business opportunities, such as an endless aisle experience. Suppose a product isn't available in-store but is available in different warehouses. You can allow customers to purchase that item in-store and deliver it to their address.
<CardList items={[
{
href: "#",
title: "Inventory Module",
text: "Learn about the Inventory Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "#",
title: "Stock Location Module",
text: "Learn about the Stock Location Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "#",
title: "Sales Channel Module",
text: "Learn about the Sales Channel Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
]} />
---
## Build an Omni-channel Customer Experience
Using Medusa's Customer Module, you can retrieve a customer's details from the Medusa application and place an order on the POS under their account. The customer can then view their order details on their online profile as if they had placed the order online.
In addition, using Medusa's Discount Module, store operators can create discounts on the fly for customers using the POS system and apply them to their orders.
You can also extend Medusa to provide features for a better customer experience, such as a rewards system or loyalty points.
<CardList itemsPerRow={2} items={[
{
href: "#",
title: "Customer Module",
text: "Learn about the Customer Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "#",
title: "Discount Module",
text: "Learn about the Discount Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
]} />
---
## Accept Payment, Place Order, and Use RMA Features
Medusa's architecture allows you to integrate any third-party payment processor for your POS and online storefront. For example, you can integrate [Stripe Terminal](https://stripe.com/terminal) to accept in-store payments.
Once you accept the payment, place an order in the POS system using the [Draft Order APIs](https://docs.medusajs.com/api/admin#draft-orders). Draft orders provide similar features to an online checkout experience, including discounts, payment processing, and more.
Then, merchants can view all orders coming from different sales channels using the Medusa Admin. This keeps logistics and order handling consistent and allows businesses to provide return and exchange features to online and in-store customers.
<CardList items={[
{
href: "#",
title: "Create a Payment Processor",
text: "Learn how to create a payment processor.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "#",
title: "Draft Order Module",
text: "Learn about the Draft Order module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
{
href: "#",
title: "Order Module",
text: "Learn about the Order Module.",
startIcon: <AcademicCapSolid />,
showLinkIcon: false
},
]} />
---
## Additional Development
Refer to other guides in the Medusa Resources or the Medusa Book for additional guidance during your development.