Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Ajax-ifying a Shopping Cart

  • Print
  • + Share This
The success of any website is affected by, among many things, the ease with which a visitor can use it. With e-commerce sites in particular, where sales can quickly be lost on account of the slightest impediment, streamlining the shopping experience can directly result in more income. In this article, Larry Ullman walks you through the steps for “Ajax-ifying”—adding Ajax to—an e-commerce site’s shopping cart.
From the author of

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.

  • + Share This
  • 🔖 Save To Your Account