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

docs: Adds new index page and design tweaks (#833)

Browse Source
This commit is contained in:
Oliver Windall Juhl
2021-11-22 17:01:18 +01:00
committed by GitHub
parent f387b4919f
commit 0380cdf0b2
17 changed files with 305 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/guides/carts-in-medusa.md
View File

@@ -1,8 +1,8 @@
---
title: Carts in Medusa
title: Carts
---
# Carts in Medusa
# Carts
In Medusa a Cart serves the purpose of collecting the information needed to create an Order, including what products to purchase, what address to send the products to and which payment method the purchase will be processed by.

2
docs/content/how-to/plugins.md → docs/content/guides/plugins.md
View File

@@ -1,5 +1,5 @@
---
title: Plugins in Medusa
title: Plugins
---
# Plugins

89
docs/content/homepage.mdx Normal file
View File

@@ -0,0 +1,89 @@
---
id: homepage
title: Introduction
description: 'What is Medusa?'
slug: /
hide_table_of_contents: true
---
import useBaseUrl from '@docusaurus/useBaseUrl'
import Link from '@docusaurus/Link'
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
Medusa is an open-source Shopify alternative.
It provides you with the primitives to create amazing digital commerce experiences.
<div class="container" style={{ padding: 0 }}>
<div class="row is-multiline">
<div class="col col--6">
<Link class="card" to="/tutorial/set-up-your-development-environment" style={{ height: '100%' }}>
<div class="card__body">
<h4>Tutorial</h4>
<p>Set up your local development environment</p>
</div>
</Link>
</div>
<div class="col col--6">
<Link class="card" to="/tutorial/adding-custom-functionality" style={{ height: '100%' }}>
<div class="card__body">
<h4>Make it your own</h4>
<p>Create custom endpoints, services, or subscribers.</p>
</div>
</Link>
</div>
<div class="col col--6">
<Link class="card" to="/guides/plugins" style={{ height: '100%' }}>
<div class="card__body">
<h4>Plugins</h4>
<p>Add or build a plugin to make your engine more powerful.</p>
</div>
</Link>
</div>
<div class="col col--6">
<Link class="card" to="/how-to/deploying-on-heroku" style={{ height: '100%' }}>
<div class="card__body">
<h4>Deploy in seconds</h4>
<p>Use one of our guides to deploy your Medusa project in seconds.</p>
</div>
</Link>
</div>
</div>
</div>
## Quickstart
Visit our [Quickstart](https://github.com/medusajs/medusa#-quickstart) to get up and running in minutes with only a couple of commands.
## What you'll find here
<div class="container" style={{ padding: 0 }}>
<div class="row is-multiline">
<div class="col col--4">
<Link class="card" to="/quickstart/quick-start" style={{ height: '100%' }}>
<div class="card__body">
<h4>Quickstart</h4>
<p>A short guide to get you quickly started.</p>
</div>
</Link>
</div>
<div class="col col--4">
<Link class="card" to="/how-to/notification-api" style={{ height: '100%' }}>
<div class="card__body">
<h4>How-to and guides</h4>
<p>Guides and walkthroughs of concepts, tools, deployment and APIs.</p>
</div>
</Link>
</div>
{/* Ref */}
<div class="col col--4">
<a class="card" href="https://docs.medusa-commerce.com/api/store" target="_blank" style={{ height: '100%' }}>
<div class="card__body">
<h4>Reference</h4>
<p>Technical documentation of the Medusa API.</p>
</div>
</a>
</div>
</div>
</div>

46
docs/content/tutorial/2-adding-custom-functionality.md
View File

@@ -19,11 +19,11 @@ The custom functionality will do a number of things:
We will begin our custom implementation by adding a custom service. In you project create a new file at `/src/services/welcome.js`. Open the newly created file and add a class:
```javascript
import { BaseService } from "medusa-interfaces";
import { BaseService } from "medusa-interfaces"
class WelcomeService extends BaseService {
constructor({}) {
super();
super()
}
async registerOptin(cartId, optin) {}
@@ -31,7 +31,7 @@ class WelcomeService extends BaseService {
async sendWelcome(orderId) {}
}
export default WelcomeService;
export default WelcomeService
```
We will be filling out each of the methods in turn, but before we get to that it should be noted that placing files in `/src/services` has a special meaning in Medusa projects. When Medusa starts up it will look for files in this folder and register exports from these files to the global container. The global container holds all services and repositories in your Medusa project allowing for dependency injection. Dependency injection is a software development technique in which objects only receive other objects that it depends upon.
@@ -126,18 +126,18 @@ Similarly to the `/src/services` directory, the `/src/api` directory has a speci
Create a new file at `/src/api/index.js` and add the following controller:
```javascript
import { Router } from "express";
import bodyParser from "body-parser";
import { Router } from "express"
import bodyParser from "body-parser"
export default () => {
const app = Router();
const app = Router()
app.post("/welcome/:cart_id", bodyParser.json(), async (req, res) => {
// TODO
});
})
return app;
};
return app
}
```
### Controller implementation
@@ -146,33 +146,33 @@ Our endpoint controller's implementation will be very simple. It will extract th
```javascript
app.post("/welcome/:cart_id", bodyParser.json(), async (req, res) => {
const { cart_id } = req.params;
const { optin } = req.body;
const { cart_id } = req.params
const { optin } = req.body
// Validate that the optin value was provided.
// If not respond with a Bad Request status
if (typeof optin !== "boolean") {
res.status(400).json({
message: "You must provide an boolean optin value in the request body",
});
return;
})
return
}
const welcomeService = req.scope.resolve("welcomeService");
const welcomeService = req.scope.resolve("welcomeService")
try {
await welcomeService.registerOptin(cart_id, optin);
await welcomeService.registerOptin(cart_id, optin)
res.status(200).json({
success: true,
});
})
} catch (err) {
// This is not supposed to happen.
res.status(500).json({
message: "Something unexpected happened.",
});
})
}
});
})
```
In the implementation above we are first validating that the request body is structured correctly so that we can proceed with our opt-in registration. If the validation fails we respond with 400 Bad Request which is an HTTP code that indicates that the client that sent the request has not provided the correct values.
@@ -223,17 +223,17 @@ The final thing that we will add in this part of the tutorial is the subscriber
```javascript
class WelcomeSubscriber {
constructor({ welcomeService, eventBusService }) {
this.welcomeService_ = welcomeService;
this.welcomeService_ = welcomeService
eventBusService.subscribe("order.placed", this.handleWelcome);
eventBusService.subscribe("order.placed", this.handleWelcome)
}
handleWelcome = async (data) => {
return await this.welcomeService_.sendWelcome(data.id);
};
return await this.welcomeService_.sendWelcome(data.id)
}
}
export default WelcomeSubscriber;
export default WelcomeSubscriber
```
The implementation above is all that is needed to automate the `sendWelcome` function to be called every time a new order is created. The subscriber class here delegates all of the business logic to the `sendWelcome` function, where we are checking for opt-in and first time buyers.