chore: merge docs from master to develop (#3650)
* Fix issue on fixed total amount discount when using includes tax (#3472) The calculation of the fixed discount amount breaks when having includes_tax setting active, due to the line item totals are incorrect and returning everything as 0, thus the totalItemPercentage will be Infinitiy due to the division by a subtotal of 0 * chore: Add missing changeset for @medusajs/medusa * feat(medusa): Improve performance of Products domain (#3417) * feat(medusa): Improve product update performances * fix tests and update * update mock repo * improve repo * cleanup * fix * cleanup + bulk emit + unit test fix * improvements * improve * fix unit tests * fix export * fix product update handler * enhance mock repo * fix import integration * fix end point tests * revert mock repo product variant * fix unit * cleanup * cleanup * address feedback * fix quotes in tests * address feedback * Create new-tips-mate.md * use types * chore: Remove integration-tests from changeset * chore(release): v1.7.14 * chore(docs): Generated Docs Announcement Bar (automated) (#3489) Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> * fix(medusa): EventBusService.emit using Redis mock (#3491) * Fix eventBusService.emit using redis mock * revert gitignore * enqueuer * unit test add redis_url * fix test * chore(docs): Generated Services Reference (automated) (#3490) Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> * docs: publish restructure (#3496) * docs: added features and guides overview page * added image * added version 2 * added version 3 * added version 4 * docs: implemented new color scheme * docs: redesigned sidebar (#3193) * docs: redesigned navbar for restructure (#3199) * docs: redesigned footer (#3209) * docs: redesigned cards (#3230) * docs: redesigned admonitions (#3231) * docs: redesign announcement bar (#3236) * docs: redesigned large cards (#3239) * docs: redesigned code blocks (#3253) * docs: redesigned search modal and page (#3264) * docs: redesigned doc footer (#3268) * docs: added new sidebars + refactored css and assets (#3279) * docs: redesigned api reference sidebar * docs: refactored css * docs: added code tabs transition * docs: added new sidebars * removed unused assets * remove unusued assets * Fix deploy errors * fix incorrect link * docs: fixed code responsivity + missing icons (#3283) * docs: changed icons (#3296) * docs: design fixes to the sidebar (#3297) * redesign fixes * docs: small design fixes * docs: several design fixes after restructure (#3299) * docs: bordered icon fixes * docs: desgin fixes * fixes to code blocks and sidebar scroll * design adjustments * docs: restructured homepage (#3305) * docs: restructured homepage * design fixes * fixed core concepts icon * docs: added core concepts page (#3318) * docs: restructured homepage * design fixes * docs: added core concepts page * changed text of different components * docs: added architecture link * added missing prop for user guide * docs: added regions overview page (#3327) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page (#3331) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page * fix link * resolve link issues * docs: updated regions architecture image * docs: second-iteration fixes (#3347) * docs: redesigned document * design fixes * docs: added products overview page (#3354) * docs: added carts overview page (#3363) * docs: added orders overview (#3364) * docs: added orders overview * added links in overview * docs: added vercel redirects * docs: added soon badge for cards (#3389) * docs: resolved feedback changes + organized troubleshooting pages (#3409) * docs: resolved feedback changes * added extra line * docs: changed icons for restructure (#3421) * docs: added taxes overview page (#3422) * docs: added taxes overview page * docs: fix sidebar label * added link to taxes overview page * fixed link * docs: fixed sidebar scroll (#3429) * docs: added discounts overview (#3432) * docs: added discounts overview * fixed links * docs: added gift cards overview (#3433) * docs: added price lists overview page (#3440) * docs: added price lists overview page * fixed links * docs: added sales channels overview page (#3441) * docs: added sales overview page * fixed links * docs: added users overview (#3443) * docs: fixed sidebar border height (#3444) * docs: fixed sidebar border height * fixed svg markup * docs: added possible solutions to feedback component (#3449) * docs: added several overview pages + restructured files (#3463) * docs: added several overview pages * fixed links * docs: added feature flags + PAK overview pages (#3464) * docs: added feature flags + PAK overview pages * fixed links * fix link * fix link * fixed links colors * docs: added strategies overview page (#3468) * docs: automated upgrade guide (#3470) * docs: automated upgrade guide * fixed vercel redirect * docs: restructured files in docs codebase (#3475) * docs: restructured files * docs: fixed eslint exception * docs: finished restructure loose-ends (#3493) * fixed uses of backend * docs: finished loose ends * eslint fixes * fixed links * merged master * added update instructions for v1.7.12 * docs: fixed discount details (#3499) * docs: fix trailing slash causing 404 (#3508) * docs: fix error during navigation (#3509) * docs: removed the gatsby storefront guide (#3527) * docs: removed the gatsby storefront guide * docs: fixed query value * chore(docs): Removed Docs Announcement Bar (automated) (#3536) Co-authored-by: shahednasser <shahednasser@users.noreply.github.com> * fix(medusa): Variant update should include the id for the listeners to be able to identify the entity (#3539) * fix(medusa): Variant update should include the id for the listeners to be able to identify the entity * fix unit tests * Create brave-seahorses-film.md * docs: fix admin redirects (#3548) * chore(release): v1.7.15 * chore(docs): Generated Docs Announcement Bar (automated) (#3550) Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> * chore(docs): Generated Services Reference (automated) (#3551) Automated changes by [create-pull-request](https://github.com/peter-evans/create-pull-request) GitHub action Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> * chore: updated READMEs of plugins (#3546) * chore: updated READMEs of plugins * added notice to plugins * docs: added a deploy guide for next.js storefront (#3558) * docs: added a deploy next.js guide * docs: fix image zoom * docs: fixes to next.js deployment guide to vercel (#3562) * chore(workflows): Enable manual workflow in pre-release mode (#3566) * chore(docs): Removed Docs Announcement Bar (automated) (#3598) Co-authored-by: shahednasser <shahednasser@users.noreply.github.com> * fix(medusa): Rounding issues on line item adjustments (#3446) * chores(medusa): Attempt to fix discount rounding issues * add migration * update entities * apply multipler factor properly * fix discount service * WIP * fix rounding issues in discounts * fix some tests * Exclude raw_discount_total from responses * fix adjustments * cleanup response * fix * fix draft order integration * fix order integration * fix order integration * address feedback * fix test * Create .changeset/polite-llamas-sit.md * remove comment --------- Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> * chore(workflows): Add release notification (#3629) --------- Co-authored-by: pepijn-vanvlaanderen <pepijn@webbers.com> Co-authored-by: olivermrbl <oliver@mrbltech.com> Co-authored-by: Adrien de Peretti <adrien.deperetti@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com> Co-authored-by: shahednasser <shahednasser@users.noreply.github.com> Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
This commit is contained in:
Shahed Nasser
co-authored by
olivermrbl
shahednasser
Oliver Windall Juhl
pepijn-vanvlaanderen
olivermrbl
Adrien de Peretti
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Carlos R. L. Rodrigues
olivermrbl
shahednasser
Oliver Windall Juhl
pepijn-vanvlaanderen
olivermrbl
Adrien de Peretti
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Carlos R. L. Rodrigues
parent
e6b5859af2
commit
6f1b49af03
@@ -1,151 +0,0 @@
|
||||
---
|
||||
description: 'Learn how to install the Gatsby starter storefront to use with the Medusa Server. The Gatsby storefront includes features related to customer profiles, order returns and exchanges, and more.'
|
||||
---
|
||||
|
||||
import Feedback from '@site/src/components/Feedback';
|
||||
|
||||
# Gatsby Storefront Quickstart
|
||||
|
||||
This document guides you to install and set up the Gatsby Storefront for your Medusa Server.
|
||||
|
||||
|
||||
|
||||
## Instant Deployment to Netlify
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Gatsby Storefront, you can deploy the Gatsby Storefront to Netlify with this button:
|
||||
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This document assumes you already have a Medusa server installed. If you don’t, please follow the [Quickstart guide for the Medusa server](../quickstart/quick-start.mdx) to learn how to do it.
|
||||
|
||||
You should also have the Gatsby CLI installed:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install gatsby-cli -g
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
:::tip
|
||||
|
||||
It is recommended to use [Yarn](https://yarnpkg.com/getting-started/install) for the installation process as it's much faster than using NPM.
|
||||
|
||||
:::
|
||||
|
||||
1\. Create a new Gatsby project using the [Medusa starter template](https://github.com/medusajs/gatsby-starter-medusa):
|
||||
|
||||
```bash
|
||||
gatsby new my-medusa-storefront https://github.com/medusajs/gatsby-starter-medusa
|
||||
```
|
||||
|
||||
2\. Change to the newly created directory `my-medusa-storefront` and rename the template environment variable file to use environment variables in development:
|
||||
|
||||
```bash
|
||||
cd my-medusa-storefront
|
||||
mv .env.template .env.development
|
||||
```
|
||||
|
||||
3\. Make sure the Medusa server is running, then run the local Gatsby server:
|
||||
|
||||
```bash npm2yarn
|
||||
npm run start
|
||||
```
|
||||
|
||||
Your Gatsby storefront is now running at `localhost:8000`!
|
||||
|
||||
<Feedback
|
||||
event="survey_gatsby_quickstart"
|
||||
question="Did you set up the storefront successfully?"
|
||||
positiveQuestion="Is there anything that should improved?"
|
||||
negativeQuestion="Please describe the issue you faced."
|
||||
/>
|
||||
|
||||
:::tip
|
||||
|
||||
If you run into errors during the installation, check out [this troubleshooting guide](../troubleshooting/common-installation-errors.mdx).
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Development Notes
|
||||
|
||||
### Customization
|
||||
|
||||
To customize the components, pages, and UI of your Gatsby storefront, just edit files under the `src` directory.
|
||||
|
||||
### Data Refresh
|
||||
|
||||
The Gatsby storefront uses the [gatsby-source-medusa](https://github.com/medusajs/medusa/tree/master/packages/gatsby-source-medusa) plugin to source data from your Medusa server. This data includes products, collections, and regions, and as a result, you can query this data in the storefront starter using GraphQL queries. You can also explore the data in your store on `localhost:8000/___graphql`.
|
||||
|
||||
Because of this, you must rebuild the site every time you update any of this data for it to be reflected in your storefront. The Medusa team will soon be releasing a new version of the plugin which adds incremental builds, which will improve build times.
|
||||
|
||||
### Change Port
|
||||
|
||||
By default, the Gatsby storefront runs on port `8000`.
|
||||
|
||||
To change the port, change the `develop` command in `package.json` to the following:
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
//other scripts
|
||||
"develop": "gatsby develop --port=<PORT>"
|
||||
}
|
||||
```
|
||||
|
||||
Make sure to replace `<PORT>` with the port number you want the storefront to run on. For example, `3000`.
|
||||
|
||||
Then, on your server, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
|
||||
```bash
|
||||
STORE_CORS=http://localhost:<PORT>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
For more details about the Store Cross-Origin Resource Sharing (CORS) configuration, check out the [Configure your Server documentation](../usage/configurations.md#storefront-cors).
|
||||
|
||||
:::
|
||||
|
||||
### Development Resources
|
||||
|
||||
If you’re not familiar with Gatsby, you can learn more about it through the following resources:
|
||||
|
||||
- [Documentation](https://www.gatsbyjs.com/docs)
|
||||
- [Plugin Library](https://www.gatsbyjs.com/plugins/)
|
||||
- [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/)
|
||||
|
||||
---
|
||||
|
||||
## Storefront Features
|
||||
|
||||
The Gatsby storefront comes with a lot of features out of the box including:
|
||||
|
||||
- View all products and manage your cart.
|
||||
|
||||
|
||||
- Customer authentication.
|
||||
|
||||
|
||||
- Full checkout workflow.
|
||||
|
||||
|
||||
- Request swaps and returns using a customer’s order ID and Email.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [Storefront API reference](https://docs.medusajs.com/api/store)
|
||||
- [Deploy the Gatsby storefront on Netlify](../deployments/storefront/deploying-gatsby-on-netlify.md)
|
||||
- [Install Stripe as a payment provider](../add-plugins/stripe.md#add-to-gatsby-storefront)
|
||||
@@ -3,10 +3,27 @@ description: 'Learn how to install the Next.js starter storefront to use with Me
|
||||
---
|
||||
|
||||
import Feedback from '@site/src/components/Feedback';
|
||||
import QueryNote from '@site/src/components/QueryNote';
|
||||
|
||||
# Next.js Storefront Quickstart
|
||||
|
||||
This document guides you to install and set up the Next.js Storefront for your Medusa Server.
|
||||
This document guides you to install and set up the Next.js Starter Storefront.
|
||||
|
||||
<!-- vale docs.We = NO -->
|
||||
|
||||
<QueryNote
|
||||
query={{
|
||||
key: 'ref',
|
||||
value: 'gatsby-medusa-starter'
|
||||
}}
|
||||
admonition={{
|
||||
type: 'note'
|
||||
}}
|
||||
>
|
||||
We've deprecated the Gatsby starter storefront and instead recommend using the Next.js storefront or building your own custom storefront.
|
||||
</QueryNote>
|
||||
|
||||
<!-- vale docs.We = YES -->
|
||||
|
||||
|
||||
|
||||
@@ -14,15 +31,15 @@ This document guides you to install and set up the Next.js Storefront for your M
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Next.js Storefront, you can deploy the Next.js Storefront to Netlify with this button:
|
||||
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/nextjs-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/nextjs-starter-medusa" className="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" className="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This document assumes you already have a Medusa server installed. If you don’t, please follow the [Quickstart guide for the Medusa server](../quickstart/quick-start.mdx) to learn how to do it.
|
||||
This document assumes you already have a Medusa backend installed. If you don’t, please follow the [Quickstart guide for the Medusa backend](../development/backend/install.mdx) to learn how to do it.
|
||||
|
||||
---
|
||||
|
||||
@@ -47,7 +64,7 @@ cd my-medusa-storefront
|
||||
mv .env.template .env.local
|
||||
```
|
||||
|
||||
3\. Make sure the Medusa server is running, then run the local Next.js server:
|
||||
3\. Make sure the Medusa backend is running, then run the local Next.js server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
@@ -86,11 +103,11 @@ To enable or disable the search engine, change the value of the feature in `stor
|
||||
}
|
||||
```
|
||||
|
||||
Then, restart your Next.js server. Depending on whether you enabled or disabled the search engine, the search bar will appear or disappear in the navigation bar accordingly.
|
||||
Then, restart your Next.js backend. Depending on whether you enabled or disabled the search engine, the search bar will appear or disappear in the navigation bar accordingly.
|
||||
|
||||
### MeiliSearch Integration
|
||||
|
||||
If you have the search engine feature enabled, it is expected that you have installed the MeiliSearch plugin on your Medusa server. If not, [follow this guide to install it](../add-plugins/meilisearch.md).
|
||||
If you have the search engine feature enabled, it is expected that you have installed the MeiliSearch plugin on your Medusa backend. If not, [follow this guide to install it](../plugins/search/meilisearch.md).
|
||||
|
||||
In your Next.js storefront, set the environment variables necessary for the MeiliSearch integration:
|
||||
|
||||
@@ -121,11 +138,11 @@ curl \
|
||||
|
||||
Make sure to replace `<MEILISEARCH_URL>` with the URL MeiliSearch is running on and `<MEILISEARCH_MASTER_KEY>` with your MeiliSearch [master key](https://docs.meilisearch.com/learn/security/master_api_keys.html#protecting-a-meilisearch-instance).
|
||||
|
||||
Then, restart the Next.js server. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
Then, restart the Next.js backend. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
|
||||
:::note
|
||||
|
||||
To make sure the Next.js storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa server at least the fields `title`, `handle`, `description`, and `thumbnail`.
|
||||
To make sure the Next.js storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa backend at least the fields `title`, `handle`, `description`, and `thumbnail`.
|
||||
|
||||
:::
|
||||
|
||||
@@ -133,7 +150,7 @@ To make sure the Next.js storefront properly displays the products in the search
|
||||
|
||||
### Algolia Integration
|
||||
|
||||
Instead of using the default MeiliSearch search engine, you can switch to using Algolia. Make sure you start by installing the Algolia plugin on your Medusa server. You can do it by [following this guide](../add-plugins/algolia.md).
|
||||
Instead of using the default MeiliSearch search engine, you can switch to using Algolia. Make sure you start by installing the Algolia plugin on your Medusa backend. You can do it by [following this guide](../plugins/search/algolia.md).
|
||||
|
||||
In your Next.js storefront, set the environment variables necessary for the Algolia integration:
|
||||
|
||||
@@ -162,13 +179,13 @@ export const SEARCH_INDEX_NAME =
|
||||
process.env.NEXT_PUBLIC_INDEX_NAME || "products"
|
||||
```
|
||||
|
||||
Then, restart the Next.js server. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
Then, restart the Next.js backend. You’ll be able to search through available products by clicking the search icon in the navigation bar.
|
||||
|
||||
|
||||
|
||||
### Stripe Payment Integration
|
||||
|
||||
Stripe integration is supported by default. Make sure you have Stripe installed and enabled on your Medusa server first. You can [follow this guide to learn how to install it](../add-plugins/stripe.md).
|
||||
Stripe integration is supported by default. Make sure you have Stripe installed and enabled on your Medusa backend first. You can [follow this guide to learn how to install it](../plugins/payment/stripe.md).
|
||||
|
||||
Then, in your Next.js storefront, set the environment variable necessary for the Stripe integration:
|
||||
|
||||
@@ -178,13 +195,13 @@ NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
|
||||
|
||||
Make sure to replace `<YOUR_PUBLISHABLE_KEY>` with your Stripe publishable key. It can be retrieved from your [Stripe dashboard](https://dashboard.stripe.com/) by going to Developers → API Keys.
|
||||
|
||||
If you restart your Next.js server you should be able to pay with Stripe on checkout.
|
||||
If you restart your Next.js backend you should be able to pay with Stripe on checkout.
|
||||
|
||||
|
||||
|
||||
### PayPal Payment Integration
|
||||
|
||||
PayPal integration is supported by default. Make sure you have PayPal installed and enabled on your Medusa server first. You can [follow this guide to learn how to install it](../add-plugins/paypal.md).
|
||||
PayPal integration is supported by default. Make sure you have PayPal installed and enabled on your Medusa backend first. You can [follow this guide to learn how to install it](../plugins/payment/paypal.md).
|
||||
|
||||
Then, in your Next.js storefront, set the environment variable necessary for the PayPal integration:
|
||||
|
||||
@@ -194,7 +211,7 @@ NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
|
||||
|
||||
Make sure to replace `<YOUR_CLIENT_ID>` with your PayPal client ID. You can retrieve it from the [PayPal developer dashboard](https://developer.paypal.com/developer/applications/).
|
||||
|
||||
If you restart your Next.js server you should be able to pay with PayPal on checkout.
|
||||
If you restart your Next.js backend you should be able to pay with PayPal on checkout.
|
||||
|
||||
|
||||
|
||||
@@ -221,7 +238,7 @@ To change the port, change the `develop` command in `package.json` to the follow
|
||||
|
||||
Make sure to replace `<PORT>` with the port number you want the storefront to run on. For example, `3000`.
|
||||
|
||||
Then, on your server, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
Then, on your backend, update the environment variable `STORE_CORS` to the URL with the new port:
|
||||
|
||||
```bash
|
||||
STORE_CORS=http://localhost:<PORT>
|
||||
@@ -253,4 +270,4 @@ You can learn more about development with Next.js through [their documentation](
|
||||
|
||||
- [Storefront API reference](https://docs.medusajs.com/api/store)
|
||||
- [Install Medusa Admin](../admin/quickstart.mdx).
|
||||
- [Install Stripe as a payment provider](../add-plugins/stripe.md#add-to-nextjs-storefront)
|
||||
- [Install Stripe as a payment provider](../plugins/payment/stripe.md#add-to-nextjs-storefront)
|
||||
|
||||
Reference in New Issue
Block a user