Ubercart pictured cart block

This block suggests some ideas to make the shopping more user friendly. Here you can find some additional information about this module.

Customizing appearance of the block

It's impossible to test this module with all themes and create a universal CSS-file. Fortunately we can create a class or an Id for almost every element of the block. This means you can customize CSS and replace images for your theme(s).

CSS and image replacing

I want to direct your attention to these declarations:

• .uc_pic_cart_block_productimage
  It is important one, especially if you prefer horizontal orientation of block and your product pictures are not squares. I recommend to set up height or modify your image preset.
• The scroll sections which named ..._scroll and ...scroll:hover are customizing your scroll buttons. Note that the ..._def declaration have "display: none" style to hide it if JavaScript disabled.

There are some images in subdir "img":

• bullet-arrow-down.gif, bullet-arrow-left.gif, bullet-arrow-right.gif, bullet-arrow-up.gif - arrows;
• cart_empty.gif, cart_full.gif - the cart icon, empty or full (by default copy of the standard Ubercart icons as well as arrows actually);
• dec_product.gif, inc_product.gif, remove_product.gif - the "-", "+" and "X" icons (made by me);
• no_image.gif - default image of product, also self-made.

You can change any of icons to your own but it must be GIF (well... PNG or JPEG inside with .gif extension is a risk) and the same named as default. The HTML attributes "width" and "height" are getting from image so don't be afraid.

Theming

7.x release version has a lot of changes since '13 dev-version about theming and javascript. Creating templates or implementing theme functions in template.php of your site theme should be preferred way to customize appearance of the block if CSS is not enough. To demonstrate this way Bootstrap subtheme was created.

Here is hierarchy of theme functions:

• uc_pic_cart_block_block_title - block title
• uc_pic_cart_block_sort_header - sort header (Sort by: name | qty | sum)
• uc_pic_cart_block_content - main block content
  • uc_pic_cart_block_scroll_btn - one scroll button
  • uc_pic_cart_block_item - cart item
    • uc_pic_cart_block_item_image_product - product image if present
    • uc_pic_cart_block_item_image_default - default image
    • uc_pic_cart_block_item_qty_manage - "+" and "-" buttons with current quantity of item
• uc_pic_cart_block_summary - totals and buttons

To deep understand how it works you can check uc_pic_cart_block.theme.inc file or Bootstrap example above where all variables were documented.

Scrolling

In Drupal 7.x themes can exclude unwanted CSS and JS files. You can create your own scrolling script on theme level.

If you want to use provided script there are few IDs and classes used.

For scrolling buttons use following IDs:

• #uc_pic_cart_block_scroll_up: vertical block - up button
• #uc_pic_cart_block_scroll_down: vertical block - down button
• #uc_pic_cart_block_scroll_left: horisontal block - left button
• #uc_pic_cart_block_scroll_right: horisontal block - right button

Other IDs:

• #uc-pic-cart-block-wrapper: ajax wrapper
• #uc_pic_cart_block_scroll_area: scroll area - outer container (scrollTop/scrollLeft applied)
• #uc_pic_cart_block_content: content area - inner container

Classes:

• .qty: quantity management block - important for vertical scrolling delta-height
• .uc_pic_cart_block_item_hor: cart item in horisontal block - important for horisontal block width and height calculations
• .uc_pic_cart_block_scroll_area_vert: scroll area helper class in vertical block (added by script)
• .uc_pic_cart_block_scroll_area_hor: scroll area helper class in horisontal block (added by script)

Updating

If you changed CSS table and/or images as it described in previous section, a problem with updating comes. So be careful and back up your changes before update to prevent override these files. Also check the new versions of CSS table. For example, the CSS file of 6.x-Beta2 has some changes from 6.x-Beta1.

F.A.Q.

How can I make the height of the block in horizontal orientation smaller?
The height of the block are sum of the height of block title, sort header, the max height of product icon and the height of the summary.

Height of the block title seems to be constant because the others block titles should be looks the same. But you can change uc_pic_cart_block_block_title style to customize the block title. After that, the style of sort header is uc_pic_cart_block_sort_header, more than that, you can disable it at all in the settings of the block.

The product icon can be make smaller via changing the image preset (modify current or create new). Second, you can replace buttons (dec_product.gif, inc_product.gif, remove_product.gif) to smaller (the source is 16x16) or #uc_pic_cart_block_content .form-submit or .uc_pic_cart_block_btn styles to customize them. Third, there are uc_pic_cart_block_spansum (price of item) and uc_pic_cart_block_spanqty (quantity) styles to change e.g. the font size.

I recommend the Firebug plugin for Firefox to inspect the elements so changing the CSS will be easy.

Also, there are the summary styles which also can help you to decrease height of the block.

What about Ajax?
In contrast with 6.x version, 7.x branch have Ajax support for changing sort order, remove and change qty of cart items.

Why the "Ajax cart" is not supported?
It is currently use the original Ubercart block only, feature request #430040 posted. Also module seems to be abandoned (last commit at 2014-Mar-02).