@graphcommerce/docs 6.0.2-canary.0 → 6.0.2-canary.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/feature-list.md +2 -2
- package/framework/patch-package.md +22 -8
- package/framework/readme.md +28 -61
- package/framework/troubleshooting.md +1 -1
- package/getting-started/create.md +63 -125
- package/getting-started/readme.md +114 -237
- package/getting-started/start-building.md +5 -25
- package/package.json +2 -2
- package/readme.md +131 -55
- /package/{getting-started → framework}/vscode.md +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 6.0.2-canary.2
|
|
4
|
+
|
|
5
|
+
## 6.0.2-canary.1
|
|
6
|
+
|
|
7
|
+
### Patch Changes
|
|
8
|
+
|
|
9
|
+
- [#1862](https://github.com/graphcommerce-org/graphcommerce/pull/1862) [`d590ecedd`](https://github.com/graphcommerce-org/graphcommerce/commit/d590eceddb8cdaab59bfe775247526f7c7eb00b3) - Docs ([@ErwinOtten](https://github.com/ErwinOtten))
|
|
10
|
+
|
|
3
11
|
## 6.0.2-canary.0
|
|
4
12
|
|
|
5
13
|
## 6.0.1
|
package/feature-list.md
CHANGED
|
@@ -123,7 +123,7 @@ Features taken from the Magento Commerce 2 Feature List
|
|
|
123
123
|
|
|
124
124
|
- [x] Create simple, configurable (e.g., choose size, color, etc.), bundled, and
|
|
125
125
|
grouped products.
|
|
126
|
-
- [x] Offer virtual products like memberships, services and warranties.
|
|
126
|
+
- [x] Offer virtual products like memberships, services and warranties.
|
|
127
127
|
- [x] Include downloadable/digital products with samples.
|
|
128
128
|
- [ ] Allow customer-personalized products (e.g., upload images and text for
|
|
129
129
|
monogramming). — [Todo]
|
|
@@ -204,7 +204,7 @@ Features taken from the Magento Commerce 2 Feature List
|
|
|
204
204
|
- [x] Indicate stock availability.
|
|
205
205
|
- [x] Set related products, up-sell, and cross-sell recommendations to increase
|
|
206
206
|
average order value.
|
|
207
|
-
- [
|
|
207
|
+
- [x] Show pricing tiers.
|
|
208
208
|
- [x] Present product ratings and reviews.
|
|
209
209
|
- [x] Provide an option to add products to a wish list.
|
|
210
210
|
- [ ] Add Facebook, Twitter, and email links to share products. — [Todo]
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
# Patch package
|
|
2
2
|
|
|
3
|
-
GraphCommerce relies on
|
|
3
|
+
GraphCommerce relies on
|
|
4
|
+
[patch-package ↗](https://github.com/ds300/patch-package) to make modifications
|
|
5
|
+
to GraphCommerce where there are no ways to modify through props or plugins.
|
|
4
6
|
|
|
5
7
|
`yarn create-patch @graphcommerce/magento-store`
|
|
6
8
|
|
|
7
9
|
## Benefits of patching over copying a file to local
|
|
8
10
|
|
|
9
|
-
- Get told in big red letters when the original file is changed and you need to
|
|
10
|
-
|
|
11
|
+
- Get told in big red letters when the original file is changed and you need to
|
|
12
|
+
check that your fix is still valid.
|
|
13
|
+
- Patches can be reviewed as part of your normal review process, local changes
|
|
14
|
+
will slip though the cracks.
|
|
11
15
|
|
|
12
16
|
## When to make a local copy of a file
|
|
13
17
|
|
|
@@ -15,14 +19,24 @@ GraphCommerce relies on [patch-package ↗](https://github.com/ds300/patch-packa
|
|
|
15
19
|
|
|
16
20
|
## Isn't this dangerous?
|
|
17
21
|
|
|
18
|
-
Nope. The technique is quite robust. Here are some things to keep in mind
|
|
22
|
+
Nope. The technique is quite robust. Here are some things to keep in mind
|
|
23
|
+
though:
|
|
19
24
|
|
|
20
|
-
- It's easy to forget to run yarn or npm when switching between branches that do
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
|
|
25
|
+
- It's easy to forget to run yarn or npm when switching between branches that do
|
|
26
|
+
and don't have patch files.
|
|
27
|
+
- Long lived patches can be costly to maintain if they affect an area of code
|
|
28
|
+
that is updated regularly and you want to update the package regularly too.
|
|
29
|
+
- Big semantic changes can be hard to review. Keep them small and obvious or add
|
|
30
|
+
plenty of comments.
|
|
31
|
+
- Changes can also impact the behaviour of other untouched packages. It's
|
|
32
|
+
normally obvious when this will happen, and often desired, but be careful
|
|
33
|
+
nonetheless.
|
|
24
34
|
|
|
25
35
|
## How to make a patch
|
|
26
36
|
|
|
27
37
|
1. Make your changes to the file in node_modules.
|
|
28
38
|
2. Run `yarn create-patch @graphcommerce/magento-store` to create a patch file.
|
|
39
|
+
|
|
40
|
+
## Continue reading
|
|
41
|
+
|
|
42
|
+
- getting started
|
package/framework/readme.md
CHANGED
|
@@ -2,73 +2,40 @@
|
|
|
2
2
|
menu: Overview
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# GraphCommerce
|
|
5
|
+
# GraphCommerce
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
e-commerce storefronts in React. It includes the structure, components, and
|
|
9
|
-
tooling you need to get started so you can spend your time styling and designing
|
|
10
|
-
high-end e-commerce progressive web apps (PWA).
|
|
7
|
+
## Technology
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
Besides React and Next.js, Graphcommerce uses the following
|
|
10
|
+
technologies/libraries worth exploring.
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
<span></span>
|
|
13
|
+
<span></span>
|
|
14
|
+
<span></span>
|
|
15
|
+
<span></span>
|
|
16
|
+
<span></span>
|
|
17
|
+
<span></span>
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
**Mui Core**
|
|
20
|
+
Google's pre-built component library is utilized to build high-quality, robust
|
|
21
|
+
GraphCommerce components.
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
**Typescript**
|
|
24
|
+
Is used to guard code quality, maintainability, and productivity by catching
|
|
25
|
+
errors during development. With Typescript, setting up
|
|
26
|
+
[VSCode](../framework/vscode.md) correctly enables autocomplete, simplifying the
|
|
27
|
+
exploration of GraphCommerce's codebase.
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
- A set of boilerplate pages, which handle URL routing
|
|
32
|
-
- Basic global styles in theme.ts provided by
|
|
33
|
-
[Mui ↗](https://mui.com/customization/default-theme/)
|
|
34
|
-
- Interface translation files
|
|
29
|
+
**GraphQL**
|
|
30
|
+
A query language for APIs, utilized for fetching and modifying data in Magento.
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
**GraphQL Code Generator**
|
|
33
|
+
Simplifies GraphQL query usage in components by auto-generating types from the
|
|
34
|
+
schema.
|
|
38
35
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
└── Footer.tsx
|
|
42
|
-
└── LayoutFull.tsx
|
|
43
|
-
└── Hygraph
|
|
44
|
-
└── Asset
|
|
45
|
-
└── RowHeroBanner
|
|
46
|
-
└── RowQuote
|
|
47
|
-
└── theme.ts
|
|
48
|
-
└── ...
|
|
49
|
-
├── GraphQL
|
|
50
|
-
└── CategoryPage.graphql
|
|
51
|
-
└── PageLink.graphql
|
|
52
|
-
└── ...
|
|
53
|
-
├── pages
|
|
54
|
-
└── product
|
|
55
|
-
└── [url].jsx
|
|
56
|
-
└── ...
|
|
57
|
-
└── page
|
|
58
|
-
└── [...url].jsx
|
|
59
|
-
└── [...url].tsx
|
|
60
|
-
└── [cart].tsx
|
|
61
|
-
└── _app.tsx
|
|
62
|
-
└── _document.tsx
|
|
63
|
-
└── ...
|
|
64
|
-
├── locales
|
|
65
|
-
└── en.po
|
|
66
|
-
└── nl.po
|
|
67
|
-
└── ...
|
|
68
|
-
```
|
|
36
|
+
**Apollo Client**
|
|
37
|
+
Used for managing data fetching, caching, and state management.
|
|
69
38
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
- Learn about [Static Generation (SSG)](../framework/static-generation.md) in
|
|
74
|
-
GraphCommerce
|
|
39
|
+
**Framer Motion**
|
|
40
|
+
For creating fluid, interactive animations, accounting for browser limitations
|
|
41
|
+
and performance.
|
|
@@ -1,156 +1,94 @@
|
|
|
1
1
|
---
|
|
2
|
-
menu: 1.
|
|
3
|
-
metaTitle:
|
|
2
|
+
menu: 1. Installation
|
|
3
|
+
metaTitle: Getting started with GraphCommerce
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
#
|
|
6
|
+
# Getting started with GraphCommerce
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
In this tutorial, you'll create a GraphCommerce app locally to begin developing
|
|
12
|
-
a full-featured storefront. GraphCommerce is a front-end framework used for
|
|
13
|
-
building headless Magento e-commerce PWA's.
|
|
14
|
-
|
|
15
|
-
### What you'll learn
|
|
16
|
-
|
|
17
|
-
After you've finished this tutorial, you'll have accomplished the following:
|
|
18
|
-
|
|
19
|
-
- Set up your local development environment
|
|
20
|
-
- Generated a new project based on the magento-graphcms example
|
|
21
|
-
|
|
22
|
-
<figure>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<figcaption>GraphCommerce magento-graphcms example category page</figcaption>
|
|
27
|
-
</figure>
|
|
28
|
-
|
|
29
|
-
<figure>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<figcaption>GraphCommerce magento-graphcms example product page</figcaption>
|
|
34
|
-
</figure>
|
|
8
|
+
In this guide, you will set up a GraphCommerce app locally, allowing you to
|
|
9
|
+
start building.
|
|
35
10
|
|
|
36
11
|
### Requirements
|
|
37
12
|
|
|
38
|
-
You've familiarized yourself with
|
|
39
|
-
[React ↗](https://reactjs.org/docs/getting-started.html),
|
|
40
|
-
[Next.js ↗](https://nextjs.org/docs/getting-started), and
|
|
41
|
-
[Mui ↗](https://mui.com/material-ui/getting-started/overview/). GraphCommerce is
|
|
42
|
-
a front-end React framework that uses Next.js for server-side rendering.
|
|
43
|
-
|
|
44
|
-
### Install dependencies
|
|
45
|
-
|
|
46
|
-
If you want to test a GraphCommerce storefront using a pre-configured Magento
|
|
47
|
-
demo store and a pre-configured Hygraph project with demo content, then you need
|
|
48
|
-
to only install the dependencies. This is the quickest approach.
|
|
49
|
-
|
|
50
13
|
- Install and use node 16/18: `nvm install 16` or `nvm use 16`
|
|
51
14
|
- Install yarn: `corepack enable`
|
|
52
15
|
|
|
53
|
-
## Step 1: Create a
|
|
54
|
-
|
|
55
|
-
<figure>
|
|
16
|
+
## Step 1: Create a GraphCommerce app
|
|
56
17
|
|
|
57
|
-
|
|
18
|
+
```bash
|
|
19
|
+
git clone -b main --depth 1 https://github.com/graphcommerce-org/graphcommerce.git
|
|
20
|
+
# Clone repository
|
|
21
|
+
```
|
|
58
22
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
23
|
+
```bash
|
|
24
|
+
mkdir my-project
|
|
25
|
+
# Create project folder
|
|
26
|
+
```
|
|
62
27
|
|
|
63
|
-
|
|
64
|
-
|
|
28
|
+
```bash
|
|
29
|
+
cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce && cd my-project
|
|
30
|
+
# Copy example, delete repo, navigate to project folder
|
|
31
|
+
```
|
|
65
32
|
|
|
66
|
-
|
|
33
|
+
## Step 2: Configure API keys (optional)
|
|
67
34
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
2. `mkdir my-project` — create project folder
|
|
71
|
-
3. `cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce`
|
|
72
|
-
— copy example, delete repo
|
|
73
|
-
4. `cd my-project` — change directory to project folder
|
|
74
|
-
5. `rm CHANGELOG.md` — remove changelog
|
|
35
|
+
Duplicate and rename the configuration example file to:
|
|
36
|
+
`graphcommerce.config.js` and configure the following:
|
|
75
37
|
|
|
76
|
-
|
|
38
|
+
- `magentoEndpoint` [?](../framework/config.md#magentoendpoint-string)
|
|
39
|
+
- `hygraphEndpoint` [?](../framework/config.md#hygraphendpoint-string)
|
|
40
|
+
- `magentoStoreCode` [?](../framework/config.md#magentostorecode-string)
|
|
77
41
|
|
|
78
|
-
>
|
|
79
|
-
>
|
|
80
|
-
>
|
|
81
|
-
>
|
|
82
|
-
>
|
|
42
|
+
> magentoStoreCode
|
|
43
|
+
>
|
|
44
|
+
> - The first storeview in your object is loaded by default, with no added
|
|
45
|
+
> suffix to the URL.
|
|
46
|
+
> - As the user switches to, e.g., the Canadian storeview, the suffix /en-ca is
|
|
47
|
+
> added to the URL.
|
|
48
|
+
> - The locale, e.g., en-ca, is used to load the storeview
|
|
49
|
+
> [translation](../framework/translations.md)
|
|
50
|
+
> - A user is auto-redirected to the relevant storeview when their browser
|
|
51
|
+
> language matches the locale
|
|
52
|
+
> (`Admin > Store > Configuration > General > General > Locale`) of that
|
|
53
|
+
> storeview.
|
|
83
54
|
|
|
84
55
|
### Requirements
|
|
85
56
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
[Clone the demo Hygraph project ↗](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
|
|
92
|
-
as your starting point.
|
|
93
|
-
|
|
94
|
-
### Configuration
|
|
95
|
-
|
|
96
|
-
To connect your GraphCommerce app to your Magento backend and/or Hygraph
|
|
97
|
-
project, you need to update variables in the graphcommerce.config.js file. The
|
|
98
|
-
graphcommerce.config.js file contains useful information about your storefront.
|
|
57
|
+
- Magento version 2.4.3 or higher - Clean install, a production or a development
|
|
58
|
+
environment
|
|
59
|
+
- Hygraph - A project with the required schema.
|
|
60
|
+
[Clone ↗](https://app.hygraph.com/clone/caddaa93cfa9436a9e76ae9c0f34d257?name=GraphCommerce%20Demo)
|
|
61
|
+
the schema as your starting point.
|
|
99
62
|
|
|
100
|
-
|
|
101
|
-
configure the following fields:
|
|
63
|
+
## Step 3: Start the app
|
|
102
64
|
|
|
103
|
-
|
|
104
|
-
|
|
65
|
+
```bash
|
|
66
|
+
yarn
|
|
67
|
+
# Install dependencies (may take a while)
|
|
68
|
+
```
|
|
105
69
|
|
|
106
|
-
|
|
70
|
+
```bash
|
|
71
|
+
yarn codegen
|
|
72
|
+
# Converts all .graphql files to typescript files
|
|
73
|
+
```
|
|
107
74
|
|
|
108
|
-
|
|
75
|
+
```bash
|
|
76
|
+
yarn dev
|
|
77
|
+
# Run the app
|
|
78
|
+
```
|
|
109
79
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
- When the user switches to the Canadian storeview, the suffix /en-ca is added
|
|
113
|
-
to the URL.
|
|
114
|
-
- The first storeview in the object is loaded by default. No suffix is added to
|
|
115
|
-
the URL.
|
|
116
|
-
- The key (en-ca) is used to load the storeview
|
|
117
|
-
[translation](../framework/translations.md)
|
|
118
|
-
- When a users' browser language matches a storeviews' locale
|
|
119
|
-
(`Admin > Store > Configuration > General > General > Locale`), the user is
|
|
120
|
-
automatically redirected to the corresponding storeview.
|
|
121
|
-
|
|
122
|
-
> If you need to fetch a list of available store_codes, run `yarn dev` when you
|
|
123
|
-
> entered your `MAGENTO_ENDPOINT`. The app won't build, but the GraphQL explorer
|
|
124
|
-
> will start at `http://localhost:3000/api/graphql`. Enter the following query:
|
|
125
|
-
>
|
|
126
|
-
> ```graphql {3-4}
|
|
127
|
-
> query {
|
|
128
|
-
> availableStores {
|
|
129
|
-
> store_code
|
|
130
|
-
> store_name
|
|
131
|
-
> }
|
|
132
|
-
> }
|
|
133
|
-
> ```
|
|
134
|
-
|
|
135
|
-
## Step 3: Start the development environment
|
|
80
|
+
---
|
|
136
81
|
|
|
137
|
-
|
|
138
|
-
- `yarn codegen` Converts all .graphql files to typescript files
|
|
139
|
-
- `yarn dev` Run the app
|
|
82
|
+
🎉 Explore your GraphCommerce app running at http://localhost:3000
|
|
140
83
|
|
|
141
|
-
|
|
142
|
-
Visit the GraphQL Playground running at http://localhost:3000/api/graphql
|
|
84
|
+
(Explore the GraphQL Playground running at http://localhost:3000/api/graphql)
|
|
143
85
|
|
|
144
|
-
> No success?
|
|
145
|
-
>
|
|
146
|
-
> [Slack community ↗](https://join.slack.com/t/graphcommerce/shared_invite/zt-11rmgq1ad-F~0daNtKcSvtcC4eQRzjeQ)
|
|
147
|
-
> chat
|
|
86
|
+
> No success? Consult the
|
|
87
|
+
> [troubleshooting guide](../framework/troubleshooting.md)
|
|
148
88
|
|
|
149
89
|
## Next steps
|
|
150
90
|
|
|
151
|
-
-
|
|
152
|
-
|
|
153
|
-
- [Start
|
|
154
|
-
|
|
155
|
-
components, and making changes to GraphQL queries.
|
|
156
|
-
- [Install optional Magento packages](../magento/readme.md)
|
|
91
|
+
- The [Quick start](../getting-started/readme.md) guide covers about 80% of the
|
|
92
|
+
concepts you'll use, so it's a great place to start.
|
|
93
|
+
- [Start customizing](../getting-started/start-building.md) to go from "Hello
|
|
94
|
+
World" to a fully built GraphCommerce custom storefront.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
menu:
|
|
2
|
+
menu: Quick start
|
|
3
3
|
order: create,start-building,header,pages,graphcms-component
|
|
4
4
|
metaTitle:
|
|
5
5
|
Start your Reactjs Ecommerce project with the GraphCommerce React Magento 2
|
|
@@ -10,250 +10,124 @@ metaDescription:
|
|
|
10
10
|
metaUrl: getting-started/getting-started-with-magento-react-ecommerce
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
#
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
located in the /components or /pages directories.
|
|
24
|
-
|
|
25
|
-
- A minimal set of components you would most likely modify for your project
|
|
26
|
-
- The main layout component, which renders header, navigation, and footer
|
|
27
|
-
- A set of boilerplate pages, which handle URL routing
|
|
28
|
-
- Basic global styles in theme.ts provided by
|
|
29
|
-
[Mui ↗](https://mui.com/customization/default-theme/)
|
|
30
|
-
- Interface translation files
|
|
31
|
-
|
|
32
|
-
```txt
|
|
33
|
-
File structure of the graphcommerce-magento example
|
|
34
|
-
|
|
35
|
-
├── components
|
|
36
|
-
└── Layout
|
|
37
|
-
└── Footer.tsx
|
|
38
|
-
└── LayoutFull.tsx
|
|
39
|
-
└── GraphCMS
|
|
40
|
-
└── Asset
|
|
41
|
-
└── RowHeroBanner
|
|
42
|
-
└── RowQuote
|
|
43
|
-
└── theme.ts
|
|
44
|
-
└── ...
|
|
45
|
-
├── graphql
|
|
46
|
-
└── CategoryPage.graphql
|
|
47
|
-
└── PageLink.graphql
|
|
48
|
-
└── ...
|
|
49
|
-
├── pages
|
|
50
|
-
└── product
|
|
51
|
-
└── [url].jsx
|
|
52
|
-
└── ...
|
|
53
|
-
└── page
|
|
54
|
-
└── [...url].jsx
|
|
55
|
-
└── [...url].tsx
|
|
56
|
-
└── [cart].tsx
|
|
57
|
-
└── _app.tsx
|
|
58
|
-
└── _document.tsx
|
|
59
|
-
└── ...
|
|
60
|
-
├── locales
|
|
61
|
-
└── en.po
|
|
62
|
-
└── nl.po
|
|
63
|
-
└── ...
|
|
64
|
-
```
|
|
13
|
+
# Quick start
|
|
14
|
+
|
|
15
|
+
This page will give you an introduction to the 80% of the concepts that you will
|
|
16
|
+
most likely use. We recommended you familiarize yourself with the primary
|
|
17
|
+
technologies used in GraphCommerce: React and Next.js.
|
|
18
|
+
|
|
19
|
+
## Project file structure
|
|
20
|
+
|
|
21
|
+
(Almost) Every file in your project directory is meant for customization. It's
|
|
22
|
+
standard to modify these files for every project.
|
|
65
23
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
`/components` directory. You can directly modify these components and customize
|
|
77
|
-
styles.
|
|
78
|
-
|
|
79
|
-
Others components are imported where needed, and can be recognized by their
|
|
80
|
-
namespace `@graphcommerce/`. There are different ways to
|
|
81
|
-
[customize styles ↗](https://mui.com/customization/how-to-customize/) of
|
|
82
|
-
importend components. The most common way is by adding an sx prop:
|
|
83
|
-
`sx={{color:'red'}}`.
|
|
84
|
-
|
|
85
|
-
If you want to extend a component's behavior or built your own, you can
|
|
86
|
-
duplicate a `@graphcommerce/` component to your /components directory. You'll
|
|
87
|
-
need to update all imports with the new location of your local component. This
|
|
88
|
-
also applies if you want to modify a component's or
|
|
89
|
-
[page's query](../getting-started/start-building.md).
|
|
90
|
-
|
|
91
|
-
### Component overview
|
|
92
|
-
|
|
93
|
-
| Local | | |
|
|
94
|
-
| ----------------- | --------------------------------------------------------------------------- | --------------- |
|
|
95
|
-
| /Asset | [Source](../../../../examples/magento-graphcms/components/GraphCMS/Asset) | [Documentation] |
|
|
96
|
-
| /Blog | [Source](../../../../examples/magento-graphcms/components/Blog) | [Documentation] |
|
|
97
|
-
| /Layout | [Source](../../../../examples/magento-graphcms/components/Layout) | [Documentation] |
|
|
98
|
-
| /ProductListItems | [Source](../../../../examples/magento-graphcms/components/ProductListItems) | [Documentation] |
|
|
99
|
-
| /Usps | [Source](../../../../examples/magento-graphcms/components/Usps) | [Documentation] |
|
|
100
|
-
|
|
101
|
-
| Packages (/node_modules directory/) | |
|
|
102
|
-
| -------------------------------------------- | ---------------------------------------------------------- |
|
|
103
|
-
| @graphcommerce/address-fields-nl | [Source](../../../packages/address-fields-nl/) |
|
|
104
|
-
| @graphcommerce/cli | [Source](../../../packages/cli/) |
|
|
105
|
-
| @graphcommerce/framer-next-pages | [Source](../../../packages/framer-next-pages/) |
|
|
106
|
-
| @graphcommerce/googleanalytics | [Source](../../../packages/googleanalytics/) |
|
|
107
|
-
| @graphcommerce/googlerecaptcha | [Source](../../../packages/googlerecaptcha/) |
|
|
108
|
-
| @graphcommerce/googletagmanager | [Source](../../../packages/googletagmanager/) |
|
|
109
|
-
| @graphcommerce/graphcms-ui | [Source](../../../packages/graphcms-ui/) |
|
|
110
|
-
| @graphcommerce/graphql | [Source](../../../packages/graphql/) |
|
|
111
|
-
| @graphcommerce/graphql-mesh | [Source](../../../packages/graphql-mesh/) |
|
|
112
|
-
| @graphcommerce/image | [Source](../../../packages/image/) |
|
|
113
|
-
| @graphcommerce/lingui-next | [Source](../../../packages/lingui-next/) |
|
|
114
|
-
| @graphcommerce/magento-cart | [Source](../../../packages/magento-cart/) |
|
|
115
|
-
| @graphcommerce/magento-cart-billing-address | [Source](../../../packages/magento-cart-billing-address/) |
|
|
116
|
-
| @graphcommerce/magento-cart-checkout | [Source](../../../packages/magento-cart-checkout/) |
|
|
117
|
-
| @graphcommerce/magento-cart-coupon | [Source](../../../packages/magento-cart-coupon/) |
|
|
118
|
-
| @graphcommerce/magento-cart-email | [Source](../../../packages/magento-cart-email/) |
|
|
119
|
-
| @graphcommerce/magento-cart-items | [Source](../../../packages/magento-cart-items/) |
|
|
120
|
-
| @graphcommerce/magento-cart-payment-method | [Source](../../../packages/magento-cart-payment-method/) |
|
|
121
|
-
| @graphcommerce/magento-cart-shipping-address | [Source](../../../packages/magento-cart-shipping-address/) |
|
|
122
|
-
| @graphcommerce/magento-cart-shipping-method | [Source](../../../packages/magento-cart-shipping-method/) |
|
|
123
|
-
| @graphcommerce/magento-category | [Source](../../../packages/magento-category/) |
|
|
124
|
-
| @graphcommerce/magento-cms | [Source](../../../packages/magento-cms/) |
|
|
125
|
-
| @graphcommerce/magento-customer | [Source](../../../packages/magento-customer/) |
|
|
126
|
-
| @graphcommerce/magento-customer-account | [Source](../../../packages/magento-customer-account/) |
|
|
127
|
-
| @graphcommerce/magento-customer-order | [Source](../../../packages/magento-customer-order/) |
|
|
128
|
-
| @graphcommerce/magento-graphql | [Source](../../../packages/magento-graphql/) |
|
|
129
|
-
| @graphcommerce/magento-newsletter | [Source](../../../packages/magento-newsletter/) |
|
|
130
|
-
| @graphcommerce/magento-payment-included | [Source](../../../packages/magento-payment-included/) |
|
|
131
|
-
| @graphcommerce/magento-product | [Source](../../../packages/magento-product/) |
|
|
132
|
-
| @graphcommerce/magento-product-bundle | [Source](../../../packages/magento-product-bundle/) |
|
|
133
|
-
| @graphcommerce/magento-product-configurable | [Source](../../../packages/magento-product-configurable/) |
|
|
134
|
-
| @graphcommerce/magento-product-downloadable | [Source](../../../packages/magento-product-downloadable/) |
|
|
135
|
-
| @graphcommerce/magento-product-grouped | [Source](../../../packages/magento-product-grouped/) |
|
|
136
|
-
| @graphcommerce/magento-product-simple | [Source](../../../packages/magento-product-simple/) |
|
|
137
|
-
| @graphcommerce/magento-product-virtual | [Source](../../../packages/magento-product-virtual/) |
|
|
138
|
-
| @graphcommerce/magento-review | [Source](../../../packages/magento-review/) |
|
|
139
|
-
| @graphcommerce/magento-search | [Source](../../../packages/magento-search/) |
|
|
140
|
-
| @graphcommerce/magento-store | [Source](../../../packages/magento-store/) |
|
|
141
|
-
| @graphcommerce/browserslist-config-pwa | |
|
|
142
|
-
| @graphcommerce/eslint-config-pwa | |
|
|
143
|
-
| @graphcommerce/next-config | |
|
|
144
|
-
| @graphcommerce/next-ui | |
|
|
145
|
-
| @graphcommerce/prettier-config-pwa | |
|
|
146
|
-
| @graphcommerce/react-hook-form | |
|
|
147
|
-
| @graphcommerce/typescript-config-pwa | |
|
|
24
|
+
- `📄 /graphcommerce.config.js` GraphCommerce configuration
|
|
25
|
+
- `📁 /components` A set of components you most likely want to modify to your
|
|
26
|
+
needs
|
|
27
|
+
- `📁 /components/Layout `The main layout components, like header, navigation,
|
|
28
|
+
and footer
|
|
29
|
+
- `📁 /pages` A set of boilerplate pages, which handle URL routing
|
|
30
|
+
- `📄 /components/theme.ts` Global styles
|
|
31
|
+
- `📁 /locales` Interface translation files that are auto generated
|
|
32
|
+
- `📁 /plugins` Directory for custom plugins
|
|
33
|
+
- `📄 /next.config.js` Next.js configuration
|
|
148
34
|
|
|
149
35
|
## Hygraph
|
|
150
36
|
|
|
151
|
-
|
|
152
|
-
static content
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
37
|
+
GraphCommerce relies on Hygraph, the default integrated CMS. Hygraph is used for
|
|
38
|
+
all static content (video, pages, images), allowing for high-quality components
|
|
39
|
+
beyond Magento's CMS capabilities.
|
|
40
|
+
|
|
41
|
+
- To start building,
|
|
42
|
+
[clone ↗](https://app.hygraph.com/clone/caddaa93cfa9436a9e76ae9c0f34d257?name=GraphCommerce%20Demo)
|
|
43
|
+
the Hygraph schema.
|
|
44
|
+
- You can safely delete all content
|
|
45
|
+
- Hygraph content is multilingual
|
|
46
|
+
- A page's `content` field holds the components to display
|
|
47
|
+
- If the page url matches a Magento category page url, it's `content` adds to
|
|
48
|
+
the category page
|
|
49
|
+
|
|
50
|
+
<figure>
|
|
51
|
+
|
|
52
|
+
https://user-images.githubusercontent.com/1251986/227236765-503ccaac-6499-48df-bb20-e3b341cd7899.mp4
|
|
53
|
+
|
|
54
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
55
|
+
<source src="https://user-images.githubusercontent.com/1251986/227236765-503ccaac-6499-48df-bb20-e3b341cd7899.mp4" type="video/mp4"/>
|
|
56
|
+
</video>
|
|
57
|
+
|
|
58
|
+
<figcaption>The homepage's `content` field holds the components to display</figcaption>
|
|
59
|
+
</figure>
|
|
60
|
+
|
|
61
|
+
## Page routing
|
|
62
|
+
|
|
63
|
+
GraphCommerce uses Next.js file-based
|
|
64
|
+
[page routing ↗](https://nextjs.org/docs/routing/introduction). The files inside
|
|
65
|
+
the `📁 /pages` directory handle routing. Modify these files to meet your
|
|
66
|
+
requirements or [build a custom page](./pages.md).
|
|
67
|
+
|
|
68
|
+
- Product pages: `📄 /p/[...url].tsx`
|
|
69
|
+
- Homepage: `📄 /index.tsx`
|
|
70
|
+
- Category pages: `📄 /[...url].tsx` (also used for category home page)
|
|
71
|
+
- Hygraph content pages: Modify `📄 /index.tsx`
|
|
72
|
+
|
|
73
|
+
<figure>
|
|
74
|
+
|
|
75
|
+
https://user-images.githubusercontent.com/1251986/227176018-4a6a83a6-c61b-4344-8238-6596cb41c12e.mp4
|
|
76
|
+
|
|
77
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
78
|
+
<source src="https://user-images.githubusercontent.com/1251986/227176018-4a6a83a6-c61b-4344-8238-6596cb41c12e.mp4" type="video/mp4"/>
|
|
79
|
+
</video>
|
|
80
|
+
|
|
81
|
+
<figcaption>Modify the layoutProps in `📄 /newsletter/index.tsx` to change the newsletter page layout</figcaption>
|
|
82
|
+
</figure>
|
|
83
|
+
|
|
84
|
+
## Styling
|
|
85
|
+
|
|
86
|
+
GraphCommerce is build using [MUI core↗](https://mui.com/core/) components.
|
|
87
|
+
|
|
88
|
+
👉 To change your storefront's global colors, typography and styles, modify
|
|
89
|
+
`📄 /components/theme.ts`
|
|
90
|
+
|
|
91
|
+
To style a Graphcommerce component to your liking, add the sx prop:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
sx={{ color: 'red' }}
|
|
198
95
|
```
|
|
199
96
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
(micro)services as data sources. In the magento-graphcms example, a headless CMS
|
|
205
|
-
called [Hygraph](../getting-started/../framework/graphcms.md) is integrated.
|
|
206
|
-
|
|
207
|
-
By default, the GraphQL Mesh endpoint runs on route /api/graphql. You can query
|
|
208
|
-
both the Magento GraphQL schema and the Hygraph GraphQL schema. Try out the
|
|
209
|
-
GraphCommerce demo
|
|
210
|
-
[GraphQL Explorer ↗](https://graphcommerce.vercel.app/api/graphql) with the
|
|
211
|
-
following example query:
|
|
212
|
-
|
|
213
|
-
```graphql
|
|
214
|
-
query {
|
|
215
|
-
products(search: "sock", pageSize: 3) {
|
|
216
|
-
items {
|
|
217
|
-
url_key
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
availableStores {
|
|
221
|
-
store_name
|
|
222
|
-
store_code
|
|
223
|
-
}
|
|
224
|
-
}
|
|
97
|
+
Target child elements with css selectors:
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
sx={{ '& .MuiBox-root': { background: 'blue' }}}
|
|
225
101
|
```
|
|
226
102
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
(codegen) is used to convert query fragments to both the GraphQL document (query
|
|
232
|
-
or mutation) and Typescript type definitions, both captured in `.gql(.ts)`
|
|
233
|
-
files. `.gql(.ts)` are generated at build time.
|
|
234
|
-
|
|
235
|
-
Pages run queries in the getStaticProps function and pass the response as props.
|
|
236
|
-
Pages have a single page query, that combines multiple query fragments from
|
|
237
|
-
components. These accumulating page queries are located in the
|
|
238
|
-
/components/GraphQL directory.
|
|
239
|
-
|
|
240
|
-
With the use of fragments and GraphQL Mesh, GraphCommerce retrieves all data
|
|
241
|
-
from both Magento and GraphCMS in a single GraphQL query. This improves
|
|
242
|
-
performance.
|
|
243
|
-
|
|
244
|
-
```txt
|
|
245
|
-
GraphQL queries in the graphcommerce-magento example
|
|
246
|
-
|
|
247
|
-
├── GraphQL
|
|
248
|
-
└── CategoryPage.graphql
|
|
249
|
-
└── DefaultPage.graphql
|
|
250
|
-
└── PageLink.graphql
|
|
251
|
-
└── DefaultPage.graphql
|
|
252
|
-
└── PagesStaticPaths.graphql
|
|
253
|
-
└── ProductPage.graphql
|
|
254
|
-
└── ProductPage2.graphql
|
|
103
|
+
Pass the theme object to use global values
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
sx={(theme)=>({ margin: theme.spacings.lg, color: theme.palette.text.secondary })}
|
|
255
107
|
```
|
|
256
108
|
|
|
109
|
+
## Customization
|
|
110
|
+
|
|
111
|
+
There are several ways to customize your storefront to a greater extent. The
|
|
112
|
+
optimal method varies based on the desired modification.
|
|
113
|
+
|
|
114
|
+
👉 Local modifications - Every file in your project directory is meant for
|
|
115
|
+
customization. E.g., you can directly modify files in the `📁 /pages` and
|
|
116
|
+
`📁 /folder` directories, as wel as your `📄 /components/theme.ts` file.
|
|
117
|
+
|
|
118
|
+
👉 Plugin - Creating a [plugin](../framework/plugins-react.md) is
|
|
119
|
+
straightforward and surprisingly uncomplicated. Plugins are recommended for
|
|
120
|
+
retaining maximum upgradability.
|
|
121
|
+
|
|
122
|
+
👉 Patch - Directly edit a component in `📁 /node_modules` and generate a patch
|
|
123
|
+
using [patch-package](../framework/patch-package.md). Patches, stored in the
|
|
124
|
+
`📁 /patches` directory, auto-reapply during development or production
|
|
125
|
+
environment builds.
|
|
126
|
+
|
|
127
|
+
❗️ Local copy - Duplicate the component from `📁 /node_modules` to e.g.,
|
|
128
|
+
`📁 /components/`, update all references to it, and edit locally. Using local
|
|
129
|
+
copies marginally complicates upgrading.
|
|
130
|
+
|
|
257
131
|
## FAQ
|
|
258
132
|
|
|
259
133
|
<div>
|
|
@@ -289,5 +163,8 @@ than to start from scratch.
|
|
|
289
163
|
|
|
290
164
|
## Next steps
|
|
291
165
|
|
|
292
|
-
-
|
|
293
|
-
|
|
166
|
+
- 🎉 By now, you know the basics to begin building your storefront.
|
|
167
|
+
- [Set up VS Code](../getting-started/vscode.md) and install usefull extensions
|
|
168
|
+
for an optimal development experience.
|
|
169
|
+
- [Start customizing](../getting-started/start-building.md) to go from "Hello
|
|
170
|
+
World" to a fully built GraphCommerce custom storefront.
|
|
@@ -1,34 +1,14 @@
|
|
|
1
1
|
---
|
|
2
|
-
menu: 2.
|
|
2
|
+
menu: 2. Start customizing
|
|
3
3
|
metaTitle: Customize a storefront
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Start building a GraphCommerce custom storefront
|
|
7
7
|
|
|
8
|
-
Previously, you
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
functionality to your GraphCommerce app. Your final modification will be simple,
|
|
13
|
-
but you’ll learn where to find resources to build more complex features on your
|
|
14
|
-
own.
|
|
15
|
-
|
|
16
|
-
### What you'll learn
|
|
17
|
-
|
|
18
|
-
After you've finished this tutorial, you'll have accomplished the following:
|
|
19
|
-
|
|
20
|
-
- Customized text and component styles
|
|
21
|
-
- Fetched data from server components
|
|
22
|
-
- Made changes to GraphQL queries
|
|
23
|
-
|
|
24
|
-
### Requirements
|
|
25
|
-
|
|
26
|
-
You're using the most recent version of GraphCommerce. We recommend using the
|
|
27
|
-
latest release to get the benefits of performance, new components, and other
|
|
28
|
-
best practices.
|
|
29
|
-
|
|
30
|
-
You've completed the
|
|
31
|
-
[Create a GraphCommerce app tutorial](../getting-started/create.md).
|
|
8
|
+
Previously, you created a new GraphCommerce app on your local machine. In this
|
|
9
|
+
tutorial, you'll complete a series of tasks to add some specific functionality
|
|
10
|
+
to your GraphCommerce storefront. Your final modification will be simple, but
|
|
11
|
+
you’ll learn where to find resources to build more complex features on your own.
|
|
32
12
|
|
|
33
13
|
## Step 1: Make customizations
|
|
34
14
|
|
package/package.json
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"name": "@graphcommerce/docs",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/docs",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce/docs",
|
|
5
|
-
"version": "6.0.2-canary.
|
|
5
|
+
"version": "6.0.2-canary.2",
|
|
6
6
|
"sideEffects": true,
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@graphcommerce/prettier-config-pwa": "6.0.2-canary.
|
|
8
|
+
"@graphcommerce/prettier-config-pwa": "6.0.2-canary.2"
|
|
9
9
|
},
|
|
10
10
|
"prettier": "@graphcommerce/prettier-config-pwa"
|
|
11
11
|
}
|
package/readme.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
menu:
|
|
3
|
-
order:
|
|
2
|
+
menu: Home
|
|
3
|
+
order:
|
|
4
|
+
getting-started,framework, upgrading, magento, feature-list, contributing,
|
|
5
|
+
roadmap
|
|
4
6
|
metaTitle: Start React, Next.js Magento PWA development here - GraphCommerce
|
|
5
7
|
metaDescription:
|
|
6
8
|
'GraphCommerce is the open-source PWA Studio Magento 2 alternative.
|
|
@@ -10,74 +12,153 @@ metaDescription:
|
|
|
10
12
|
|
|
11
13
|
# GraphCommerce
|
|
12
14
|
|
|
13
|
-
GraphCommerce is a
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
GraphCommerce is a framework for building headless ecommerce storefronts in
|
|
16
|
+
React and Next.js. It provides a best-in-class example, including components and
|
|
17
|
+
utilities, to deliver a high-performance, high-quality ecommerce Progressive Web
|
|
18
|
+
App (PWA).
|
|
17
19
|
|
|
18
20
|
[Get started](./getting-started/create.md) with GraphCommerce in minutes
|
|
19
21
|
|
|
20
22
|
<figure>
|
|
21
23
|
|
|
22
|
-
https://user-images.githubusercontent.com/1251986/
|
|
24
|
+
https://user-images.githubusercontent.com/1251986/226889542-ec403549-5e4f-4ff6-8fc5-ba879798353f.mp4
|
|
23
25
|
|
|
24
26
|
<video width="100%" controls autoPlay loop muted playsInline>
|
|
25
|
-
<source src="https://user-images.githubusercontent.com/1251986/
|
|
27
|
+
<source src="https://user-images.githubusercontent.com/1251986/226889542-ec403549-5e4f-4ff6-8fc5-ba879798353f.mp4" type="video/mp4"/>
|
|
26
28
|
</video>
|
|
27
29
|
|
|
28
|
-
<figcaption>GraphCommerce
|
|
30
|
+
<figcaption>The GraphCommerce homepage, showcasing content from both Magento and Hypgraph through a variety of included UX components.</figcaption>
|
|
29
31
|
</figure>
|
|
30
32
|
|
|
31
33
|
---
|
|
32
34
|
|
|
33
|
-
###
|
|
35
|
+
### Build your custom storefront
|
|
34
36
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
- GraphQL
|
|
39
|
-
- Mui
|
|
40
|
-
- Apollo Client
|
|
41
|
-
- GraphQL Code Generator
|
|
42
|
-
- Framer Motion
|
|
37
|
+
<span>
|
|
38
|
+
<details open>
|
|
39
|
+
<summary>🎉 Getting Started</summary>
|
|
43
40
|
|
|
44
|
-
|
|
41
|
+
[Get up and running with a new GraphCommerce storefront.](getting-started/create.md)
|
|
45
42
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
</details>
|
|
44
|
+
|
|
45
|
+
<details open>
|
|
46
|
+
<summary>⚙️ Configuration</summary>
|
|
47
|
+
|
|
48
|
+
[Connect your magento backend and discover all configuration options available.](framework/config.md)
|
|
49
|
+
|
|
50
|
+
</details>
|
|
51
|
+
|
|
52
|
+
<details open>
|
|
53
|
+
<summary>🌎 Internationalization</summary>
|
|
54
|
+
|
|
55
|
+
[Configure your GraphCommerce storefront for multiple countries and languages.](framework/translations.md)
|
|
56
|
+
|
|
57
|
+
</details>
|
|
58
|
+
|
|
59
|
+
<details open>
|
|
60
|
+
<summary>✅ Customization</summary>
|
|
61
|
+
|
|
62
|
+
[Follow the GraphCommerce tutorial series to go from "Hello World" to a fully built out custom storefront.](getting-started/start-building.md)
|
|
63
|
+
|
|
64
|
+
</details>
|
|
65
|
+
|
|
66
|
+
<details open>
|
|
67
|
+
<summary>⭐️ SEO</summary>
|
|
68
|
+
|
|
69
|
+
[Optimize your GraphCommerce storefront for search engines and social networks.](framework/seo.md)
|
|
70
|
+
|
|
71
|
+
</details>
|
|
72
|
+
|
|
73
|
+
<details open>
|
|
74
|
+
<summary>🧡 Magento extentions (soon)</summary>
|
|
75
|
+
|
|
76
|
+
[Learn how to imlement any GraphQL compatible Magento extention.](#)
|
|
77
|
+
|
|
78
|
+
</details>
|
|
79
|
+
|
|
80
|
+
<details open>
|
|
81
|
+
<summary>🔌 GraphCommerce Plugins</summary>
|
|
82
|
+
|
|
83
|
+
[Extend Graphcommerce with simple to highly complex functionality, while ensuring compatibility with future upgrades.](framework/plugins-react.md)
|
|
84
|
+
|
|
85
|
+
</details>
|
|
86
|
+
|
|
87
|
+
<details open>
|
|
88
|
+
<summary>🔮 Hygraph component</summary>
|
|
89
|
+
|
|
90
|
+
[Build a custom Hypgraph component to showcase content according to your specific preferences.](getting-started/graphcms-component.md)
|
|
91
|
+
|
|
92
|
+
</details>
|
|
93
|
+
|
|
94
|
+
</span>
|
|
95
|
+
|
|
96
|
+
### Testing and going live
|
|
97
|
+
|
|
98
|
+
<span>
|
|
99
|
+
<details open>
|
|
100
|
+
<summary>☁️ Deployment to Vercel</summary>
|
|
101
|
+
|
|
102
|
+
[Vercel is GraphCommerce's recommended deployment platform for GraphCommerce storefronts.](framework/deployment.md)
|
|
103
|
+
|
|
104
|
+
</details>
|
|
105
|
+
|
|
106
|
+
<details open>
|
|
107
|
+
<summary>⚡️ Self Hosting (soon)</summary>
|
|
108
|
+
|
|
109
|
+
[Deploy a GraphCommerce storefront to other hosting providers.](#)
|
|
110
|
+
|
|
111
|
+
</details>
|
|
112
|
+
</span>
|
|
113
|
+
|
|
114
|
+
### Support
|
|
115
|
+
|
|
116
|
+
<span>
|
|
117
|
+
<details open>
|
|
118
|
+
<summary>🚦 Troubleshooting</summary>
|
|
119
|
+
|
|
120
|
+
[No success? Refer to the troubleshooting page for common errors.](framework/troubleshooting.md)
|
|
50
121
|
|
|
51
|
-
|
|
52
|
-
|
|
122
|
+
</details>
|
|
123
|
+
|
|
124
|
+
<details open>
|
|
125
|
+
<summary>📖 Upgrading</summary>
|
|
126
|
+
|
|
127
|
+
[Follow step-by-step instructions to upgrade to the latest version.](upgrading.md)
|
|
128
|
+
|
|
129
|
+
</details>
|
|
130
|
+
|
|
131
|
+
<details open>
|
|
132
|
+
<summary>🫶 Slack Community</summary>
|
|
133
|
+
|
|
134
|
+
[Ask your question in the public Slack community channel.](https://join.slack.com/t/graphcommerce/shared_invite/zt-11rmgq1ad-F~0daNtKcSvtcC4eQRzjeQ)
|
|
135
|
+
|
|
136
|
+
</details>
|
|
137
|
+
</span>
|
|
53
138
|
|
|
54
139
|
## Features
|
|
55
140
|
|
|
56
|
-
GraphCommerce features
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
carefully chosen, industry standard, tech stack. It includes Magento-specific
|
|
78
|
-
React components, pages, and utilities for e-commerce. They're accessible,
|
|
79
|
-
performant, and ready for use. They also help to reduce the initial complexity
|
|
80
|
-
and boilerplate needed for building a custom storefront.
|
|
141
|
+
GraphCommerce provides all [features](./feature-list.md) needed to deliver a
|
|
142
|
+
high-quality ecommerce experience.
|
|
143
|
+
|
|
144
|
+
In addition, it offers a solution for all larger, technically complex challenges
|
|
145
|
+
that come with headless e-commerce:
|
|
146
|
+
|
|
147
|
+
👉 Static generation (SSG) and optimized performance through its utilization
|
|
148
|
+
👉 Continuity: built with industry-standard technology, libraries, and
|
|
149
|
+
packages
|
|
150
|
+
👉 A fully-featured, component-based, Magento-compatible front-end
|
|
151
|
+
👉 Easy to extend, modify, and theme
|
|
152
|
+
👉 Ready for Magento modules that extend the GraphQL API
|
|
153
|
+
👉 A-Z optimized front-end performance
|
|
154
|
+
👉 Multilingual Magento multi-store support
|
|
155
|
+
👉 Fully SEO-optimized
|
|
156
|
+
👉 70-90/100/100/100+PWA PageSpeed Metrics
|
|
157
|
+
👉 Includes multilingual headless CMS implementation
|
|
158
|
+
👉 Fully runs on Magento's GraphQL API (0 modifications, plug-and-play)
|
|
159
|
+
|
|
160
|
+
> Currently, GraphCommerce can only be used to build headless Magento 2
|
|
161
|
+
> storefronts.
|
|
81
162
|
|
|
82
163
|
## FAQ
|
|
83
164
|
|
|
@@ -114,8 +195,3 @@ development.
|
|
|
114
195
|
|
|
115
196
|
</details>
|
|
116
197
|
</div>
|
|
117
|
-
|
|
118
|
-
## Next steps
|
|
119
|
-
|
|
120
|
-
- [Get started](./getting-started/create.md) with GraphCommerce and begin
|
|
121
|
-
building a custom storefront.
|
|
File without changes
|