Reading list Switch to dark mode

    Magento 2 add configurable, downloadable, bundle and virtual products to cart using GraphQL

    Updated 8 February 2024

    In this article, We will learn about how to add configurable products to the cart using Graphql in Magento 2.

    In the previous blog, We learned about how to add simple products to cart using GraphQl How to add simple products to cart using GraphQl

    Follow the below step to add configurable products to the cart using Graphql in Magento 2.

    GraphQL Endpoint: BASE_URL/graphql
    Example: http://example.com/graphql

    First off, we need to create an empty cart to add products in Magento 2.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    We have created an empty cart for the guest user using the following mutation, token is not required for the guest user.

    add configurable products to the cart using graphql in magento 2

    Add a configurable product.

    Use the addConfigurableProductsToCart mutation to add configurable products to the shopping cart.

    In the following example add one product with configuration options color is red.

    Request:

    mutation {
      addConfigurableProductsToCart(
        input: {
          cart_id: "SPBJroclB7zT45lgY0stDJmpPnvcsGx2"
          cart_items: [{
            parent_sku: "configurable"
            data: {
              quantity: 1,
              sku: "configurable-red"
            }
          }]
        }
      ) {
        cart {
          items {
            id
            product {
              name
              sku
              options_container
            }
            quantity
            ... on ConfigurableCartItem{
            	configurable_options{
                id
                option_label
                value_label
                value_id
              }
            }
          }
        }
      }
    }

    Response:

    Execute the mutation through your GraphQL client, and the configurable product will be added to the cart.

    {
        "data": {
            "addConfigurableProductsToCart": {
                "cart": {
                    "items": [
                        {
                            "id": "732",
                            "product": {
                                "name": "configurable",
                                "sku": "configurable",
                                "options_container": "container2"
                            },
                            "quantity": 1,
                            "configurable_options": [
                                {
                                    "id": 93,
                                    "option_label": "Color",
                                    "value_label": "red",
                                    "value_id": 4
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }

    Add a downloadable product to a cart

    Use the addDownloadableProductsToCart mutation to add downloadable products to the shopping cart.

    A downloadable product can be anything that you can download as a file, such as an eBook, music or video.

    Request:

    mutation {
      addDownloadableProductsToCart(
        input: {
          cart_id: "SPBJroclB7zT45lgY0stDJmpPnvcsGx2"
          cart_items: {
            data: {
              sku: "downlodableProdc"
              quantity: 1
            }
            downloadable_product_links: [
              {
                link_id: 2                
              }
              {
                link_id: 5                 
              }
            ]
          }
        }
      ) {
        cart {
          items {
            product {
              id
              sku
              name
            }
            quantity
            ... on DownloadableCartItem {
              links {
                title
                price
              }
              samples {
                title
                sample_url
              }
            }
          }
        }
      }
    }

    Response:

    Execute the mutation through your GraphQL client, and the downloadable product will be added to the cart.

    {
        "data": {
            "addDownloadableProductsToCart": {
                "cart": {
                    "items": [
                        {
                            "product": {
                                "id": 76,
                                "sku": "downlodableProdc",
                                "name": "downlodableProdc"
                            },
                            "quantity": 1,
                            "links": [
                                {
                                    "title": "sampleAudio",
                                    "price": 21
                                },
                                {
                                    "title": "Sample 2",
                                    "price": 32
                                }
                            ],
                            "samples": [
                                {
                                    "title": "tre",
                                    "sample_url": "https://example.com/downloadable/download/sample/sample_id/1/"
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }

    Add a bundle product to a cart

    Use the addBundleProductsToCart mutation to add bundle products to the shopping cart.

    This example adds one bundle product to the shopping cart. The SKU of this product  bundleProduct

    Request:

    mutation {
      addBundleProductsToCart(
        input: {
          cart_id: "SPBJroclB7zT45lgY0stDJmpPnvcsGx2"
          cart_items: [
          {
            data: {
              sku: "bundleProduct"
              quantity: 1
            }
            bundle_options: [
              {
                id: 2
                quantity: 1
                value: [
                  "4"
                ]
              } 
            ]
          },
        ]
      }) {
        cart {
          items {
            id
            quantity
            product {
              sku
              name
            }
            ... on BundleCartItem {
              bundle_options {
                id
                label
                type
                values {
                  id
                  label
                  price
                  quantity
                }
              }
            }
          }
        }
      }
    }

    Response:

    Execute the mutation through your GraphQL client, and the bundle product will be added to the cart.

    {
        "data": {
            "addBundleProductsToCart": {
                "cart": {
                    "items": [
                        {
                            "id": "114",
                            "quantity": 1,
                            "product": {
                                "sku": "bundleProduct",
                                "name": "bundleProduct"
                            },
                            "bundle_options": [
                                {
                                    "id": 2,
                                    "label": "Simple",
                                    "type": "select",
                                    "values": [
                                        {
                                            "id": 4,
                                            "label": "simple",
                                            "price": 10,
                                            "quantity": 1
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }

    Add VirtualProduct to a cart

    Use the addVirtualProductsToCart mutation to add virtual products to the shopping cart.

    A virtual product represents a saleable item that is not physical, such as a membership, service, warranty, or subscription. Virtual products do not need to be shipped or downloaded, nor do they require stock management.

    Request:

    mutation {
      addVirtualProductsToCart(
        input: {
          cart_id: "pIRMnP9PtmZ7lu3b22mb7niTMnFhu0Nw",
          cart_items: [
            {
              data: {
                quantity: 1
                sku: "virtualProduct"
              }
            }
           ]
        }
      ) {
        cart {
          items {
            product {
              name
            }
            quantity
          }
          prices {
            grand_total {
              value
              currency
            }
          }
        }
      }
    }

    Response:

    Execute the mutation through your GraphQL client, and the virtual product will be added to the cart.

    {
        "data": {
            "addVirtualProductsToCart": {
                "cart": {
                    "items": [
                        {
                            "product": {
                                "name": "virtualProduct"
                            },
                            "quantity": 1
                        }
                    ],
                    "prices": {
                        "grand_total": {
                            "value": 100,
                            "currency": "USD"
                        }
                    }
                }
            }
        }
    }

    Hope this will help you.

    Thanks ­čÖé

    You can check the following blogs related to GraphQl:

    Product Types in Magento 2

    How to add simple products to cart using GraphQL

    GraphQl implementation in Magento 2

    GraphQL Mutation

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home