Confusing "continue" button in checkout step 1?

RolfRolf Member
in Help edited March 2012
I'm not entirely sure what the continue button is for when I see the checkout page (for the first time).
I mean, I see an e-mail input at the top with (perhaps) the radios for guest or account and see input fields below for step 2.
So with pressing continue do I expect (as customer) to jump to step 2? I could also click right into the fields at step 2? ...continue to what?

When the button is pressed it checks the e-mail for existing user data. So maybe, the button should be labeled "Check account" or "Login" or something. If you click the radio for "create an account" the pwd fields show up, but then if you click "checkout as guest" the button disappears.... so again, confusing... not?

If the continue button is still there when you checked "create an account" do I need to press the continue button after I entered passwords, to go to step 2, or should I just go to the input fields under step 2 myself... if it's confusing to me as a dev, isn't it confusing for a non experienced customer too?

Cheerio!
Comments
  • fc_adamfc_adam FoxyCart Team
    @Rolf,

    Thanks for your feedback, that's some great thoughts there. The 'continue' wording probably made more sense in a previous version of FoxyCart when only step 1 was shown to the customers initially and after successfully logging in the rest of the checkout would be displayed.

    Essentially, the button is there as a way to manually trigger an email/password validation. It should also be performed after a user tabs/clicks out of the field as well, so it's a bit of a safety net as well.

    That said, we're looking to clean up and rework the javascript on the checkout in an upcoming version, so this is definitely something we will look at as part of that.

    Also worth noting, you could easily change or remove the image used for that button and make it whatever you think would make sense for your customers.

    Thanks again for the feedback - definitely appreciated.
  • foxykevinfoxykevin Member, FoxyCart Team
    @Rolf, I agree, this is definitely confusing for the user. In the newer flow we're opting to display the email field alone, and do the account check on blur of the field. Then, only if they already have an account, we show the sign in button and the password field. It would take a bit of JS hackery at this point to pull that off, but that's where we're headed. I'd love to hear other ideas as well.
  • RolfRolf Member
    Yes, since everything is using JS anyway I think it's save to rely on blur for the check.
    Then if no data is present the page could ask to either save details and register as a customer or to proceed as guest (if allowed).

    Or step 1 should be separated in 3 options (blocks/divs): Returning customer, New customer, Checkout as guest. With the appropriate little bit of info and/or fields/buttons that show & hide if needed.

    At the moment it's not on the top of my priority list to hack some things in the current version, I just tested out the page for the first time really when messing with the css. I probably change the text first to make it a bit more clear, but we'll see.... :)
  • nickffnickff Member
    edited May 2012
    I have a client who is looking to do some of what you guys are saying; namely, hide steps 2,3,4 until after entering an email into step 1 (and potentially waiting until both an email and password are entered when updating account information).

    Would anyone be able to provide some thoughts on how to accomplish this with the current version of FC? Perhaps some sample javascript based on the FC function that is triggered when an email is entered? Or at least a good place to start looking?

    I could see this as solving a fairly confusing area of the current checkout process. Let me know!
  • nickffnickff Member
    @fc_adam,

    Worked like a charm! Thanks so much.
  • nickffnickff Member
    edited June 2012
    @fc_adam,

    One follow-up question:
    In order to hide steps 2-4 until after a password is inserted, but only when updating an account, I was thinking of first wrapping things with this:
    if(FC.checkout.config.isUpdateCustomer){}
    

    Where the "else" for the above "if" would be the code from the sample.

    Then, when that "if" resolves to true and someone is indeed updating, I would like to hide steps 2-4 until a password has also been entered.

    Would that be done like so?

    change this:
    if (jQuery("#customer_id").val() != "0") {
    

    to this:
    if (jQuery("#customer_id").val() && jQuery("#customer_password").val() != "0") {
    

    Let me know if that's clear and if you think it will work!
  • fc_adamfc_adam FoxyCart Team
    @nickff,

    You should be able to set that type of approach up, but you'll obviously want to give it some decent testing to make sure it's working correctly - especially as if it doesn't, your customers just won't be able to check out.

    To clarify though, you're wanting to hide everything from all customers, and if they're updating their account info, also hide it until they successfully logged in?
  • nickffnickff Member
    edited June 2012
    @fc_adam,

    Sounds good on the testing.

    And no, I'm looking to do it as the sample had it for the checkout process (hide 2-4 until email is entered), but when updating account info, I'm looking to hide 2-4 until both email and password are entered.

    Make sense?
  • fc_adamfc_adam FoxyCart Team
    @nickff,

    Sorry, yeah that's what I meant :)

    I'll have a look at this and try to get back to you in the next couple days.
  • nickffnickff Member
    @fc_adam,

    Awesome. Thanks so much!
  • fc_adamfc_adam FoxyCart Team
    @nickff,

    Give this a try. I haven't tested this though, so there may be something awry, but it should work: http://pastie.org/4035700
  • nickffnickff Member
    @fc_adam,

    That works flawlessly for the checkout process, hiding 2-4 until password is entered if you have an account and are looking to sign in. Awesome.

    For the update account page, it still seems to show 2-4 as soon as an email is entered, and I was hoping to hide the steps until a password is entered.

    Let me know what might need tweaking for this to happen. Thanks adam!
  • fc_adamfc_adam FoxyCart Team
    @nickff,

    This should get us over the line: http://pastie.org/4037813
  • nickffnickff Member
    @fc_adam,

    Brilliant. Works perfectly.

    I just might need to integrate this across all of our sites. I think it makes the checkout/update account flow extremely clear.

    Thanks so much Adam!!
Sign In or Register to comment.