User Interface Enhancement Techniques with Drupal and Ubercart 2.x

Exclusive offer: get 50% off this eBook here
Drupal E-commerce with Ubercart 2.x

Drupal E-commerce with Ubercart 2.x — Save 50%

Build, administer, and customize an online store using Drupal with Ubercart

$26.99    $13.50
by George Papadongonas Yiannis Doxaras | March 2010 | MySQL Drupal e-Commerce Open Source PHP

In the previous article by George Papadongonas and Yiannis Doxaras, authors of Drupal E-commerce with Ubercart 2.x, we saw how to implement more complex marketing technique such as cross-selling using taxonomy and recommendation systems for Drupal with Ubercart, how to create an alternative layout for products using panels and enhance user interface using views. In this article we show we will you how to offer a better browsing experience to your visitors, and how to use enhanced marketing techniques to attract more clients and to make them spend more money in your store. In this article we are going to show you:

  • How to improve the shopping cart
  • How to manage product prices and discounts in a better way

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.

Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Sales and price administration

Offering discounts and special prices to selected users is a move that will make your clients love your store even more and boost your sales. Fortunately, there are some very useful modules for Ubercart that will add this extra functionality to your store.

Ubercart Discounts module

To install the Discounts module, browse to http://drupal.org/project/uc_discounts_alt 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 | Discount settings. If it is your first visit to this page, there will be no discounts yet, so click on Add new discount and the following page will appear. You can create a new discount rule as simple or as complex as you like, by using the following settings:

Drupal E-commerce with Ubercart 2.x

  • Name: This will be the name of this discount. Enter a descriptive title here.
  • Short description: Enter a short description for the discount. The customer can read it during checkout and order review.
  • Description: This description is shown only to administrators.
  • Qualifying type: You can determine if an order is qualified for this discount based on a minimum price or minimum quantity.
  • Qualifying amount: Enter the required price or quantity here.
  • Has max qualifying amount: Turn on this checkbox if this discount has a maximum qualifying amount.
  • Discount type: This is the type of the discount we will offer to the visitor. The available options are: Percent off, Fixed amount off, Fixed amount off per qualifying item, Free items, Percentage off per qualifying item.
  • Discount amount: This is the amount of the discount. It is related to the discount type.
  • Require code(s) to activate discount: If you want the customers to use codes to activate their discounts, turn this checkbox on.
  • Discount codes: Enter here the discount codes, one code per line.
  • Filter type: Define how you want to filter you products: by product names, by category terms, or by SKU.
  • Products – Terms – SKUs: Depending on your previous choice, here you can select your products, terms, or SKUs for this discount.
  • Filter based on roles: Turn this on if you want to use this discount only for selected roles.
  • Require single product to qualify: Turn this option on if a single product is required to meet the requirements to qualify for the discount.
  • Maximum times applied: Define how many times this discount can be applied in the same order, usually 1.
  • Can be combined with other discounts: Turn this on if this discount can be combined with other ones in order to give the customer a bigger final discount.
  • Max uses: How many times this discount can be used in your store. Enter 0 for unlimited.
  • Max uses per user: How many times this discount can be used by a single user. Enter 0 for unlimited.
  • Discount expires: Select whether or not this discount will be applicable if other discounts are already active.
  • Is published: Turn this on to publish this discount.
  • Weight: If there is more than one discount, the weight defines which one is applied first.
  • Click on Submit to create this discount. Now your discount is created and your customers will be able to see it during checkout if they meet the requirements that you set.

Ubercart Discount Coupons module

Coupons are a very useful marketing tool. You can distribute coupon codes using printed coupons or by placing ads and promotions on affiliate websites. Customers love promotions and discounts and it's a very effective way to make them shop at your store.

To install the Discount Coupons module, browse to http://drupal.org/project/uc_coupon 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 | Customers | Coupons, and the following page will appear:

