Solutions for Magento E-Commerce Platform
This is the last part of the long tutorial on the Magento checkout customization. here, I will describe the last checkout section “Order Review” and explain how the OneStep checkout link can be added to the Magento front-end.
Previous parts of this tutorial are: Part 1: Introducing OneStep Checkout, Part 2: Starting with the OneStep Checkout JavaScript, Part3: Deeper into the Checkout Sections.
Continue reading
In the third part of the Magento OneStep checkout tutorial I will continue describing the JavaScript and controller functionality of the OneStep checkout sections. See also the parts one and two.
If you are impatient, you can download the finished extension from GitHub Solvingmagento_OneStepCheckout now. A demo shop with a working OneStep checkout can be found here.
Continue reading
This is the second part of the Magento OneStep Checkout tutorial. In the first part, I’ve discussed the objective and challenges of the tutorial and laid the foundation for the new checkout extension. Next, I will describe the JavaScript component of the OneStep checkout and give more details on the controller functionality.
Continue reading
In this tutorial, I will demonstrate an extension that adds a OneStep checkout to Magento. In my earlier post Magento OnePage Checkout, I’ve explained the ideas behind different checkout types. In short, the checkout process is usually broken into steps, and in each step customers must provide a certain part of the checkout data. Despite the wide use of the step-by-step checkout, many online retailers find it too cumbersome for customers – especially the part where the browser has to load a new URL for each step. A different approach is the OnePage checkout such as the one implemented in Magento where all steps a brought under a single URL. The checkout shows only one step at a time and uses Ajax requests to switch between steps and refresh the checkout state without browser reloading the page. The process, however, retains its step character: customers must fill out all steps separately and in a specific order.
The OneStep approach is a further simplification of the checkout process: all step forms are shown at once and customers no longer need to submit each step individually. But, there is a catch: the customer must fill out the entire checkout form in one go. If you take all the fields of the Magento OnePage checkout and display them all in one step, they will make a long and intimidating form. Not only that might scare some buyers off, but implementing the dependencies between fields (e.g., shipping methods depending on the delivery destination) would be even more challenging. This is the exact opposite of a simple and transparent process that the OneStep checkout aims to achieve. For these reasons the use of the OneStep checkout is confined to special cases where the checkout process doesn’t need much information from customers. One such example could be a shop selling downloads which need no physical shipping and no fields for a shipping address and shipping methods are necessary. In this case, the checkout form is short: customer billing address, payment method, order overview – and ideal premise for a OneStep checkout.
In my extension I will not restrict myself to any specific scenario; instead, I will attempt to build a OneStep checkout as a replacement to the fully fledged Magento OnePage checkout. The necessary compromises may result in a checkout that is in some parameters less satisfactory than a production use would require – but, this I leave to you to judge.
This is a very long tutorial that spans several posts and consists of 12 steps. If you are impatient, you can download the finished extension from GitHub Solvingmagento_OneStepCheckout now. A demo shop with a working OneStep checkout can be found here.
Other parts of this tutorial are: Part 2: Starting with the OneStep Checkout JavaScript, Part3: Deeper into the Checkout Sections, Part4: Order Review.
Continue reading
This is part 3 of the One Page checkout discussion. Previous parts are: Magento One Page Checkout Part 1 and OnePage Checkout Part 2: Model, Views, Controller.
The distinct feature of One Page checkout is that the checkout process can be completed without the browser having to request and load every step in a new page. Instead, One Page checkout uses JavaScript to control the navigation between steps, the steps visibility and availability. This JavaScript layer is also responsible for submitting step data to the checkout controller and interpreting controller responses to update the content of the checkout steps. You can find the JavaScript code used by One Page checkout in the following files:
This is part 2 of the One Page checkout discussion. You can find more about this checkout type in the Magento OnePage Checkout Part 1 and Magento OnePage Checkout Part 3: JavaScript.
The checkout process described above requires a rather complex system to validate and save data, resolve step dependencies, render and update step forms. Magento implements it in an MVC pattern. First, there is a checkout model containing business logic to process steps (Mage_Checkout_Model_Type_Onepage). Then, there are views – blocks and templates to render steps. Finally, there is a controller (Mage_Checkout_OnepageController) to deal with requests posting and fetching step data. Keeping this design pattern in mind, I will describe the components of One Page checkout in the following sections:
It is hard to overstate the importance of the checkout. You can’t have a web shop without a checkout – it is where customers exchange money for goods and services, which is, basically, the whole purpose of a shop. Checkout is the most sensitive stage of online shopping because there customers have to trust the merchant with their money and personal data. At the same time checkout is often a very frustrating experience: to submit an order customers must provide detailed address and payment information using long forms with many fields to fill out. Add to that dependencies between fields and validation rules, and there is no wonder that some people may become annoyed and quit in the process.
The most common way to solve the problem with the checkout data collection is to break it into steps – in each step a customer provides only a portion of the required data. Dealing with one part of data at a time is also beneficial for the checkout software – validation rules and dependencies between data (e.g. some shipping carriers are available only for certain destinations) can be better defined and made transparent to customers. Customers progressing through the checkout step by step get a feeing of being in control which results in a better shopping experience.
Online retailers strive to make the checkout as unobtrusive and intuitive to customers as possible. This quest for the perfect checkout had produced the following approaches:
Core Magento implements two of these types: One Page and Step-by-Step. One Page checkout is enabled right after Magento is installed and can be used for any product type. I will describe the One Page checkout process and its components in details in this chapter.
Multishipping checkout is a Step-by-Step type and allows customers to send orders to multiple addresses. The properties and limitations of this checkout are discussed in a separate chapter: Magento Multishipping Checkout.
Continue reading
Multishipping checkout, as its name suggests, offers a possibility to order products to different shipping addresses. To use Multishipping checkout you must enable it in the back-end configuration at System > Configuration > Sales > Shipping Settings > Options > Allow Shipping to Multiple Addresses.
Multishipping checkout availability may also depend on some other factors:
Multishipping checkout is not available to guests. Also, new customers must register (and provide an address) before using Multishipping, which is different from Onepage checkout where new customers can choose to create an account after going through the checkout and submitting an order.