Step 3. Add products to the cart

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.

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:

Copy
mutation {
  addSimpleProductsToCart(
    input: {
      cart_id: "{ CART_ID }"
      cart_items: [
        {
          data: {
            quantity: 1
            sku: "24-MG04"
          }
        }
      ]
    }
  ) {
    cart {
      items {
        id
        product {
          sku
          stock_status
        }
        quantity
      }
    }
  }
}
Copied to your clipboard
mutation {
  addSimpleProductsToCart(
    input: {
      cart_id: "{ CART_ID }"
      cart_items: [
        {
          data: {
            quantity: 1
            sku: "24-MG04"
          }
        }
      ]
    }
  ) {
    cart {
      items {
        id
        product {
          sku
          stock_status
        }
        quantity
      }
    }
  }
}

Response:

Copy
{
  "data": {
    "addSimpleProductsToCart": {
      "cart": {
        "items": [
          {
            "id": "5",
            "product": {
              "sku": "24-MG04",
              "stock_status": "IN_STOCK"
            },
            "quantity": 1
          }
        ]
      }
    }
  }
}
Copied to your clipboard
{
  "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:

Copy
mutation {
  addVirtualProductsToCart(
    input: {
      cart_id: "{ CART_ID }"
      cart_items: [
        {
          data: {
            quantity: 1
            sku: "240-LV04"
          }
        }
      ]
    }
  ) {
    cart {
      items {
        id
        product {
          sku
          stock_status
        }
        quantity
      }
    }
  }
}
Copied to your clipboard
mutation {
  addVirtualProductsToCart(
    input: {
      cart_id: "{ CART_ID }"
      cart_items: [
        {
          data: {
            quantity: 1
            sku: "240-LV04"
          }
        }
      ]
    }
  ) {
    cart {
      items {
        id
        product {
          sku
          stock_status
        }
        quantity
      }
    }
  }
}

Response:

Copy
{
  "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
          }
        ]
      }
    }
  }
}
Copied to your clipboard
{
  "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.

Last updated 9/8/2023

Was this helpful?

Yes

No