How to develop a cutting-edge Shopping Cart v0.2

By | 1 August, 2013

This is the very first prototype of a proof of concept website I’m working on at the moment. The goal I’m trying to achieve here is to play around client-side rendering and processing of the data. In other words, doing as much as I can with javascript. So this is a light way side with no server-side code behind.  The data is coming from a PHP API which is using a MySQL database. However, this datasource can be changed tomorrow for another one such as a third-party API like Amazon or eBay.

Regarding I’m not using server-side code I have to use a workaround to get and display data from a different domain using an AJAX call. This is because the well-known cross-site scripting policy. To overcome this, a popular solution that many APIs are using today is to return the data in jsonp format.

The following screenshot shows a list of products coming from my own API and render via AJAX.

That was the easy part. Now we need to find a way to have different views with different data without any code behind the scenes. To build up a product detail view we cannot use the traditional approach of creating a new page which receives the ID of the product to show. However what we can do is to take advantadge of the already existent data we have stored in the first step. If we have retrieved all the products in the first step why do we need to do another call to the API to get specific product? We can just read our array of data and search for the one we’re interested in. Then just show it reloading the container we were using before for the listing.

The next step is to try to do the search in the same way. The reason is that the current trend drives us to move as much logic as we can to the client. The goal is to improve the user experience and the responsive of the page. This is why more and more javascripts frameworks suchs us Knockout, Backbone, Angular, etc are turning into real and valuable alternatives to build websites and make the most of them.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Leave a Reply

Your email address will not be published.