Home » Forums » Focus Groups » Theming and Design
5 replies [Last post]
Tue, 06/01/2010 - 05:54
ak
ak's picture
Offline
Joined: 09/10/2008
Juice: 18
Was this information Helpful?

Hi!

Anybody tried to theme this function? I noticed that table of categories released by theme('table',lala) function and this function is horrible. i dont understand how to theme output of this function.
Anybody have snippets or examples of custom uc-catalog-browse? help, plz. I think, < ul > list of categories will be cool.

and the second question,
how to hide table border on picture below? aqua_prosper theme. there are border: 0; everywhere in CSS.

thanks.

PreviewAttachmentSize
Untitled-1.jpgUntitled-1.jpg88.03 KB
Top
Tue, 06/01/2010 - 21:39
#1 View page
refreshdigital
refreshdigital's picture
Offline
Joined: 06/01/2010
Juice: 3
Re: how to theme uc-catalog-browse

Hey Ak - i opted to use the views module and scrapped the catalogue page all together, works just fine by linking right to the taxonomy pages themselves.

If there is something better, someone let me know.

I started by overriding the theme function locally, which i guess I could have then just included a *.tpl file and done my markup in there, but views just seemed 10x quicker.

Top
Tue, 08/17/2010 - 11:43
#2 View page
shv_rk
shv_rk's picture
Offline
Joined: 08/16/2010
Juice: 112
Hello there, I want to the

Hello there,

I want to the same thing.

want to create products/catalog page (show all products) but list item based not table.
which template file did you created locally? where can I find it?

Top
Tue, 02/08/2011 - 04:05
#3 View page
nightlife2008
nightlife2008's picture
Offline
Joined: 12/08/2010
Juice: 51
Overwriting module-theme functions

Hi there,

The ubercart catalog system is mainly based on 3 functions:

1. function THEME_uc_catalog_browse($tid = 0) ( you can find this function in ubercart/uc_catalog/uc_catalog.pages.inc )

This function receives the TID (term id) from the URL "catalog/X" where X = your TID.
If this TID is empty or 0 (for ex. on the page /catalog ), the grid based table with all your categories / sub-categories / sub-sub-categories is shown.

When your TID is not 0, ubercart fetches a catalog object through $catalog = uc_catalog_get_page((int)$tid);

This object contains all info about the current category and info to your child categories if there are any.

Afterwards the SQL Query is run to merge your product data with your node data, and reformed into a pager_query.

