Drupal/Ubercart ... node styling?

Question

I am trying to style the product view on a Drupal site, but am having problems. I can't find where the node (product) view is put together in ubercart!

I'm using UC 5.x-1.7, and I need to style the node (product) view page. At the moment in my node.tpl.php file, I have

print $body;

which spits out all the SKU, attributes, price, picture etc.

The problem is I need to have this in a different style - I have to work to a design done by a designer. I have started re-doing my own version, using the variables like

$node->content['body']['#value']

etc.

I have run into trouble trying to work with the various attributes for a product. I can't find out how to get them onto my page, or any documentation on how to work with them from a coder's point of view.

Is there an easier way? Where would I look to style the existing display (i.e. the $body variable)?

Edit: my theme is based on the Zen Theme

Answer 1

You'll want to look at the templates which will be under a path like:

./sites/all/modules/ubercart/uc_product/views

That will be a start. That's where the node is likely built.

Answer 2

If the issue is purely style you can write your own CSS to do this.

You can use the theamer module to tell you which template files to use, I would guess that there are some which come with ubercart which you can override. Look in the candidate template section of the info

Finally you can use hook_nodeapi op=view to control what actually gets onto the page to display in the $body variable.

Answer 3

If you use the Devel module, you can see the exact structure of the arrays and objects, and grab exactly what you need from the $node object. then make a node-product.tpl.php file, and replace the $content variable with those parts. Most of those variable values have the markup intact.

If you want to change the markup for, say, the attributes, you need to change the preprocess function that processes the attribute div. If you just drop the id="attributes" (class maybe? i forget) div from the beginning and end, they'll all print individually in their own class="attribute" wrapper. Just add that to your template.php file.

You can then move them all over the page with CSS, instead of having them all trapped in one div.

You can also use the method above of printing the separate page variables to move the different elements around in the markup.

A lot of that can be done with pure CSS, but it's nice to have markup that doesn't break when CSS mis-displays in bad browsers.

Hope this is helpful. I'm not sure if all of this will work in Drupal 5, since I was doing all of this with 6... so hopefully.