Feature Spotlight: AJAX Add to Basket

29 April 2011

One aspect of our shopping cart that we’ve always been happy with is its speed and responsiveness. Shoppers experience minimal loading times and never have to wait to buy products. That naturally translates to better search engine rankings, increased sales and conversions and greater customer satisfaction. It’s also a boon to impulse buying: want to order a bottle of Chianti for the weekend? With fast loading times and the recently released one page checkout, it only takes three clicks to get from the product page to ‘order confirmed!’.

A major factor in that responsiveness is how we deliver the content on your store. NitroSell uses a world-leading content delivery network (CDN) to transfer every product image, client-side script and stylesheet to your shoppers at lightning speeds. Another factor is perception. If the user interface (UI) on the shopping cart responds to every interaction without delay, the customer is more likely to buy.

With that in mind, we’ve released a significant upgrade to our add to cart button to the beta version. Prior to this update, when adding to the cart, you’d be automatically redirected to the basket page and you’d have to click continue shopping to get back to where you were on the store.

By enabling this update, add to cart requests are sent using AJAX.

(The technical bit: AJAX is a web technology used to send requests in the background, so that user interactions can be processed without having to refresh the page or redirect you to a new page. AJAX is already used extensively on the NitroSell eCommerce shopping cart for features like one step checkout and the gift registry.)

The net effect is:

  1. When you click add to cart, the shopping cart panel shows a very brief loading animation (blink and you’ll miss it!):
    AJAX add to shopping cart -- shopping cart loading
  2. A small notification is popped up in the bottom right of the browser window:AJAX add to shopping cart -- item added notification
  3. And the cart panel is automatically updated showing the new item:

To enable it, if you’re already on the beta version, login to your WebStore Manager, and tick on the following configuration option under the Display section:

If your store template has been heavily customized, the services team may need to assist in deploying it for you.

This feature is very much about the user experience (UX), so it’s best demonstrated by trying it out on a live store. We hope you like it!