Home » Forums » Focus Groups » Theming and Design
6 replies [Last post]
Thu, 06/19/2008 - 12:18
stephthegeek
stephthegeek's picture
Offline
Theminator
Joined: 10/20/2007
Juice: 575
Was this information Helpful?

We've been doing a lot of Ubercart theming lately, and I wanted to open a brainstorming thread for both small and major things that would improve theming for UC.

Here are some of the issues we've noticed:
- inconsistent use of - and _ in id/class names
- use of markup for styling instead of spans/divs, eg.
<td class="cart-block-summary-total"><strong>Total:</strong> $913.71</td>
- using img tags for images inline instead of via CSS so they can be changed (*cough* icons in cart block *cough*)
- also another example of inline stuff that's hard to adjust, the (View cart) (Checkout) links in cart-block-summary-checkout
- lack of wrapper div around or additional class on each item such as displayed product fields or attributes -- for example, without busting it out in a template file, it's impossible to apply styling to or around all displayed product fields like weight, dimensions, etc.
- use of tables for, well, everything Smiling
- lack of identifying class for all UC elements, like tables and form buttons -- for example, if we wanted to apply a certain styling to all UC-related tables, like view cart, checkout, review cart, etc., or all of the submit buttons on cart/checkout pages, we'd have to list them all individually

Gorgeous original Drupal themes (and Ubercart themes!) ~ Psst: more Ubercart themes on our new site

Top
Sat, 06/21/2008 - 09:53
#1 View page
zmove
zmove's picture
Offline
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.Internationalizationizer
Joined: 08/13/2007
Juice: 1193
Re: Brainstorming for UC theming improvements in D6 version

I deleted my post about the same subject, so I post my suggestions as comment here :

In the product listing, the column that contain the name of the product have an attribute width=100% in the td tag.

To do that : in the uc_product.module
replace :

<?php
$data['name'][] = array('data' => l($node->title, 'node/'. $node->nid), 'width' => '100%');
?>

By :

<?php
$data['name'][] = array('data' => l($node->title, 'node/'. $node->nid), 'class' => 'product-name');
?>

And then create the following rule in uc_product.css :

.product-name {
  width:100%
}
Top
Sat, 06/21/2008 - 11:16
#2 View page
TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3412
Re: Re: Brainstorming for UC theming improvements in D6 version

I don't know whether this still applies to the D6 Form API, but it would be nice to remove all markup from the _form() functions. Specifically, eliminate #type=markup, #prefix, and #suffix properties by moving this stuff into form theme functions.

<tr>.
Top
Mon, 06/23/2008 - 08:56
#3 View page
Ryan
Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15450
Re: Re: Re: Brainstorming for UC theming improvements in D6 vers

Great thoughts here... I can add some of my own later, but I wanted to +1 especially TR's suggestion. I don't think I'd thought of that before, but this would be one stellar way to handle the various messages and things we add into checkout and settings forms. I'd like to pursue that further later if possible.

Also on the radar, though it probably won't happen for Uber Tuber is the addition of default .tpl.php files in modules. We should be able to make good use of this feature, but we might need someone to show us when/where. Smiling

Top
Mon, 06/23/2008 - 11:03
#4 View page
torgosPizza
torgosPizza's picture
Offline
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.
Joined: 08/14/2007
Juice: 4110
Re: Re: Re: Re: Brainstorming for UC theming improvements in D6

I would like to suggest the theming of any type of output screen. For us, specifically, this means the "My Files" section which is included in the File Downloads module (uc_file). I've actually already done this successfully with my current build, so I'd be more than happy to supply a patch whenever the time is right Smiling

--
Help directly fund development: Donate via PayPal!

Top
Tue, 04/14/2009 - 15:28
#5 View page
jrowny
jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Re: Re: Re: Re: Brainstorming for UC theming improvements in

themeing the cart view needs to be improved a lot, I found it very difficult to add a table column to the cart when the customer asked for a specific "color" field. I'm still a drupal n00b but I ended up hacking uc_cart which I'm aware is a big no no.

Top
Wed, 05/13/2009 - 07:46
#6 View page
duckz
duckz's picture
Offline
Joined: 05/13/2009
Juice: 123
Re: Re: Re: Re: Re: Re: Brainstorming for UC theming improvement

1. tableless product page and category page will be nice.

function theme_uc_catalog_product_grid($products) {
  $product_table = '<div id="category-grid-products-wrapper">';
  $count = 0;
  $context = array(
    'location' => 'catalog-grid-product',
  );
  foreach ($products as $nid) {
    $product = node_load($nid);
    $context['subject'] = array('node' => $product);
  

    $titlelink = l($product->title, "node/$nid", array('html' => TRUE));
    if (module_exists('imagecache') && ($field = variable_get('uc_image_'. $product->type, '')) && isset($product->$field) && file_exists($product->{$field}[0]['filepath'])) {
      $imagelink = l(theme('imagecache', 'product_list', $product->{$field}[0]['filepath'], $product->title, $product->title), "node/$nid", array('html' => TRUE));
    }
    else {
      $imagelink = '';
    }
$product_table .= '<div class="category-grid-products-content">';
    if (variable_get('uc_catalog_grid_display_title', TRUE)) {
      $product_table .= '<div class="catalog-grid-title">'. $titlelink .'</div>';
    }
    if (variable_get('uc_catalog_grid_display_model', TRUE)) {
      $product_table .= '<div class="catalog-grid-ref">'. $product->model .'</div>';
    }
    $product_table .= '<div class="catalog-grid-image">'. $imagelink .'</div>';
    if (variable_get('uc_catalog_grid_display_sell_price', TRUE)) {
      $product_table .= '<div class="catalog-grid-sell-price">'. uc_price($product->sell_price, $context) .'</div>';
    }
    if (variable_get('uc_catalog_grid_display_add_to_cart', TRUE)) {
      if (variable_get('uc_catalog_grid_display_attributes', TRUE)) {
        $product_table .= '<div class="catalog-addtocart-button">';
        $product_table .= theme('uc_product_add_to_cart', $product);
        $product_table .= '</div>';
      }
      else {
      $product_table .= '<div class="catalog-addtocart-button">';
        $product_table .= drupal_get_form('uc_catalog_buy_it_now_form_'. $product->nid, $product);
            $product_table .= '</div>';
      }
    }
$product_table .= "</div><!-- /product-content -->";
    $count++;
  }
  $product_table .= "</div><!--/product-wrapper -->";
  return $product_table;
}

2. ubercart cart block, especially the view cart | checkout link is hard to theme ( hard to align ).

---------------------------------------------------------------------------------------------------------------------
available for custom works, drupalstore.info
------------------------------------------------

Top