<?php
function THEME_uc_catalog_browse($tid = 0) {
  //drupal_add_css(drupal_get_path('module', 'uc_catalog') .'/uc_catalog.css');
  $output = '';
  //  Fetch our catalog object
  $catalog = uc_catalog_get_page((int)$tid);
  //  Update the title with our term name / catalog name
  drupal_set_title(check_plain($catalog->name));
  //  Update the breadcrumb with our term name
  drupal_set_breadcrumb(uc_catalog_set_breadcrumb($catalog->tid));
  //  Producttypes
  $types = uc_product_types();
 
  //  Catalog term children list
  $categories = array();
  //  Catalog term children links
  $links = array();
  //  Catalog index list
  $catalog_list = array();

 
  if (

count($catalog->children) > 0 ) {
    $categories = $catalog->children;
  } else {
    //  Get term parents
    $parents = taxonomy_get_parents($tid);
    //  Shift of first parent
    if ( is_array($parents) && count($parents) > 0 )
        $parent = array_shift($parents);
    if ( isset($parent->tid) ) {
        $parent_catalog = uc_catalog_get_page($parent->tid);
        $categories = $parent_catalog->children;
    }
  }
  //  Generate category children links
  //  Generate catalog children links with images
  foreach ( $categories as $child ) {
    if ( $tid != 0 ) {
        if ( !empty($child->nodes) ) {
          $links[] = array(
            'title' => '<span class="tab-left"><span class="tab-right">'.$child->name . (variable_get('uc_catalog_breadcrumb_nodecount', FALSE) ? ' ('. $child->nodes .')' : '').'</span></span>',
            'href' => uc_catalog_path($child),
            'attributes' => array('rel' => 'tag'),
            'html' => TRUE
          );
        }
    }
   
    //  Fetch image for this term
    if (!empty($child->image)) {
      $image = '<div class="uc-catalog-term-image">';
      if (module_exists('imagecache')) {
        $image .= l(theme('imagecache', 'uc_category', $child->image['filepath']), uc_catalog_path($child), array('html' => TRUE));
      }
      else {
        $image .= l(theme('image', $child->image['filepath']), uc_catalog_path($child), array('html' => TRUE));
      }
      $image .= '</div>';
    }
    else {
      $image = '<div class="uc-catalog-term-image no-image"></div>';
    }
   
    //  fetch this catalogs categories for display later
    if ($child->nodes) {
      $cell_link = $image . l($child->name, uc_catalog_path($child));
      $catalog_list[] = $cell_link;
    }
  }
 
  //  Display our catalog term image
  if (!empty($catalog->image)) {
    if (module_exists('imagecache')) {
      $output .= theme('imagecache', 'uc_thumbnail', $catalog->image['filepath'], $catalog->name, $catalog->name, array('class' => 'category'));
    }
    else {
      $output .= theme('image', $catalog->image['filepath'], $catalog->name, $catalog->name, array('class' => 'category'));
    }
  }

 

//  Build an ORDER BY clause for the SELECT query based on table sort info.
  if (empty($_REQUEST['order'])) {
    $order = 'ORDER BY p.ordering, n.title, n.nid';
  }
  else {
    $order = tapirsort_sql(uc_product_table_header());
  }
 
  //  Build SQL statement for our product data join
  $sql = "SELECT DISTINCT(n.nid), n.sticky, n.title, n.created, p.model, p.sell_price, p.ordering
    FROM {node} n
      INNER JOIN {term_node} tn ON n.vid = tn.vid
      INNER JOIN {uc_products} AS p ON n.vid = p.vid
    WHERE tn.tid = %d AND n.status = 1
      AND n.type IN (". db_placeholders($types, 'varchar') .") ". $order;
  // Build SQL Count statement for our product data join
  $sql_count = "SELECT COUNT(DISTINCT(n.nid))
    FROM {node} n
      INNER JOIN {term_node} tn ON n.vid = tn.vid
      INNER JOIN {uc_products} AS p ON n.vid = p.vid
    WHERE tn.tid = %d
      AND n.status = 1
      AND n.type IN (". db_placeholders($types, 'varchar') .")";

 

$sql = db_rewrite_sql($sql);
  $sql_count = db_rewrite_sql($sql_count);
  $sql_args = array($catalog->tid);
  foreach ($types as $type) {
    $sql_args[] = $type;
  }
  //  Fetch products
  $catalog->products = array();
  $result = pager_query($sql, variable_get('uc_product_nodes_per_page', 12), 0, $sql_count, $sql_args);
  while ($node = db_fetch_object($result)) {
    $catalog->products[] = $node->nid;
  }
 
  //  Display Child Categories
  if ( count($links) ) {
    $output .= '<div class="uc-catalog-children"><div class="inner">';
    $output .= theme('links', $links, array('class' => 'links uc-categories clearfix'));
    $output .= '</div></div>';
  }
 
  //  Print products or show catalog index
  if (count($catalog->products)) {
    //  Print term description
    $output .= '<div class="uc-catalog-description">'.$catalog->description.'</div>';
    //  Print catalog pager top
    $output .= '<div class="uc-catalog-pager pager-top">'.theme('pager').'</div>';
    //  Print catalog products
    $output .= '<div class="uc-catalog-products">'.theme('uc_catalog_products', $catalog->products).'</div>';
    //  Print catalog pager bottom
    $output .= '<div class="uc-catalog-pager pager-bottom">'.theme('pager').'</div>';
  }
  else {
    //  Display table of child categories similar to an osCommerce site's front page.
    $columns = variable_get('uc_catalog_category_columns', 3);
    $cat_rows = array();
    $row = array();
    $i = 1;
    foreach ($catalog_list as $cell) {
      $row[] = array('data' => $cell, 'class' => 'category');
      if ($i % $columns == 0) {
        $cat_rows[] = $row;
        $row = array();
      }
      $i++;
    }
    if (count($row) > 0 && count($row) < $columns) {
      if (count($cat_rows) >= 1) {
        $row = array_merge($row, array_fill(count($row), $columns - count($row), array('data' => '&nbsp;', 'class' => 'category')));
      }
      $cat_rows[] = $row;
    }
    //  Print term description
    $output .= '<div class="uc-catalog-description">'.$catalog->description.'</div>';
    $output .= '<div class="uc-catalog-products">'.theme('table', array(), $cat_rows, array('class' => 'category')).'</div>';
  }

  return

$output;
}
?>

2. The products-array is then passed onto another theme function: theme('uc_catalog_products', $catalog->products); Based on your chosen Ubercart catalog GRID / Table option, this function passed the data onto Tapir or another theme function for Grid displayment.

<?php

function THEME_uc_catalog_products($products) {
  if (!$products) {
    $output .= '<div class="no-products">'. t('No products are available in this category.') .'</div>';
    return $output;
  }
  else {
    if (variable_get('uc_catalog_grid_display', FALSE)) {
      return theme('uc_catalog_product_grid', $products);
    }
    else {
      $table = tapir_get_table('uc_product_table', $products);
      return drupal_render($table);
    }
  }
}
?>

3. If you chose to display in GRID, your products data is passed on to the following function:

