Reworked GraphQL tutorial #8046

dobooth · 2020-10-14T19:33:41Z

Purpose of this pull request

This pull request (PR) enhances and fixes the GraphQL tutorial.
It clarifies steps, adds instructions for creating a coupon and other markup fixes.

Affected DevDocs pages

https://devdocs.magento.com/guides/v2.4/graphql/tutorials/checkout/index.html

whatsnew
Simplified and updated the GraphQL tutorial.

… db_graphql_tutorial

src/guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md

keharper · 2020-10-20T16:28:00Z

src/guides/v2.3/graphql/tutorials/checkout/index.md


-The **10-step tutorial** generally takes **30 minutes**.
+The 10-step tutorial generally takes 30 minutes.


Revert. The highlighting is part of the tutorial template.

keharper · 2020-10-20T16:32:39Z

src/guides/v2.3/graphql/tutorials/checkout/index.md


  The sample data defines a functional store, called Luma, that sells fitness clothing and accessories. The store does not provide any sandbox accounts for testing credit card payments, so transactions will be simulated using an offline [payment method](https://glossary.magento.com/payment-method).

-*  Install a GraphQl client. You can use any GraphQl client to send calls to Magento. [GraphiQL](https://electronjs.org/apps/graphiql) is recommended.
+-  In the Magento admin, create a coupon that will be used in [Step 7. Apply a coupon]({{page.baseurl}}/graphql/tutorials/checkout/checkout-coupon.html).


Add a link to merchdocs. Also, this isn't the most important bullet item. Delete the "Find the merchant documentation" item and replace it with this one.

src/guides/v2.3/graphql/tutorials/checkout/checkout-customer.md

keharper · 2020-10-20T18:14:46Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-billing-address.md

@@ -220,17 +205,18 @@ mutation {
        ]
      }
    }
-  }
-}


Add these back. They're the closing marks for the data and top-level` objects. Also I think the lack of blank line afterward is causing the display problems in GH.

src/guides/v2.3/graphql/tutorials/checkout/checkout-billing-address.md

src/guides/v2.4/graphql/tutorials/checkout/checkout-shipping-method.md

src/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md

…t-to-cart.md Co-authored-by: Kevin Harper <[email protected]>

Co-authored-by: Kevin Harper <[email protected]>

keharper · 2020-10-27T03:08:42Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-customer.md


 ## Verify this step {#verify-step}

 Sign in as a customer to the website using the email `[email protected]` and password `b1b2b3l@w+`. You should be successfully logged in.
+
+[Authorization tokens]({{page.baseurl}}/graphql/authorization-tokens.html) describes the mutation further.


Move this line to be above "Verify this step"

keharper · 2020-10-27T03:17:16Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-address.md

