Single Page Checkout in ATG

Today as most of the e-commerce sites are focusing on how to make the user experience more smother and easier, which ultimately result in more order conversion. One of the step words making the user experience better is Single Page Checkout (SPC). Let’s see what is SPC, how can it be implemented using ATG and how will it be achieved using custom made frameworks to make the more easier and simple to develop and maintain.

What is SPC or Single Page Checkout?

It is basically make the user add the details and complete the checkout in single page instead of moving through multiple pages. As browser started supporting the AJAX functionalities, this feature is more easy to implement, as the forms are submitted using Ajax and response are handled using JavaScript .

We really do not need any OOTB support as the major change is just how we show it user and not the server side updating the data. We already have the OOTB handlers which are defined for handling Shipping, Billing, payment and order confirmation. It is our designing skills, how do we use them to achieve the same, as till now the most of the JSPs will be customized as per requirement.

How SPC can be implemented using ATG?

                The whole functionality can be divided into Ajax Form submission using JavaScript, Handling the request and perform the validation and biz operations & response which can be xml or json which will be used by the java script to display.

Let’s have a look at different sub functionalist involved:

Ajax Form submission using JavaScript: We have lot of JavaScript framework which provides the OOTB APIs for Ajax form submission and render the response like JQuery. It basically have event listener for the submit button click and serialize the form and submit it using Ajax feature, it also provide a call back functions to perform the action once receiving the successfully (HTML status as 200) response.

Form Handlers: We have the OOTB from handlers like shippingGroupFormHandlers, billingFormHandlers and paymentGroupFromHandlers can be used to perform the validation and Biz logic for updating the order with respect to users input data. It will be work as we used them in multiple page checkout system.

JSP & Droplets: The response will be generated using JSPs and droplets. It can be in various formats like HTML, Json & XML.

Different Issue and possible solution or designs

                When we work with the checkout, one of the major issues is various checkout flows and handling them in SPC is added issue, as JSP is not refreshed and till the whole checkout journey is completed. We handle the flow in the form handlers, but as seen above we have different from handler coming in to perform different task at various level of the checkout journey. Adding the code in form handler to decide the next action/form in form handler will spend the code across and make the modification and maintains of the code more difficult.

It is good to have the whole logic at once place to decide the status of order & the next action/ form which is to be populated to user. It can be achieved by combination of the 2 simple components of ATG, JSP and Droplet.

We can create a JSP to which all the request will be made, and form may be submitted to different from handlers. So the control will first come to one of the form handlers, after that the JSP will be involved, where JSP will call the Droplet. Droplet will go through various data check to decide which all oparam will be involved to generate the respective section and forms.