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.
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.