Due to HTML5 input validation, we cannot go back from Order Information to Login to decide to login as an existing user.

When clicking "Login" it throws a validation error because the required fields are empty. Perhaps we need to add a JavaScript event listener which, on click of the "back button" marks the fields as "not required".

CommentFileSizeAuthor
Screen Shot 2016-06-13 at 11.29.26 AM.png165.01 KBmglaman

Comments

mglaman created an issue. See original summary.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

The resolution here is: The "back" button needs to actually be a link, and after the primary button to continue.

rszrama’s picture

rszrama commented

As another option, we could use the formnovalidate attribute on "Cancel" and "Back" submit buttons:

http://www.w3schools.com/tags/att_input_formnovalidate.asp

This is likely more important for "Cancel" than "Back", but I can imagine scenarios where sites may want to alter behaviors onto even the submission of a Back button in checkout.

bojanz’s picture

bojanz commented
Title: Cannot go back from order information to login during checkout » Convert the checkout back button to a link
Status: Active » Needs review

The primary reason for the #2 decision was checkout UX, saw the button styled as a link on most nice checkouts, including Shopify.

Today I caught more bugs due to this being a button. Payment methods were being created on "back", and Braintree was even submitting the wrong button (going back instead of forward). I could have added individual fixes for both issues, but by doing this issue we fix all of them at once. Plus, we save a bit on performance, cause we no longer resave the order when going back.

That means that Ryan's use case in #3 stays unsolved for now, but we can address that at a later date with a checkout router event.

PR up at https://github.com/drupalcommerce/commerce/pull/590, waiting on tests.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

This causes issues with the current checkout access. We are expecting the checkout flow to have adjusted the saved order step on submission of the form.

Unless we modified that work to allow going backwards one step manually?

Edit: unless there was a specific back route which did this and allowed any processing, like firing an event

bojanz’s picture

bojanz commented

This causes issues with the current checkout access. We are expecting the checkout flow to have adjusted the saved order step on submission of the form.

Why would it? Checkout access always allows steps previous to the current one.

The way I see it, leaving the checkout step as is makes sense. Let's say I'm on the review page, then I decide to go back to order information and take a peek at my info, but if I don't save anything, my last checkpoint is still the review page.

  • bojanz committed c349937 on 8.x-2.x 
    Issue #2747857: Convert the checkout back button to a link
bojanz’s picture

bojanz commented
Status: Needs review » Fixed

The build passed, committed.

A nice thing about this change is that it allows people to make the checkout progress steps clickable, there's now no difference between the two ways of going back. And the checkout flow and the checkout router can still perform any needed logic when the previous step is reached.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.