Solving Magento

Solutions for Magento E-Commerce Platform

by Oleg Ishenko

OneStep Checkout – A Magento Tutorial, Part 4 (Steps 11 and 12)

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

OneStep Checkout – A Magento Tutorial, Part 3 (Steps 8 – 10 of 12)

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

OneStep Checkout – A Magento Tutorial, Part 2 (Steps 5 – 7 of 12)

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

OneStep Checkout – A Magento Tutorial, Part 1 (Steps 1 – 4 of 12)

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

Magento OnePage Checkout Part 3: JavaScript

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.

One Page Checkout JavaScript Layer

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:

  • /js/varien/accordion.js – contains a JavaScript class that combines checkout steps into an accordion-like object.
  • /skin/frontend/base/default/js/opcheckout.js – contains JavaScript classes representing individual checkout steps and the checkout as a whole. Note that this file is located in the skin folder – it is possible to have different One Page JavaScript for different skins.

Continue reading

Magento OnePage Checkout Part 2: Model, Views, Controller

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.

Checkout Components

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:

  • Checkout session model
  • One Page checkout model and controller.
  • Checkout layout and templates
  • JavaScript layer

Continue reading

Magento OnePage Checkout Part 1

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:

  • Step-by-Step Checkout – the checkout stages (addresses, shipping methods, payment information, order review) are separated. Each step has its own form that the customer must fill out and submit before moving to the next stage. The advantage of this method is that it can be implemented without JavaScript and can be used in cases where JavaScript is not available.
  • One Page Checkout – steps are accommodated in a single page under one URL where they are put into individual tabs. The navigation between tabs and the updating of the tabs’ content happen without reloading the page – Ajax requests handle the data exchange in the background. The biggest advantage of this method is that customers get a feeling that all their data are there in one place, and in the same time there is no endless list of input fields – generally, only the active step is shown while others remain hidden in the closed tabs.
  • One Step Checkout – all steps are in one page, their input fields grouped in fieldsets but, unlike the one page checkout, all forms are visible. This approach is most advantageous when the number of fields to fill isn’t that great and breaking the process into steps makes little sense, for example, when your shop doesn’t need a shipping address and shipping method (selling downloads).
  • One Click Checkout – this approach made famous by Amazon enables customers to buy goods with a single click. This method is possible only for customers who have an account in the shop with valid address and payment information that they let the merchant use as the default checkout data. The variations of the One Click checkout may have different names (e.g., “Express Checkout” or “Express Lane”) but they have one thing in common – using existing customer account data and skipping one or more steps. This way they relieve customers from a burden of typing it all in and reduce chances of them jumping off in the process.

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

Magento Multishipping Checkout

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_enable

Figure 1. Enabling Multishipping checkout.

Multishipping checkout availability may also depend on some other factors:

  • Minimum order amount. You can control the minimum order amount using options found at System > Configuration > Sales > Minimum Order Amount. If you set Validate Each Address Separately in Multi-address Checkout to yes the system will check each address for minimum amount separately, which means that the total for each address must be greater than or equal to the pre-set minimum order amount.
  • Physical products. Multshipping checkout is about delivery to real addresses and requires at least one valid physical item. Downloadable or virtual products need no shipping addresses and are irrelevant for Multishipping. Note that if there is a composite product whose children can be shipped separately, they are counted separately as well.
  • No nominal items. Nominal items are related to recurring profiles and are irrelevant for Multishipping, therefore a multishipping quote must not contain non-virtual nominal items.

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.

Continue reading

Theme: Esquire by Matthew Buchanan.