Theming Product Pages

Work in progress...

Drupal theming is beyond the scope of this article, but there are some things that you should be aware of.

[ NEED ARTICLE CONTENT FOR CCK SETTINGS ]

CSS
The easiest way to theme ubercart products is by using CSS. This is especially the case if you are using the Zen theme.

A handy tool for creating CSS is the firefox plugin firebug. With it, you can look "under the hood" at the markup of your site, select the specific tag you wish to change the look of, edit the CSS and view the results in real time. Then, you copy and paste the CSS you've changed into your theme's style.css file and test.

However, sometimes changes in the actual markup are necessary. In these cases, there are at least two options: Using the contemplate module, or using standard Drupal theming.

Contemplate

Contemplate (or "content templates") is a Drupal module (not to be confused with a non-Drupal template system of the same name) which allows you to design the way a node looks from within Drupal itself rather than using a text editor or IDE.

There are some tutorials out there for contemplate, but the "official" documentation is currently scarce.

Installing contemplate is like any other Drupal module. Once installed, you will see and additional tab when you edit content types ('product' or a custom product class). Click on this tab to create a content template for that content type. Creating a content template involves adding the markup (Yes, you need to know some HTML), and adding PHP variables within that markup.

The variables available to your templates are listed below the text area. To add a variable, locate the variable you want and simply click on the link and it should be automatically entered into the text at the cursor. Make sure that your variables are enclosed in

<?php

?>

tags, and that you are printing them with the print() function. For example:

<h2><?php print $node->title; ?></h2>
<div class="node-body"><?php print $node->teaser; ?></div>

To find out what additional PHP variables are available, add this code to your template:

<pre>
<?php print_r($node); ?>
</pre>

Once you do, you will see a very large nested list of variables to use in your template (You can also do this in the theme files themselves).

There are three types of variables in this list:

  1. Arrays
  2. Class Instances, or Objects
  3. The actual values (usually a string, or bit of text)

Here is a simplified version of the output of print_r($node):

stdClass Object
(
    [nid] => 34
    [type] => product
    [uid] => 1
    [title] => Product Title
    [field_image_cache] => Array
        (
            [0] => Array
                (
                    [data] => Array
                        (
                            [description] => Product Image Description
                            [alt] => Product Image Alternate Text
                            [title] => Product Image Title
                        )

                    [filename] => Product_Image.jpg
                    [filepath] => sites/default/files/Product_Image.jpg
                )

        )
)

You would access the values in the following way:

<?php
// The node is an Object, so you reference it's attributes like this:
print $node->title;

// The field_image_cache is an Array, so you reference it's attributes like this:
// note the "[0]", which must be included
print $node->field_image_cache[0]['filename'];

// To access nested fields, you just keep using the same syntax:
print $node->field_image_cache[0]['data']['alt'];

?>

Drupal Theming
The above information can be used when theming ubercart from within the theming system as well as using the contemplate module. Theming Ubercart products is no different than theming anything else in Drupal. See the Drupal Theming Guide for more information. The relevant ubercart specific theme file names are:

node-uc_product.tpl.php
node-[product class name].tpl.php

[ INCOMPLETE LIST - PLEASE CONTRIBUTE ]

These files need to be created in your theme's root directory.