So Far:
1. Using TABS
2. Displaying Taxonomy by Vocab
3. Theming Listed Taxonomy Tagged Nodes
4. Coming soon.... Taxonomy menus.
I wanted to drop some of my thoughts and some tips that I ended up using the last week while themeing my product page.
First off, if you don't already know. To get started. Duplicate your node.tpl.php file and call it node-product.tpl.php.
(For more information on these things... http://www.ubercart.org/forum/development/3868/nifty_products_tutorial_p.... )
On to the interesting bits....
USING TABS
Tabs = Cool... but hard to get going on 5.10 with Jquery 2. (Or at least without a little guide anyways)
STEP 1. Install Jquery Update:
http://drupal.org/project/jquery_update
STEP 2. Install JsTools (Jstools contains the tabs function).
http://drupal.org/project/jstools
STEP 3. Apply Jstools patch (the last one) if you are using the newest version of jquery (such a pain).
http://drupal.org/node/171234
STEP 4. head over to the admin module page and active jquery, tabs and jstools. Follow the jquery instructions of copying files to your root/misc folder. (I think most people have already updated jquery in the past?).
STEP 5. Decide what the heck you want to put into your tabs. In my case. I wanted some CCK field and my comments. Using tabs is not dependent on CCK, but it does make it a whole lot more useful.
STEP 6. Drop the following code into your node-product.tpl.php you created where you want the tabs to appear.
(I cant say I actually understand php or this snippet 100%, but ill do my best to break it down on how to use it.)
<div id="tabs-1" class="drupal-tabs">
<ul class="anchors">
<li><a href="#tabs-1-1">About</a></li>
<li><a href="#tabs-1-2">Preview</a></li>
</ul>
<div id="tabs-1-1" class="fragment">
<h2 class="drupal-tabs-title" >Body</h2>
<?php print $node->content['body']['#value'] ?>
</div>
<div id="tabs-1-2" class="fragment">
<h2 class="drupal-tabs-title" >Preview</h2>
<?php echo $node->field_preview[0]['view'];?>
</div>
</div>Ok. This makes 2 tabs. tabs-1-1 and tabs-1-2. If you want more tabs, just copy and paste and keep naming the same way. ie tabs-1-3. You will also notice that you need to change the name in two places. Once in the href (starts with #), and once in the class.
This is the output of the first tab. Meaning this is what is inside the tab when you click on it.
<?php print $node->content['body']['#value'] ?>
This one prints out the whole body of the node (everything that you put into the body on product). If you don't want a whole body, but some of your cck, use the following:
<?php echo $node->field_preview[0]['view'];?>
Where it says field_preview, replace it with the name of your cck. You can find this by going administer >> content types >> choose edit for the type you want (probably products in this case) >> manage fields.
You will see most of the new cck fields you added, will start with field_XXXXX under the column "Name". Take the field name you want and replace my field_preview.
Be forewarned. Some CCK types are printed differently, such as address or date. Search the CCK handbook on drupal.org to learn more about printing CCK field types. Maybe try this first with just text fields or links.
That should do it. Test it out and see how it goes.
For extra points.....
Use the following snippet to put your comments into a tab. This was not easy to figure out/ find (I didn't write this snippet). If not your comments will end up at the very bottom of the page like normal.
<?php if ($links): ?>
<div class="links">» <?php print $links; ?></div>
<?php endif; ?>
<?php
if (function_exists('comment_render') && $node->comment) {
print comment_render($node, $node->cid);
$node->comment = NULL;
}
?>I hope this made sense. Ill post my next tip soon!
Joined: 03/25/2008