<?php
function THEME_uc_catalog_product_grid($products) {
  $product_table = '<div class="category-grid-products"><table>';
  $count = 0;
  $col_count = 0;
  $context = array(
    'revision' => 'themed',
    'type' => 'product',
  );
  foreach ($products as $nid) {
    $product = node_load($nid);
    $context['subject'] = array('node' => $product);

    if (

$count == 0) {
      $product_table .= "<tr>";
    }
    elseif ($count % variable_get('uc_catalog_grid_display_width', 3) == 0) {
      $col_count = 1;
      $product_table .= "</tr><tr>";
    }

   

$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', 'uc_product_grid', $product->{$field}[0]['filepath'], $product->title, $product->title), "node/$nid", array('html' => TRUE));
    }
    else {
      $imagelink = '';
    }

   

$product_table .= '<td class="col-'. ($col_count + 1) .'">';

   

/*
     if (variable_get('uc_catalog_grid_display_title', TRUE)) {
     $product_table .= '<span class="catalog-grid-title">'. $titlelink .'</span>';
     }
     if (variable_get('uc_catalog_grid_display_model', TRUE)) {
     $product_table .= '<span class="catalog-grid-ref">'. $product->model .'</span>';
     }
     $product_table .= '<span class="catalog-grid-image">'. $imagelink .'</span>';
     if (variable_get('uc_catalog_grid_display_sell_price', TRUE)) {
     $product_table .= '<span class="catalog-grid-sell-price">'. uc_price($product->sell_price, $context) .'</span>';
     }
     if (module_exists('uc_cart') && variable_get('uc_catalog_grid_display_add_to_cart', TRUE)) {
     if (variable_get('uc_catalog_grid_display_attributes', TRUE)) {
     $product_table .= theme('uc_product_add_to_cart', $product);
     }
     else {
     $product_table .= drupal_get_form('uc_catalog_buy_it_now_form_'. $product->nid, $product);
     }
     }*/

    //  open product grid item
   

$product_table .= '<div id="product-grid-item-'.$fields['nid']->content.'" class="product-grid-item">
        <div class="product-grid-item-inner clearfix">';

   

$product_table .= '<div class="product-grid-item-image-box">';
    $product_table .= '    <span class="product-grid-item-image">'.$imagelink.'</span>';
    $product_table .= '</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_title', TRUE)) {
      $product_table .= '<div class="product-grid-item-title">'.$titlelink.'</div>';
    }

   

//$product_table .= '<div class="product-grid-item-more">'.$product->description.'</div>';

   

if (module_exists('uc_cart') && variable_get('uc_catalog_grid_display_add_to_cart', TRUE)) {
      if (variable_get('uc_catalog_grid_display_attributes', TRUE)) {
        $product_table .= '<div class="product-grid-item-cart-box">'.theme('uc_product_add_to_cart', $product).'</div>';
      } else {
        $product_table .= '<div class="product-grid-item-cart-box">'.drupal_get_form('uc_catalog_buy_it_now_form_'. $product->nid, $product).'</div>';
      }
    }

   

//  close product grid item
    $product_table .= '</div>
    </div>';

   

$product_table .= '</td>';
    $$col_count++;
    $count++;
  }
  $product_table .= "</tr></table></div>";
  return $product_table;
}
?>

4. If you wish to alter the displayment of your catalog pages, you can change the function in step 2 ( function THEME_uc_catalog_products($products) ) as follows:

<?php

function THEME_uc_catalog_products($products) {
  if (!$products) {
    $output .= '<div class="no-products">'. t('No products are available in this category.') .'</div>';
    return $output;
  }
  else {
// call a custom theme function for displayment
      return theme('uc_catalog_product_custom', $products);
  }
}

function

THEME_uc_catalog_product_custom($products) {
// loop through products and gather output
foreach ($products as $product) {
$output .= '<br />blabla';
}
return $output;
}
?>

Remember that all of the above functions should be placed in your THEME's template.php file to work. Don't forget to change THEME into your themename, for ex. "garland_uc_catalog_products($products) {"

An example of this code can be seen on http://wkshop.halecomm.net/wenskaarten. I've stripped out any sub-categories and sub-sub-cats, and show only the first level categories with their images.
I've also chosen to display products in a grid fashion (5 prods per row x ? rows = 1000 prods per page; Yes you can circumvent the paging by entering a giant number of products per page.)

Hope to be of service,
Kim

PS: To find all functions you can overwrite in modules, do a file content search on "function theme_*" . This will return all functions starting with theme_ as these are the ones you can overwrite in your own theme's template.php file.

Top
Tue, 12/13/2011 - 18:06
#4 View page
ghoffmann
ghoffmann's picture
Offline
Joined: 05/11/2010
Juice: 9
Thank You!!!

This was just what I was looking for. Could not figure out how to get the product list themed, but you nailed it. Thank you so much for saving me tons of time.

-Ginny

Top
Wed, 02/02/2011 - 16:09
#5 View page
u280ks
u280ks's picture
Offline
Joined: 12/19/2009
Juice: 17
Hi refreshdigital i used

Hi refreshdigital
i used views module to replace the catalog pages, but have problems linking it to the taxonomy pages and my categories pages are blank instead of showing a grid of sub-terms images. I can't figure out how to do it with views without affecting others taxonomy/term/% pages.

could you post some more details, about how you did it or just give me a hint to the right direction

thanks

Top