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.