ShoppingCart part II

By Eugenia Pérez | 6 August, 2013

After having the listing in place and the search functionality as well, the next step a ShoppingCart app has to face is to show the details of each product when the user clicks on them. Given we’re trying to concentrate our side on a single-page we cannot follow the traditional approach of redirecting the user to a new page passing some parameter in the request that identifies the product. Instead and taking advantage of the fact we’re already have this information in a variable, we can just search for that product in our array of products and display it in the same area of the page than the listing replacing the DOM element which sits in the middle of the page.

A similar approach can be used to update the shopping basket when the user clicks on each by button.

The main drawback we will have to deal with is the following: what will happend when the user suddenly refreshes his browser? As you probably know we will lose all the information stored in our javascript variables. And then the app will look like the very first time the user launched on the page. We cannot use the session object to maintain the status because we have no server code behind. Therefore we need to use some client-side logic to save what the user has done until the moment. A solution can be using a cookie to store the products the user has in his basket and some user information. At the end of the day, there is not much information to save so the cookie will not run the risk of becoming unmanageable.

So this is the final result of the app, including some fancy effects using jquery ui and bootstrap:

The next step will be seeing how our app behaves and how flexible and extensible is trying to replace our API with a third-party one such as ebay or Amazon.

By the way, surely you’ve noticed the first sentence of the description of the Symfony book. It is so basically descriptive that should be stuck to any stubborn programmer  head every time he gets up very early in the morning.

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Leave a Reply

Your email address will not be published.