Make It Easy for Your Customers to Buy With a Refined Shopping Cart.

The key to successful e-commerce selling is effectively moving your customers on to the first step of the buying process: adding items to the shopping basket.

The goal is to make it as easy as possible for the customer to create their desired basket - with the minimum number of clicks and as few page-loads as possible.

Below, we're taking a quick look at the osCommerce e-commerce store, outlining some improvements we can make to streamline the customer shopping basket experience.

Add to Basket.

The first page we look at is the most important - the product page. In the image below we can see a typical product information page, with pricing and availability located in a box to the right of the screen.

We've added a quantity drop-down field where customers can pre-select the quantity of an item required, and a highly visible "Add to Basket" button.

With a default osCommerce installation clicking the "add to basket" button will redirect the customer to the shopping basket page, or reload the product page, showing the updated basket information.

When adding an item to the basket, we'd like our customer to remain in the section of the site they're in. Also, we want to avoid unnecessary page loads - so we use a JavaScript (AJAX) request to:

  • Add the desired quantity of the product to the shopping basket
  • Update the "basket information" info-box in the right column with the new basket details
  • Display a "product added" confirmation message to the customer at the top of the screen

The customer can see the basket has been updated, and a prominent link to the shopping basket page is displayed in the right column. The customer is free to continue browsing the products in this section, or can choose to click through to the basket to complete checkout.

Managing the Basket.

One of the weaknesses of the default osCommerce basket is the required click of the "update basket" button to perform actions (change quantity, remove item) on the basket contents.

Each page reload slows the checkout process down considerably, and can lead to confusion - often customers will change the "quantity" value then click "checkout" without clicking "update" - only to find their quantity changes haven't been recognised on the next screen.

Again, we can use AJAX on these page to smooth out these issues.

Firstly, changing the quantity of a product line in the basket (Qty) will automatically update the product line total, and the basket sub-total.

Clicking the "remove" check-box will instantly remove the product from the cart, and re-calculate the totals.

Adjusting items in the cart will automatically update the basket info-box in the right column, to prevent any confusion.

The end result is a shopping basket that feels "live", and is fast and fool-proof to use.

When JavaScript is Disabled.

As these new features are reliant on JavaScript being present in a customers browser, we need to make a few additional tweaks to make the site play nice when JavaScript is not available.

Firstly, the "add to basket" button on the product page; we've removed the default "form input" button, and replaced it with a regular image and link. When JavaScript isn't available the default link will be triggered, adding the product to the shopping basket and redirecting to the basket page.

On the shopping basket page, where we load the entire basket using JavaScript - we include the default osCommerce basket in <NOSCRIPT> tags - so visitors without JavaScript will see the default osCommerce basket.

Programmers - Want to Give This a Try?

We've put the basic shopping basket files online below, with support for basic payment and shipping modules. You will need to be familiar with PHP programming and osCommerce to set this up. Back up your files before attempting installation, and be sure test on a non-live version of your store!

Download (osCommerce-2.2rc2):

Store Owners - Want a Streamlined Shopping Basket for Your Store?

We have extensive knowledge of many e-commerce platforms including osCommerce, Magento and ZenCart. If you're running a store that could benefit from an updated shopping basket process get in touch and we'll do all we can to help.