In this tutorial we are going to teach you how to theme your products page.
We will get started by creating the node file which we are going to edit to create the mark-up (HTML), so we can style it using CSS at a later date.
Ubercart uses a content type called product for it’s nodes so we will create file shown below.
node-product.tpl.php Note: If you use a different content type for your products, just put the content type name where I have put the product in the above.
We will now create the mark-up(HTML) /php for the product display.
<?php
// Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
?>
<div id="node">
<?php // product title ?>
<h2><?php print $title ?></h2>
<?php // product description ?>
<?php print $node->content['body']['#value']; ?>
<?php // list price and sell price display ?>
<div id="price">
<p>List Price: <?php print uc_currency_format($node->list_price); ?></p>
<p>Sell Price: <?php print uc_currency_format($node->sell_price); ?></p>
</div>
<?php // default image display ?>
<div id="image"><img src="/files/imagecache/product/<?php print $imagePath; ?>" alt="Title"></div>
<p>Sub Images</p>
<?php // all image display ?>
<ul class="other_imgs">
<?php
// get all images
foreach ($node->field_image_cache as $images) {
?>
<li><a href="/files/imagecache/product/<?php print $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="pagination"><img src=" /files/imagecache/product/<?php print $images['filename']; ?>" width="95" height="95" alt="<?php print $images['alt']; ?>"></a></li>
<?php
}
?>
</ul>
<div id="cartButtons">
<?php // add to cart buttons ?>
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
</div>I’ve tryed to comment everything explaining what each bit does the $variables are pulled from the $node array.
<pre>
<?php // this will print the $node array at the bottom of each node take it out when finished ?>
<?php var_dump($node); ?>
</pre>Placing the above code at the bottom of your new node file should print the $node array just in case you might want to display more data.
Now all you have to-do is upload your new node file to your active theme folder.
Your product page won’t look much now but when you add some new CSS Styles it will look ACE!
In my next tutorial I will be showing you how to style the mark-up (HTML) with CSS.
Note: This is my first tutorial so if it's crap let me know!
If you have any questions leave a comment or drop me an e-mail at mike[at]drupalify.com
Wow this is awesome! I always wanted a way to style the list price.
There have been some hints at how to do this so far, but nothing this straight-forward.