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.