Drupal E-commerce with Ubercart 2.x

  • Coupon name: Enter a descriptive name for this coupon.
  • Coupon code: Enter the coupon code. The customers enter this code to receive the discount.
  • Enable bulk generation of coupon codes: If you enable this option, the module automatically creates bulk coupon codes.
  • Number of codes to generate: Enter how many codes you want to be generated.
  • Code length: Select the length of the generated codes.
  • Expiry date: Enter the expiry date of this coupon.
  • Active: Select if this coupon is active or not.
  • Discount type: The available selections are Percentage or Price.
  • Discount value: Enter the discount value. It is of course related to the discount type.
  • Minimum order limit: Enter the minimum order total that qualifies for this coupon.
  • Maximum number of redemptions (per code): How many times this code can be used in your store. Enter 0 for unlimited usage.
  • Maximum number of redemptions (per user): How many times this code can be used by a single user. Enter 0 for unlimited usage.
  • Product classes: Select one or more product classes on which this coupon can be used.
  • Applicable products: You can restrict the usage of this coupon to only for selected products by selecting a product name.
  • Applicable SKUs: You can restrict the usage of this coupon to only for selected products by selecting a product SKU.
  • Applicable taxonomy terms: You can restrict the usage of this coupon to only for selected catalog terms.
  • User restrictions: You can restrict the usage of this coupon to only by selected users.
  • Role restrictions: You can restrict the usage of this coupon to only by selected roles.
  • Wholesale permissions: Leave the default option, both wholesale and retail.
  • Click on Submit to create this coupon.

Now, there is a new region in the checkout page, where the customer can enter the Coupon code and get his or her discount. This region can be seen in the following screenshot:

Drupal E-commerce with Ubercart 2.x

After entering the code click on Apply to order to apply the coupon to your order.

Ubercart Multiprice module

The Ubercart Multiprice module solves a very important problem for international retailers. If you sell your products to many different countries, you may want to sell them at different prices for every country. It creates a block where the customer selects the country and it shows the correct price. Even better, it can combine with the IP to country module (http://drupal.org/project/ip2cc) and automatically detect the customer's country from his/her IP address.

To install it browse to http://drupal.org/project/uc_multiprice 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, and enable the Region select block. When you create a new product or edit an existing one, there is a new region just below the default price fields, named Product multi pricing as shown in the following screenshot:

Drupal E-commerce with Ubercart 2.x

Here you can select a different price for any country you want by overriding the default prices. When the visitor selects a country with an assigned price from the block that you enabled, the page reloads and shows the price for this specific country.

Ubercart Price Per Role module

With the Price Per Role module, you can assign different prices to different roles. For example, you can create a new role named "gold-customers" and can offer them special prices on selected products.

Drupal E-commerce with Ubercart 2.x

To install it, browse to http://drupal.org/project/uc_price_per_role 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 | Price per role settings, and you will get a settings page as shown in the previous screenshot. There you select the roles with special prices.

Drupal E-commerce with Ubercart 2.x

When you create a new product or edit an existing one, there are new price fields for every selected role. Each visitor will now see the right price, related to his or her role.

Ubercart Custom Price module

This is a module for advanced users. It creates a blank field where you can add custom PHP code to adjust the price of your product. To install it, browse to http://drupal.org/project/uc_custom_price 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.

Drupal E-commerce with Ubercart 2.x

When you are creating a new product, or editing an existing one, there is a field named Custom Price Calculation, where you can insert your custom code as shown in the previous screenshot.

Summary

In this article we showed you how to offer a better browsing experience to your visitors, and how to use enhanced marketing techniques to attract more clients and to make them spend more money in your store.


If you have read this article you may be interested to view :


Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


George Papadongonas

George Papadongonas is the owner of a small web development firm, located in Athens, Greece. He started his career as a freelancer web developer in 2000 and works with small and medium size enterprises. He has experience in many development platforms, but felt in love with Drupal in 2007 and with Ubercart in 2008. He is a member of Drupal Association and an active supporter of the open source community.

Yiannis Doxaras

Yiannis Doxaras has studied theoretical physics at University of Athens and University of Cambridge. He is co-founder of OSIS, a Greek open source startup company that provides turn-key solutions in industries like travel, e-learning, and e-government. Yiannis is an active committer in various open source projects mainly with Java, Python and PHP technologies. He is a serial entrepreneur and innovation broken in Greece and the Balkans.

Books From Packt


Drupal 7 First look
Drupal 7 First look

MySQL Admin Cookbook
MySQL Admin Cookbook

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

Drupal 6 Performance Tips
Drupal 6 Performance Tips

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

TYPO3 4.2 E-Commerce
TYPO3 4.2 E-Commerce

Drupal 6 Attachment Views
Drupal 6 Attachment Views


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software