Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds

User Interface Enhancement Techniques with Drupal and Ubercart 2.x

Save for later
  • 180 min read
  • 2010-03-25 00:00:00

article-image

Improving the shopping cart

Sometimes, the shopping cart is the most critical part of an electronic shop. The customer may add a lot of products in it, but if it's difficult to see its contents or to make changes, he or she will leave our store. If we improve our shopping cart, we can reduce cart abandonment and maximize our profit.

Pictured cart module

This module creates an enhanced version of the Ubercart cart block. The default version is rather basic with few options, but this module adds new and very useful functionalities:

  • It shows the images of the products.
  • It can be oriented horizontally or vertically.
  • The user can sort the contents of the cart by name, quantity, or price.
  • It shows extra content such as product description or attributes.

user-interface-enhancement-techniques-drupal-and-ubercart-2x-img-0

To install it, browse to http://drupal.org/project/uc_pic_cart_block and right after you download the module upload it and unzip it to your site's /sites/all/modules folder and go to Administer | Site building | Modules to enable it. Then go to Home | Administer | Site building | Blocks, find the block named Pictured cart block and assign it to a region. Don't forget to disable the default cart block.

user-interface-enhancement-techniques-drupal-and-ubercart-2x-img-1

To configure it, click on configure. Apart from the standard block options, you can define format and visibility settings of the cart.

Ajax Cart module

This module creates a different version of the default cart block. It uses AJAX, so when the customer adds a product to the cart, it updates its contents without reloading the page. Unfortunately, it is not compatible with the pictured cart module, so you have to select which one is better for your needs.

To install it, browse to http://drupal.org/project/uc_ajax_cart and right after you download the module, upload it and unzip it to your site's /sites/all/modules folder and go to Administer | Site building | Modules to enable it. Then go to Home | Administer | Site building | Blocks, find the block named Ubercart ajax shopping cart and assign it to a region.

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at ₹800/month. Cancel anytime

user-interface-enhancement-techniques-drupal-and-ubercart-2x-img-2

Don't forget to disable the default cart block. To configure it, click on configure. There are not only the standard block options, but format and visibility settings as well.

Terms of Service module

This is a very simple module. It just adds a terms or service text in the cart or checkout page. The customer has to accept these terms in order to proceed.

To install it, browse to http://drupal.org/project/uc_termsofservice and right after you download the module upload it and unzip it to your site's /sites/all/modules folder and go to Administer | Site building | Modules to enable it. To configure it, go to Home | Administer | Store administration | Configuration | Terms of Service. Select the page in which the terms of service will be shown, whether agreement is required, and a node that contains them, and click on Save configuration:

user-interface-enhancement-techniques-drupal-and-ubercart-2x-img-3

You also have to enable the terms and conditions agreement pane, so go to Home | Administer | Store administration | Configuration | Cart Settings | Cart Panes.