Blog

The Fastest Checkout System for Zen Cart

The next generation of Fast and Easy Checkout has been completed in the form of Fast and Easy Ajax Checkout for Zen Cart, the versatile and easy to customize checkout system that uses Ajax to both please and assist customers with completing their online purchases on stores using the Zen Cart ecommerce platform. This short introduction to the module describes many of the features and benefits of FEAC and provides a walk-through of a live demonstration of the module.

Features

Fast and Easy Ajax Checkout has many of the same features as Fast and Easy Checkout, but with the addition of Ajax to both make the module a smoother and more user-friendly checkout system. Below is a list of the main features:

  • One page checkout AND registration/login page using Ajax
    • A complete one-page checkout system, including login and registration
  • Integrated checkout without account
    • With the click of a button, the registration form is transformed by Ajax into a form specifically for customers who do not want to create an account.
  • All features are controlled from the admin configuration menu
  • Shipping address on registration with copy billing to shipping checkbox
    • The shipping address form allows customers to define an alternate address to their billing address for the shipment of their order. The customer can also declare that their billing and shipping addresses are the same.
  • Confirm email
    • To avoid customer typos when registering, this feature will force the customer to re-type their email address and compare it to the original to make sure they are identical.
  • Shop with Confidence Box
    • A static area of the login and registration screen where images and text can be added by the store admin to strengthen customer confidence in the store before proceeding to complete their transaction.
  • Easy to customize
    • Everything is controlled by CSS which makes it very easy to customize and control the look of the checkout system.
    • The colors of the page block messages can be controlled from within the admin using hex color codes (i.e. #000000 for black).

Benefits

So what do these features mean for your customers?

  • A faster checkout experience
    • Ajax is used to post from the client to the server without having to reload the entire page in the browser
  • Better browser compatibility
    • FEAC has been tested on IE6, IE7, IE8, FireFox, Opera, AOL Explorer, Chrome, and Safari
    • For IE6 and earlier browsers, the Ajax post function is replaced with page submits to avoid errors. However, other JavaScript effects such as page blocking (see the demo) and dynamic form fields are still used.
    • If JavaScript is disabled or not functioning properly, the form will submit normally and customers can still checkout. Of course, none of the nice effects will occur without JavaScript enabled in the browser. Fortunately, over 95% of all visitors have JavaScript enabled (W3C Browser Statistics).
  • Improved shopping experience
    • JavaScript is used throughout the checkout system in order to easily modify the page based on user’s selections as well as to notify customers about what is occurring. For example, whenever the customer makes a change that requires and Ajax post to the server, a processing message is displayed and then removed once the action has completed. This feature also prohibits users from making common errors such as submitting their checkout twice as clicking is disabled while the form is submitting.
  • Higher conversion rates and increased sales!
    • All of the above features and benefits will result in more customers completing their purchases and thus a higher conversion rate will be achieved with the same amount of traffic to your website.

Walkthrough

Alright, so enough with describing the module, let’s see it in action. Please visit the Fast and Easy Ajax Checkout Development Site (https://www.numinix.com/development/fec2/).

We’ve created the following default installation of Zen Cart with a width of 960px as opposed to the smaller default width. However, FEAC was written using scalable CSS and will fit with any website.

Begin by adding a product to your shopping cart and proceeding to the checkout. Immediately you’ll notice a key layout difference between FEAC and FEC is the three-column layout rather than the traditional two-column layout. The first screen you’ll see is the login and registration screen. The first column is for switching (click the large continue button) between the checkout without an account form and the regular registration form. Below that is the login form. And below that is the optional “Shop With Confidence” box. The middle column is the billing address and contact details form with a checkbox labelled “My Shipping and Billing Addresses are the same.” Clicking this box will cause the Shipping Address form (third column) to be activated or blocked. Both this checkbox and the availability of the Shipping Address form will depend on the type of products added to the cart. If only virtual products (products that do not need to be shipped) are added to the cart, the third column will be automatically disabled. If you only sell virtual products, like us at Numinix, you can completely disable this functionality and use only a two-column layout (see https://www.numinix.com). Before you fill out the form to register your account, try hitting either “login” or “submit” buttons and an error message will either display at the top of the page (deliberately position in front of the page contents to not disrupt other page elements when it automatically disappears) or a custom styled alert box will pop-up in the middle of the page.

After you’ve registered, proceeded without creating a permanent account, or logged into your existing account, the page will be blocked (if JavaScript is on) and a “processing” message will be displayed before a new screen is displayed with the shipping and payment selection forms. Notice that the page did not reload, only the content area between the header and footer actually changed. On this new screen is either a two or three-column layout depending on whether the items in the cart need to be shipped. The three columns are the Shipping Method, Payment Method, and Order Details. Whenever a new shipping selection is made, the page is blocked for “processing” and then the Order Details section is updated with the new selection. In the Payment Method column the user can select which payment method they would like to use. Finally, the Order Details column is where any selection changes made by the customer are updated. Also in this column is where all of the Order Total modules such as Discount Coupons and Gift Vouchers are displayed. For the purpose of testing the coupon module, please use the coupon code “TEST.”

Finally, click the “Confirm Order” button and the checkout system will either process the order or redirect the customer to a payment processor like PayPal or merchant credit card gateway. In the admin configuration menu, you can disable the one-page checkout feature and force a third screen to be displayed called Checkout Confirmation which also features a simple three column layout. If you disable JavaScript at this stage, FEAC will display this confirmation page.

Real World Example – HOMAGE Clothing

Viewing our module inside our demonstration environment is a great way to see all of the features, but how does the module hold up on a live website? One of our long-time clients, Ryan Vesler of HOMAGE Clothing (http://www.homageclothing.com), was one of the first stores to go live with the FEAC system and has graciously volunteered to allow us to permit our customers to view the live site and customized checkout system. HOMAGE Clothing is using a special optional feature of FEAC which forces all customers to checkout without creating a permanent account. The benefit of such a system is that there is less stress of customers having to always remember their password, and is a faster shopping experience on a one-time purchase basis as the form is shortened to do away with any fields required for managing an account. As this is a live store, please be respectful when going through the checkout system. If you like anything, please use the coupon code “NUMINIX” to save an additional 20% off your order. HOMAGE only sells the highest quality shirts. I should know as I’ve bought four!

I hope you’ve enjoyed this summary of the Fast and Easy Ajax Checkout system and its possible benefits to your own business. With the release of modules like FEAC, Numinix continues to work hard every day to provide the best free and paid modules for Zen Cart. Thank you for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *

    Get quote Live
    Chat