Step 3. Add products to the cart
GraphQL checkout tutorial
GraphQL supports all product types, but this tutorial only demonstrates how to add a simple product and a virtual product to the shopping cart. You can find more details and examples in the following topics:
- Bundle products
- Configurable products
- Downloadable products
- Simple and grouped products
- Virtual products
Product interface implementations also describes how to create queries that access product interfaces.
Use the updateCartItems
mutation to update shopping cart items and removeItemFromCart
to remove a product from the shopping cart.
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 Authorization tokens for more details.
Add a simple product into the shopping cart
{ CART_ID }
is the unique shopping cart ID from Step 2. Create empty cart.
The following mutation adds a simple product into shopping cart.
Request:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
mutation {
addSimpleProductsToCart(
input: {
cart_id: "{ CART_ID }"
cart_items: [
{
data: {
quantity: 1
sku: "simple-product"
}
}
]
}
) {
cart {
items {
id
product {
sku
stock_status
}
quantity
}
}
}
}
Response:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"data": {
"addSimpleProductsToCart": {
"cart": {
"items": [
{
"id": "508",
"product": {
"sku": "simple-product",
"stock_status": "IN_STOCK"
},
"quantity": 1
}
]
}
}
}
}
Add a virtual product into the shopping cart
The following mutation adds a virtual product into shopping cart.
Request:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
mutation {
addVirtualProductsToCart(
input: {
cart_id: "{ CART_ID }"
cart_items: [
{
data: {
quantity: 1
sku: "virtual-product"
}
}
]
}
) {
cart {
items {
id
product {
sku
stock_status
}
quantity
}
}
}
}
Response:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"data": {
"addVirtualProductsToCart": {
"cart": {
"items": [
{
"id": "509",
"product": {
"sku": "virtual-product",
"stock_status": "IN_STOCK"
},
"quantity": 1
}
]
}
}
}
}
Verify this step
-
Sign in as a customer to the website using the email
john.doe@example.com
and passwordb1b2b3l@w+
. -
Go to the shopping cart. All the items you added are displayed.