The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Way to make checkout page errors appear next to fields?

According to an OUTSTANDING article highlighting some recommendations for making checkout pages more effective (see http://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/) having error messages appear next to the fields that they apply to (rather than elsewhere on the page as at the top) is far more effective in helping users relate the messages (if they even see them) to the field that needs correction.

Is there a way to easily change the default behaviour of FoxyCart's checkout page to have that happen? Presently error messages appear at the top of the page when there is an error.

Carlos

Comments
  • brettbrett FoxyCart Team
    Hi @carlos123. That article is one of many that we referenced when designing our v2.0 default templates. Most field-specific errors do show next to the fields, but I'm assuming you're talking about "hard" errors, after the form is fully submitted?

    In that case, those errors are typically from the gateway (or other server-side 3rd party integrations like a fraud service). Those errors can vary tremendously, from a problem with the card itself (ie. card is bad, try a whole new card; expiration dates are off; security code is wrong) to the address to a gateway account configuration problem to a FoxyCart-specific issue like expired products or other error on our end (though those are more rare).

    So in those cases, it's much (much) more difficult to figure out where an error should be placed.

    Is that what you're after? Do you have specific errors you'd like to account for, or just thinking about it in the abstract?
  • Hi Brett,

    Thanks for the input. That's interesting that you referred to the same article as there are a number of descrepencies between its recommendations and the 2.0 checkout but...whatever the case may or may not be in that regard...

    I was asking with a view to changing the default foxycart behavior at some point.

    All errors presently appear in a red bar at the top of the checkout page (such as when I don't fill in a required field for example). I am not sure what you are referring to when you say they appear next to fields.

    Is there some setting I need to change?

    Carlos
  • fc_adamfc_adam FoxyCart Team
    @carlos123,

    Thanks for clarifying. I believe you're referring to fields like the first and last name, and those types of fields, is that correct?

    We indeed don't have inline error messages for every instance of each field. For simple required fields that aren't filled in, we display a clear red colouring to the field, and the error bar that floats at the top of the visible screen also notes how many fields are in error. Clicking on the error bar also changes the focus to the highest field in error. We believe that clearly shows to the customer the field(s) that are needing their attention and because they're empty - that they need to enter something into them.

    For errors that require more explanation though - such as an invalid email address, an invalid credit card number formatting or if the postcode lookup fails for example, we do display an inline error in that instance along with the highlighting I mentioned above.

    If you wanted to explicitly include an error message for all of the simply required fields as well, you'll need to edit the checkout template to include those errors. As an example of that - adding it in for the first name field (note that you'd need to embed the address include within the checkout template to do - which we also discussed in your other thread), you could include this after the field:
    <div class="fc-alert fc-alert--danger {{ error_string ? 'show' : 'hidden' }}" data-fc-error-for="{{ field_name }}" data-fc-error-class="show,hidden">
    This field is required.
    </div>
    A few quick things to note:
    {{ error_string }} is defined in the twig logic for the field - you'll see it at the top of the twig code for a given field. For required field errors, that value is blank though - so you'd need to explicitly set the error message.
    {{ field_name }} is something that's specific to the address fields - you'll need to ensure the data-fc-error-for matches the name of whatever field it's associated to.
    data-fc-error-class="show,hidden" sets what the classes are dynamically changed to as the form is interacted with - and the conditional statement within the class sets the correct class on page load.
  • Excellent input as always Adam. Thanks!

    Carlos
Sign In or Register to comment.