PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

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

The following mutation adds a simple product into the shopping cart.

Replace { CART_ID } with the unique shopping cart ID from Step 2. Create empty cart.

In this example, we will add the Aim Analog Watch (SKU 24-MG04) from the default Luma catalog to the cart. The SKU identifies the product to be added.

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: "24-MG04"
          }
        }
      ]
    }
  ) {
    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": "5",
            "product": {
              "sku": "24-MG04",
              "stock_status": "IN_STOCK"
            },
            "quantity": 1
          }
        ]
      }
    }
  }
}

Add a virtual product into the shopping cart

The following mutation adds a virtual product into the shopping cart. In this example, we add the Beginner’s Yoga video downloadable product (SKU 240-LV04).

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: "240-LV04"
          }
        }
      ]
    }
  ) {
    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
19
20
21
22
23
24
25
26
{
  "data": {
    "addVirtualProductsToCart": {
      "cart": {
        "items": [
          {
            "id": "5",
            "product": {
              "sku": "24-MG04",
              "stock_status": "IN_STOCK"
            },
            "quantity": 1
          },
          {
            "id": "6",
            "product": {
              "sku": "240-LV04",
              "stock_status": "IN_STOCK"
            },
            "quantity": 1
          }
        ]
      }
    }
  }
}

The response lists all items currently in the cart, including the just-added video download.

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.