User Interface Enhancement Techniques with Drupal and Ubercart 2.x

0
79
3 min read

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.

Drupal E-commerce with Ubercart 2.x

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.

Drupal E-commerce with Ubercart 2.x

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.

Drupal E-commerce with Ubercart 2.x

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:

Drupal E-commerce with Ubercart 2.x

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here