Ajax-ifying a Shopping Cart
By adding a layer of Ajax to standard shopping cart functionality, you can make an e-commerce site easier to use and, most importantly, more profitable. Besides being a snazzy touch, Ajax means that a site’s users don’t need to leave the current page in order to do many common tasks. From an e-commerce perspective, this means that Ajax can better keep the customer “in the moment,” continuing to shop.
Getting Started
Before doing any coding, it’s necessary to identify the goals. For the purposes of this article, the aim is to take common shopping cart functionality and make it work via Ajax (while still functioning the old fashioned way for those with JavaScript disabled). For a shopping cart, there are only three actions:
- Adding an item to the cart
- Updating the quantity of an item in the cart
- Removing an item from the cart
For the purposes of keeping the customer shopping, it’s really just the first action that’s problematic. Presumably the other actions take place on a “View Cart” page already. So in this article, I’ll explain how to “Ajax-ify” your “Add to Cart” buttons and links.