Drupal Technical

[Drupal] How to theme Ubercart shopping cart block in Drupal 7

Rohith.pv | | 2 min read

This is a simple and easy way to theme an ubercart shopping cart block in a Drupal site. When we enable ubercart in our Drupal website we will get a block called shopping cart. This block will show us number of items in which are added to cart. When we use our own theme this block may not looks good, but we can theme it in a very easy manner. This article can be useful if you want to theme shopping cart block in Drupal.

Open your theme folder and look for template.php

Open your hook_theme(YOURTHEME_theme), add a new theme name. Here I am using "cart_count" as theme name.

'cart_count' => array(
      'variables' => array(
        'count' => NULL,
        'text' => NULL,
       ),
    ),

For example here I just only want the number of items and a text that should change
to item/items according to number of items in the cart.

This is a dummy example, you must do this in an appropriate way of course.

Copy the following code inside your template.php

function YOURTHEME_cart_count($variables) {
  $count = $variables['count'];
  $text = $variables['text'];
  $output = '';
  $output .= '';
  $output .= "$count";
  $output .= "$text";
  $output .= '';

  return $output;
}

Create a YOURTHEME_uc_cart_block_summary function inside your template.php

function YOURTHEME_uc_cart_block_summary($variables) {
  $item_count = $variables['item_count'];
  $total = $variables['total'];
  $summary_links = $variables['summary_links'];
  $item_link = $summary_links['cart-block-view-cart']['href'];
  $item_text = format_plural($item_count, 'Item', 'Items');
  $output = '';
  $output .= '<div class="cart-block-custm-items">';
  $output .= '<div>' . theme('cart_count', array('count' => l($item_count, $item_link), )) . '</div>';
  $output .= '<div>' . theme('cart_count', array('text' => $item_text)) . '</div>';
  $output .= '</div>';
  return $output;
}

You might also need to override YOURTHEME_uc_cart_block_title in this same manner.

Clear the cache when you make these changes.

You can use CSS to add a background image and style the block.

 

 

Related Topics