@@ -22,57 +22,42 @@ Use the [setShippingAddressesOnCart]({{ page.baseurl }}/graphql/mutations/set-sh

 ## Create a new shipping address

-The following mutation adds a shipping address to the quote.
+In this step, we use the `createCustomerAddress` mutation to add a shipping address to the customer record. Then we can use it in the cart.


In the bulleted list at the beginning of the topic, change "Add" to "Create". Also, delete the second bullet. Maybe wordsmith the intro a bit to say the tutorial shows two ways to set a shipping address.

We've broken the tutorial. We don't describe how to set the shipping address for a guest.

keharper · 2020-10-27T03:55:11Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md

+
+For **Rule Information**:
+
+-  Rule Name: Watch Coupon


Make all the field names bold.

src/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md

keharper · 2020-10-27T04:14:54Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-place-order.md


-```text
+```graphql


In the last line of the topic, the right parenthesis is missing.

Co-authored-by: Kevin Harper <[email protected]>

keharper · 2020-11-03T02:41:13Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-address.md

 mutation {
  setShippingAddressesOnCart(
    input: {
-      cart_id: "{ CART_ID }"
+      cart_id: "{{ CART_ID }}"


Remove a set of braces. With a double set, Jekyll thinks CART_ID is a varaible, which renders as a blank.

Also, insert a region_id and set save_in_address_book to true.

That's from trying to get variables working in Altair.

keharper · 2020-11-03T04:00:50Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-billing-address.md

@@ -25,53 +25,42 @@ Use the [setBillingAddressOnCart]({{ page.baseurl }}/graphql/mutations/set-billi

 ## Add a new billing address

-The following mutation adds a new billing address. `{ 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).
+Similar to the previous step, we will add a billing address to the customer. `{ 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). In this example, the `default_billing` parameter is set to `true`. The street address is also different, so we can see that different addresses are being created.


Get rid of everything but adding a billing address to the cart, so the procedure is the same for guests and customers.

The shipping and billing addresses are now different. That's OK, but be sure to mention that.

ghost · 2020-11-23T17:20:22Z

Hi @dobooth, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

ghost · 2020-11-23T17:58:21Z

Hi @dobooth, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

keharper

A couple of nits, but the setShippingAddressOnCart response needs to be expanded.

keharper · 2020-11-23T17:27:21Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-customer.md

@@ -88,6 +88,11 @@ mutation {
 }
 ```

+## Add Authorization header


Suggested change

## Add Authorization header

## Specify an Authorization header

keharper · 2020-11-23T17:54:37Z

src/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-address.md


-`{ 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).
+If using a logged in customer, send the customer's authorization token in the `Authorization` parameter of the header. See [Authorization tokens]({{page.baseurl}}/graphql/authorization-tokens.html) for more information.


The response needs to include the available_shipping_methods object. Add it after the country object

available_shipping_methods{ carrier_code carrier_title method_code method_title } }

keharper · 2020-11-23T18:03:37Z

src/guides/v2.4/graphql/tutorials/checkout/checkout-shipping-method.md

@@ -22,21 +22,22 @@ The `setShippingMethodsOnCart` mutation defines the delivery methods for your or

 `{ 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).

-{:.bs-callout .bs-callout-info}
+The `carrier_code` and `method_code` values come from the results of the mutation on the previous step.


It's currently missing from the tutorial. This should link to the shipping address step

keharper · 2020-11-23T18:04:38Z

src/guides/v2.4/graphql/tutorials/checkout/checkout-shipping-method.md

-        carrier_code: "ups"
-        method_code: "GND"
+        carrier_code: "tablerate"
+          method_code: "bestway"


The alignment is off here

… db_graphql_tutorial

keharper · 2020-11-23T22:00:50Z

running tests

ghost · 2020-11-23T22:22:41Z

Hi @dobooth, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

Donald Booth and others added 6 commits October 12, 2020 15:43

Updates

6432b4d

Reworked graphql tutorial

4efe4fa

Dusting off the lint

bc2ebdb

That wasn't me.

f7d331c

Merge branch 'master' into db_graphql_tutorial

255de77

Merge branch 'db_graphql_tutorial' of github.com:magento/devdocs into…

10da0df

… db_graphql_tutorial

keharper self-assigned this Oct 16, 2020

m2-community-project bot added the Progress: review label Oct 16, 2020

keharper suggested changes Oct 20, 2020

View reviewed changes

dobooth and others added 9 commits October 23, 2020 11:50

Update src/guides/v2.3/graphql/tutorials/checkout/checkout-add-produc…

fb5fe58

…t-to-cart.md Co-authored-by: Kevin Harper <[email protected]>

Apply suggestions from code review

3feb86e

Co-authored-by: Kevin Harper <[email protected]>

Removed query per review

e34abca

Fixup per review

3660040

Code block fixup

1db53d7

Review fixups

a58057e

Reversion per review

7ff0ee1

Added link

9abc94e

Merge branch 'master' into db_graphql_tutorial

5c6f0b3

m2-community-project bot assigned dobooth Oct 23, 2020

dobooth and others added 2 commits October 23, 2020 12:17

Fix codeblock

d8e40c0

Merge branch 'master' into db_graphql_tutorial

8b64330

keharper suggested changes Oct 27, 2020

View reviewed changes

dobooth and others added 3 commits October 28, 2020 09:44

Update src/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md

68ab141

Co-authored-by: Kevin Harper <[email protected]>

Merge branch 'master' into db_graphql_tutorial

02e4b62

Updates

7f9f89e

shrielenee added the hacktoberfest-accepted label Oct 29, 2020

Donald Booth added 2 commits November 2, 2020 10:18

Updated shipping address steps

a798196

Linty

0aa8fe1

keharper reviewed Nov 3, 2020

View reviewed changes

Updated steps

d801e49

Donald Booth and others added 3 commits November 4, 2020 11:37

trailing space

d72580b

Merge branch 'master' into db_graphql_tutorial

5a1a7f3

Small tweak to coupon instructions.

359cf83

dobooth closed this Nov 23, 2020

dobooth reopened this Nov 23, 2020

m2-community-project bot removed the Progress: review label Nov 23, 2020

Merge branch 'master' into db_graphql_tutorial

29fbd91

dobooth closed this Nov 23, 2020

dobooth reopened this Nov 23, 2020

m2-community-project bot added the Progress: review label Nov 23, 2020

keharper reviewed Nov 23, 2020

View reviewed changes

Donald Booth added 2 commits November 23, 2020 16:24

Added shipping method steps.

ce62e94

Merge branch 'db_graphql_tutorial' of github.com:magento/devdocs into…

8e6dbd0

… db_graphql_tutorial

dobooth added 2.3.x Magento 2.3 related changes 2.4.x Magento 2.4.x related changes Major Update Significant original updates to existing content labels Nov 23, 2020

Update checkout-shipping-address.md

810255a

keharper approved these changes Nov 23, 2020

View reviewed changes

m2-community-project bot added Progress: approved and removed Progress: review labels Nov 23, 2020

keharper merged commit 807f1b2 into master Nov 23, 2020

m2-community-project bot added Progress: done and removed Progress: approved labels Nov 23, 2020

keharper deleted the db_graphql_tutorial branch December 1, 2020 22:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reworked GraphQL tutorial #8046

Reworked GraphQL tutorial #8046

dobooth commented Oct 14, 2020 •

edited by keharper

Loading

keharper Oct 20, 2020

dobooth Oct 23, 2020

keharper Oct 20, 2020

dobooth Oct 23, 2020

keharper Oct 20, 2020

dobooth Oct 23, 2020

keharper Oct 27, 2020

keharper Oct 27, 2020

keharper Oct 27, 2020

keharper Oct 27, 2020

dobooth Oct 28, 2020

keharper Oct 27, 2020

dobooth Oct 28, 2020

keharper Nov 3, 2020

dobooth Nov 4, 2020

keharper Nov 3, 2020

ghost commented Nov 23, 2020

ghost commented Nov 23, 2020

keharper left a comment

keharper Nov 23, 2020

keharper Nov 23, 2020

dobooth Nov 23, 2020

keharper Nov 23, 2020

dobooth Nov 23, 2020

keharper Nov 23, 2020

dobooth Nov 23, 2020

keharper commented Nov 23, 2020

ghost commented Nov 23, 2020


		The 10-step tutorial generally takes 30 minutes.
		The 10-step tutorial generally takes 30 minutes.

@@ @@ -220,17 +205,18 @@ mutation { @@
                       ]
                     }
                   }
-                }
-              }

	## Add Authorization header
	## Specify an Authorization header


		`{ 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).
		If using a logged in customer, send the customer's authorization token in the `Authorization` parameter of the header. See [Authorization tokens]({{page.baseurl}}/graphql/authorization-tokens.html) for more information.


		```text
		```graphql

Reworked GraphQL tutorial #8046

Reworked GraphQL tutorial #8046

Conversation

dobooth commented Oct 14, 2020 • edited by keharper Loading

Purpose of this pull request

Affected DevDocs pages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghost commented Nov 23, 2020

ghost commented Nov 23, 2020

keharper left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keharper commented Nov 23, 2020

ghost commented Nov 23, 2020

dobooth commented Oct 14, 2020 •

edited by keharper

Loading