Ubercart : Implement a cart item counter

After this tutorial you will get a cart icon with an item counter displayed. 

First of all, we need to make a custom module for that and you can read the drupal documentation about it which is really well explained.

Let's create a custom module called ubercart_custom. We need to make a folder called ubercart_custom in which we will put 3 mandatory files :

• ubercart_custom.info
• ubercart_custom.install
• ubercart_custom.module

In the .info file you can put this content and adjust it to your needs :

name = Ubercart custom
description = Alter ubercart module
core = 7.x
package = Ubercart

; Dependencies
dependencies[] = uc_store
dependencies[] = uc_cart

In the .install file you can add these lines :

<?php

/**
 * @file
 * Installation file for Ubercart custom module.
 */

 /**
  * Implements hook_install().
  */
 function ubercart_custom_install() {

 }

 /**
  * Implements hook_enable().
  */
 function ubercart_custom_enable() {
   drupal_set_message('Ubercart custom has been activated successfully.');
 }

 /**
  * Implements hook_disable().
  */
 function ubercart_custom_disable() {
   drupal_set_message('Ubercart custom has been deactivated successfully.');
 }

 /**
  * Implements hook_uninstall().
  */
 function ubercart_custom_uninstall() {

 }

Now we put in the .module file :

<?php
/**
  * @file
  * Alter ubercart module
  */

This last file is empty for now on purpose, but it's where we will put our code after. You can put the folder ubercart_custom in sites/all/modules/ and at this stage you should be able to find your module in the module list and install it. So let's install it !

After installing it we can go back to our .module file. We will implement the hook_block_view_alter to alter the cart block block title to display the item counter. So be sure that you don't have the option "Display the shopping cart icon in the block title" ticked in the block configuration as we will override it.

Put this code in your module file after the lines already implemented :

/**
* Implementation of hook_block_view_alter().
*
*/
function ubercart_custom_block_view_alter(&$data, $block) {
  if ($block->delta == 'cart') {
    $items_number = uc_cart_get_total_qty();
    $title = $block->title;
    $title .= t('@items_number', array('@items_number' => $items_number));

    $block->title = $title;
  }
}

As this stage you should have the number of items in the cart displayed next to it. But it's not really beautiful isn't it ? Because the block is already altered by ubercart module, the item number is displayed automatically in a span with the class cart-block-title-bar. So we can work with it.

So let's add some css to it :

#block-uc-cart-cart {
  padding-right: 20px;
}
.cart-block-title-bar {
  display: block;
  position: absolute;
  top: -0.5em;
  left: 110%;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  min-width: 20px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #777;
  border-radius: 10px;
}

Here we go. Now you should have something like this : 

Obviously you can adapt the css to your needs. Now try to add and remove articles from your shopping cart and you'll see the item counter programmatically updated.