Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit 704db1a

Browse files
atwixfirsterkeharper
atwixfirster
authored and
keharper
committed
Graphql checkout tutorial (#4271)
* #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * adding navigation * Update graphql.yml Removed unnecessary line * #589: Add a tutorial for the checkout workflow 1. Add info about coupon operations * magento/devdocs#: GraphQl Checkout Tutorial 1. Fix remove coupon response * magento/devdocs#: GraphQl Checkout Tutorial 1. Made corrections for setShippingMethodsOnCart regarding magento/graphql-ce#609 * magento/devdocs#: GraphQl checkout tutorial * magento/devdocs#: GraphQl checkout tutorial * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-add-product-to-cart.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-add-product-to-cart.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-billing-address.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-coupon.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-customer.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-payment-method.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-place-order.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-quote-email.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-shipping-address.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-shipping-method.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-shopping-cart.md * magento/devdocs#: GraphQl checkout tutorial. Updates for index.md * magento/devdocs#: GraphQl checkout tutorial. Update product types * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-billing-address.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-coupon.md, checkout-payment-method.md, checkout-place-order.md, checkout-quote-email.md, checkout-shipping-address.md, checkout-shipping-method.md and index.md . * magento/devdocs#: GraphQl checkout tutorial. Add virtual product to cart * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * Update index.md * Update checkout-add-product-to-cart.md Removing a couple of notes since a similar note is now in the top section. Added a couple of minor edits. * Update checkout-billing-address.md Fix outdated link
1 parent de40e51 commit 704db1a

12 files changed

+1321
-3
lines changed

‎_data/toc/graphql.yml

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ pages:
4949
children:
5050
- label: CMS endpoint
5151
url: /graphql/reference/cms.html
52-
52+
5353
- label: CustomAttributeMetadata endpoint
5454
url: /graphql/reference/custom-attribute-metadata.html
5555

@@ -143,6 +143,10 @@ pages:
143143

144144
- label: Wishlist endpoint
145145
url: /graphql/reference/wishlist.html
146-
146+
147+
- label: Tutorial
148+
class: tutorial
149+
url: /graphql/tutorials/checkout/index.html
150+
147151
- label: Release Notes
148-
url: /graphql/release-notes.html
152+
url: /graphql/release-notes.html

‎guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
layout: tutorial
3+
group: graphql
4+
title: Step 3. Add products to the cart
5+
subtitle: GraphQL checkout tutorial
6+
level3_subgroup: graphql-checkout
7+
return_to:
8+
title: GraphQL Overview
9+
url: graphql/index.html
10+
menu_order: 30
11+
functional_areas:
12+
- Integration
13+
contributor_name: Atwix
14+
contributor_link: https://www.atwix.com/
15+
---
16+
17+
GraphQL supports [two types of product]({{ page.baseurl }}/graphql/reference/product-interface-implementations.html) which can be added into shopping cart:
18+
19+
* simple product
20+
* virtual product
21+
22+
{:.bs-callout .bs-callout-info}
23+
If you add a product to the shopping cart as a registered customer, be sure to send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more details.
24+
25+
`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html).
26+
27+
## Add a simple product into the shopping cart
28+
29+
The following mutation adds a **simple product** into shopping cart.
30+
31+
**Request**
32+
33+
```text
34+
mutation {
35+
addSimpleProductsToCart(
36+
input: {
37+
cart_id: "{ CART_ID }"
38+
cart_items: [
39+
{
40+
data: {
41+
quantity: 1
42+
sku: "simple-product"
43+
}
44+
}
45+
]
46+
}
47+
) {
48+
cart {
49+
items {
50+
id
51+
product {
52+
sku
53+
stock_status
54+
}
55+
quantity
56+
}
57+
}
58+
}
59+
}
60+
```
61+
62+
**Response**
63+
64+
```json
65+
{
66+
"data": {
67+
"addSimpleProductsToCart": {
68+
"cart": {
69+
"items": [
70+
{
71+
"id": "508",
72+
"product": {
73+
"sku": "simple-product",
74+
"stock_status": "IN_STOCK"
75+
},
76+
"quantity": 1
77+
}
78+
]
79+
}
80+
}
81+
}
82+
}
83+
```
84+
85+
## Add a virtual product into the shopping cart
86+
87+
The following mutation adds a **virtual product** into shopping cart.
88+
89+
**Request**
90+
91+
```text
92+
mutation {
93+
addVirtualProductsToCart(
94+
input: {
95+
cart_id: "{ CART_ID }"
96+
cart_items: [
97+
{
98+
data: {
99+
quantity: 1
100+
sku: "virtual-product"
101+
}
102+
}
103+
]
104+
}
105+
) {
106+
cart {
107+
items {
108+
id
109+
product {
110+
sku
111+
stock_status
112+
}
113+
quantity
114+
}
115+
}
116+
}
117+
}
118+
```
119+
120+
**Response**
121+
122+
```json
123+
{
124+
"data": {
125+
"addVirtualProductsToCart": {
126+
"cart": {
127+
"items": [
128+
{
129+
"id": "509",
130+
"product": {
131+
"sku": "virtual-product",
132+
"stock_status": "IN_STOCK"
133+
},
134+
"quantity": 1
135+
}
136+
]
137+
}
138+
}
139+
}
140+
}
141+
```
142+
143+
Use the `updateCartItems` mutation to update shopping cart items and `removeItemFromCart` to remove a product from the shopping cart.
144+
145+
## Verify this step {#verify-step}
146+
147+
1. Sign in as a customer to the website using the email `[email protected]` and password `b1b2b3l@w+`.
148+
149+
2. Go to the shopping cart. All the items you added are displayed.

0 commit comments

Comments
 (0)