This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

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:

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

  1. Sign in as a customer to the website using the email john.doe@example.com and password b1b2b3l@w+.

  2. Go to the shopping cart. All the items you added are displayed.