Graphql checkout tutorial (#4271)

* #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * #589: Add a tutorial for the checkout workflow * adding navigation * Update graphql.yml Removed unnecessary line * #589: Add a tutorial for the checkout workflow 1. Add info about coupon operations * magento/devdocs#: GraphQl Checkout Tutorial 1. Fix remove coupon response * magento/devdocs#: GraphQl Checkout Tutorial 1. Made corrections for setShippingMethodsOnCart regarding magento/graphql-ce#609 * magento/devdocs#: GraphQl checkout tutorial * magento/devdocs#: GraphQl checkout tutorial * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-add-product-to-cart.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-add-product-to-cart.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-billing-address.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-coupon.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-customer.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-payment-method.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-place-order.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-quote-email.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-shipping-address.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-shipping-method.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-shopping-cart.md * magento/devdocs#: GraphQl checkout tutorial. Updates for index.md * magento/devdocs#: GraphQl checkout tutorial. Update product types * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-billing-address.md * magento/devdocs#: GraphQl checkout tutorial. Updates for checkout-coupon.md, checkout-payment-method.md, checkout-place-order.md, checkout-quote-email.md, checkout-shipping-address.md, checkout-shipping-method.md and index.md . * magento/devdocs#: GraphQl checkout tutorial. Add virtual product to cart * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * magento/devdocs#: GraphQl checkout tutorial. * Update index.md * Update checkout-add-product-to-cart.md Removing a couple of notes since a similar note is now in the top section. Added a couple of minor edits. * Update checkout-billing-address.md Fix outdated link
magento · Jun 25, 2019 · 704db1a · 704db1a
1 parent de40e51
commit 704db1a
Show file tree

Hide file tree

Showing 12 changed files with 1,321 additions and 3 deletions.
diff --git a/_data/toc/graphql.yml b/_data/toc/graphql.yml
@@ -49,7 +49,7 @@ pages:
       children:
             - label: CMS endpoint
               url: /graphql/reference/cms.html
-              
+
             - label: CustomAttributeMetadata endpoint
               url: /graphql/reference/custom-attribute-metadata.html
 
@@ -143,6 +143,10 @@ pages:
 
             - label: Wishlist endpoint
               url: /graphql/reference/wishlist.html
-
+
+    - label: Tutorial
+      class: tutorial
+      url: /graphql/tutorials/checkout/index.html
+
     - label: Release Notes
-      url: /graphql/release-notes.html
+      url: /graphql/release-notes.html
diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md b/guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md
@@ -0,0 +1,149 @@
+---
+layout: tutorial
+group: graphql
+title: Step 3. Add products to the cart
+subtitle: GraphQL checkout tutorial
+level3_subgroup: graphql-checkout
+return_to:
+  title: GraphQL Overview
+  url: graphql/index.html
+menu_order: 30
+functional_areas:
+  - Integration
+contributor_name: Atwix
+contributor_link: https://www.atwix.com/
+---
+
+GraphQL supports [two types of product]({{ page.baseurl }}/graphql/reference/product-interface-implementations.html) which can be added into shopping cart:
+
+ * simple product
+ * virtual product
+
+{:.bs-callout .bs-callout-info}
+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 ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more details.
+
+`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html).
+
+## Add a simple product into the shopping cart
+
+The following mutation adds a **simple product** into shopping cart.
+
+**Request**
+
+```text
+mutation {  
+  addSimpleProductsToCart(
+    input: {
+      cart_id: "{ CART_ID }"
+      cart_items: [
+        {
+          data: {
+            quantity: 1
+            sku: "simple-product"
+          }
+        }
+      ]
+    }
+  ) {
+    cart {
+      items {
+        id
+        product {
+          sku
+          stock_status
+        }
+        quantity
+      }
+    }
+  }
+}
+```
+
+**Response**
+
+```json
+{
+  "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**
+
+```text
+mutation {  
+  addVirtualProductsToCart(
+    input: {
+      cart_id: "{ CART_ID }"
+      cart_items: [
+        {
+          data: {
+            quantity: 1
+            sku: "virtual-product"
+          }
+        }
+      ]
+    }
+  ) {
+    cart {
+      items {
+        id
+        product {
+          sku
+          stock_status
+        }
+        quantity
+      }
+    }
+  }
+}
+```
+
+**Response**
+
+```json
+{
+  "data": {
+    "addVirtualProductsToCart": {
+      "cart": {
+        "items": [
+          {
+            "id": "509",
+            "product": {
+              "sku": "virtual-product",
+              "stock_status": "IN_STOCK"
+            },
+            "quantity": 1
+          }
+        ]
+      }
+    }
+  }
+}
+```
+
+Use the `updateCartItems` mutation to update shopping cart items and `removeItemFromCart` to remove a product from the shopping cart.
+
+## Verify this step {#verify-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.