180 replies [Last post]
mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Was this information Helpful?

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

darkbrewery's picture
Offline
Joined: 02/09/2008
Juice: 49
Re: Nifty Products Tutorial Part 1

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.

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Thanks darkbrewery

Hey darkbrewery

Yeah I thought it was about time to post this as I’m going to be working on the Ubercart default theme.

After the CSS Tutorial is complete I’ll be showing you how to completely customize your catalog pages and more.

I'll post more in the next couple of days when I have free time.

Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15476
Re: Thanks darkbrewery

Awesome job, Mike. I'm not entirely sure where we should collect the tutorials on the site. Right now there's a section of the user's guide for it here, but that may not be best. I suppose as more get contributed we can subdivide it into theming, setup, third party module, etc. tutorial sections.

Thanks for all your work... I hope you're still getting some sleep. Eye-wink

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Hey Ryan Thanks for the

Hey Ryan

Thanks for the comments it's my first tutorial I wasn't sure if I explained enough in my post.

Quote:

Ryan: I'm not entirely sure where we should collect the tutorials on the site

I still can’t see themeing forums when you go to the main forum display which I think should be on the main forum display and then have sub forums with Tutorials etc.

Just an idea but I found it harder finding my post after you moved it.

Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15476
Re: Hey Ryan Thanks for the

Interesting... well, not sure if it was TAC_Lite interfering or not, but I removed that so it hopefully shouldn't be an issue any more. Let me know if you still can't see the forums.

darkbrewery's picture
Offline
Joined: 02/09/2008
Juice: 49
Re: Nifty Products Tutorial Part 1

Uh-oh everything worked on the test site, but my live site threw this at me..

Parse error: syntax error, unexpected T_PRINT in /home/.wycliffe/rossignol/concretejungleint.com/sites/all/themes/ConcreteJungle/node-product.tpl.php on line 28

What could be causing this?

Lines 28-30 in my node-product.tpl.php file:

<li><a href="http://domain.com/ubercart/files/imagecache/product/<?php print $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="pagination">
     <img src="http://domain.com/ubercart/files/imagecache/product/<? php print $images['filename']; ?>" width="95" height="95" alt="<?php print $images['alt']; ?>">
     </a></li>
Lyle's picture
Offline
AdministratoreLiTe!
Joined: 08/07/2007
Juice: -40969
Re: Re: Nifty Products Tutorial Part 1

I bet it's a missing semicolon before line 28.

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Hi darkbrewery try <li><a

Hi darkbrewery

try

<li><a href="http://domain.com/ubercart/files/imagecache/product/<?php print $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="pagination">
     <img src="http://domain.com/ubercart/files/imagecache/product/<?php print $images['filename']; ?>" width="95" height="95" alt="<?php print $images['alt']; ?>">
     </a></li>
spasmody's picture
Offline
Joined: 02/25/2008
Juice: 64
Re: Nifty Products Tutorial Part 1

Thanks for this tutorial but it doesn't work!
I don't understand, I followed your instructions, I added the node-product.tpl.php file with the other template files and I tried to add appropriate selectors in CSS, ex:

#price { font: 16px Arial; }

but product nodes don't change.
What's the problem?

spoetnik's picture
Offline
Joined: 11/15/2007
Juice: 28
node-tshirt.tpl.php

If you have a product like "tshirt", you should rename node-product.tpl.php to node-tshirt.tpl.php. You have to do this for every contenttype(product) you have to style them. Look at this page in the drupal handbook for more directions:
http://drupal.org/node/173880

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Hey spasmody

Hey spasmody

Like the post says above by (spoetnik) make sure your products content type is setup correct and that all your products nodes are being listed in the product content type.

If you need more help send me a pm Smiling

Infinitee's picture
Offline
Joined: 02/19/2010
Juice: 96
uc_price
Quote:

#price { font: 16px Arial; }

Try this:

.uc-price {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin: 0.5em 0;
}
TutusForToddlers's picture
Offline
Joined: 11/17/2007
Juice: 158
Re: Nifty Products Tutorial Part 1

This is absolutely the best thing that Ubercart can have other than Ubercart itself. This type of tutorial will help spread Ubercart to the masses by making it much easiert to change to fit the customers needs without having to struggle to figure out the guts of Drupal and Ubercart for those who do not grok them.

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Hey All Thanks for the

Hey All

Thanks for the great feedback I’ve recently started a new job so haven't had time to work on a new tutorial but I should have my new laptop this week so I’ll be posting some more tutorials very soon Smiling

woc_art's picture
Offline
Joined: 03/26/2008
Juice: 63
Re: Hey All Thanks for the

Thanks for this! I found this pretty helpful. Just wondering, is it possible to integrate the lightbox feature so that images pop up the way they do before you modify the product template?

Thanks again

thill's picture
Offline
Joined: 01/25/2008
Juice: 815
Re: Re: Hey All Thanks for the

I modified mine a little to get this to work.

<?php print l(
   
theme('imagecache', 'product', $field_image_cache[0]['filepath'], $field_image_cache[0]['alt'], $field_image_cache[0]['title']),
   
$field_image_cache[0]['filepath'],
    array(
'class' => 'thickbox'), NULL, NULL, FALSE, TRUE); ?>
end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Nifty Products Tutorial Part 1

I'm using this method to set my product page layout but I'm having no luck getting the » * Add new comment link to show up.

I used this

<?php
print $node->links['comment_add']['title'].": ".url($node->links['comment_add']['href'])."";
?>

which I found on another post but all it displays is Add new comment: /comment/reply/194

What would I need to properly display the add comment link.

Thanks
Arek

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Hey end user I would just

Hey end user

I would just do:

<a href="<?php $node->links['comment_add']['href']; ?>" title="<?php $node->links['comment_add']['title']; ?>"><?php $node->links['comment_add']['title']; ?></a>

To get the correct array $vars I would place the following code at the bottom of my node page and check the array output for comments.

<?php var_dump($node); ?>

Let me know how you get on as I have the code somewhere i'll try and dig it out tonight.

end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Hey end user I would just

Well I kind of got it going by using this

<a href="<?php echo $node->links['comment_add']['href']; ?>#comment-form">Add Comment</a>

Problem is the Add Commment link is shows up again about the comment form which leads to this url comment/reply/comment/reply/196#comment-form (See attached ss)

What do I have to do to hide the Add Comment link when the user is in Comment Form page

Arek

AttachmentSize
pnw_comments.gif 33.67 KB
mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
hey end user just check for

hey end user

just check for form items in the array for comments then do some checks for example

<?php
if (!isset($var->links['commentformname'])) {
//output link
<link code>
}
?>

this code is just an example tho the link $var i have used wont work but you get the idea Smiling

end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Re: Hey end user

Well all I had to do was add a forward slash to the url like this

<a href="/<?php print $node->links['comment_add']['href']; ?>#comment-form">Add Comment</a>

Now it adds the proper url to the form anchor. I'm sure there is a cleaner way of doing this but I know nothing about programming so... Smiling

j
j's picture
Offline
Joined: 01/17/2008
Juice: 240
Few thinigs missing.

Hey I found a few things that are missing. - Product SKU how do I print that?

And Is there anyways Someone could help me print the 5 star rating module with this?

Thanks, - Justin Hinchcliffe

end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Hi This is what I have for

Hi

This is what I have for 5star

<?php print $node->content['fivestar_widget']["#value"];  ?>

And for SKU I think you have to use 'model'

<?php print $node->content['model']["#value"];  ?>

j
j's picture
Offline
Joined: 01/17/2008
Juice: 240
Re: Hi This is what I have for

Thanks a ton end user Smiling

j
j's picture
Offline
Joined: 01/17/2008
Juice: 240
Re: Re: Hi

Nice

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3284
Re: Re: Re: Hi

The node-product.tpl.php posted in this thread has a problem in that it uses CSS IDs like this: <div id="node">. This may be fine when just one product is displayed on a page, but causes problems when multiple products are displayed (such as in the Product list view, or in the teasers at the default home page /node, etc.) because IDs are supposed to be unique to a page.

I strongly suggest that, if you're going to create your own node-product.tpl.php, you start with the default node.tpl.php and emulate how it handles this situation by assigning an ID based on the node number of the product.

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
Thickbox - Only one image shows

Have nifty products tutorial part 1 more or less working. However, when the image is displayed only one shows. There are two as show in the png.

This is mostly likely the result of leaving something out in the code. Any suggestions on what to add so that multiple images will be displayed as originally designed in thickbox?

Sale in an image when using the tutorial. Have not yet tried to add the vertical line as in the original. Two images is the way it should look with both images being displayed.

Used the information in another thread to only display the sale price if the list price is less than the sell price and if the list price is not equal to zero. i.e. if list price is not filled in at the time the product is created then it lists at 0.00.

AttachmentSize
sale.png 27.42 KB
two_images.png 34.35 KB
Lyle's picture
Offline
AdministratoreLiTe!
Joined: 08/07/2007
Juice: -40969
Re: Thickbox - Only one image shows

Getting multiple images to be linked by thickbox requires the "rel" attribute on the thickbox link. When the thickbox script goes through the page looking for <a class="thickbox">, any of those that have the same rel will be linked together. In Ubercart, I added the node id of the product to that so multiple nodes on a page won't have all of their images linked together.

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
Thickbox

Lyle:

Using code from Thill as follows:

<?php print l(
   
theme('imagecache', 'product', $field_image_cache[0]['filepath'], $field_image_cache[0]['alt'], $field_image_cache[0]['title']),
   
$field_image_cache[0]['filepath'],
    array(
'class' => 'thickbox'), NULL, NULL, FALSE, TRUE); ?>

This code works and will display one image of two. The other one is missing.

Not sure where the rel has to be placed to display more than one image for a single listing. i.e. there are at times 2 images of the same product. One showing a closeup and other a full view, etc.

Jim

Lyle's picture
Offline
AdministratoreLiTe!
Joined: 08/07/2007
Juice: -40969
Re: Thickbox

Basically you need to duplicate that code with $field_image_cache[1] (or [2], etc. for more images). The rel tag can be put on the array with 'class':

<?php
 
array('class' => 'thickbox', 'rel' => 'anything at all')
?>

If all the images thumbnails are going to be the same, the smart thing is to run that code in a loop. The loop should provide the index to $field_image_cache.

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
Add to Cart - Not showing lower List Price

Is it possible to have the 'list price' transfered to the next screen when the add to cart button is used?

At present the 'sell price' of 29.99 is transfered once the add to cart button is used. The idea would be to have the 'list price' of 19.77 show up as the correct discounted price.

AttachmentSize
lower_price.png 26.57 KB
end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Re: Re: Re: Hi

What I did was copy everything out of my node.tpl.php file and removed and replaced
<?php print $content?>

with my current mode-product.tpl.php content

Then at the top in
<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">

I added

<?php print $node->nid; ?>

To make it look like this
<div class="node <?php print $node->nid; ?><?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
File locations for mode-product.tpl.php

Located the node.tpl.php file in the presently in use theme. This looks like the correct code/file.

However, not at all clear where to located "my current mode-product.tpl.php content"? Or where to extract that php code.

The overall thought is to use the default generated Ubercart screen and add the sale price box so that new CSS would not have to be use. Along with having the lower price (list price) show up at check out.

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
Product Nodes

EdUser:

Once I figured out that mode-product was node-product all went well. What is nice is that it finds all of the product nodes. And only one node.tpl.php file is needed per theme in place of one for node-product, one for node-car, one for node-doll, etc.

Good call and thanks so very much.

_________________________

Still have two remaining issues.

1) Thickbox only displays one image not like in the original Uber screen. Lyle offered a solution, but it did not carry over the image size of thumbnail (for 2nd image) as set in admin/settings/imagecache. And some CSS will be needed to make it look the same as the original screen.

2) As before, the 'sell price' ends up in checkout and not the new lower 'list price'. A major show stopper!

The plan is to have a non web person enter new products. Add a 'sell price' (as that is required) with the 'cost' and 'list price' defaulting to 0.00 as it does now. Then to lower a price, just the 'list price' (the lower one) will have to be changed for a product. The CSS box shows, the sell price has a line through it and the new list price is in red. If 'list price' is not changed, the box does not show and only the 'sell price' is displayed in black w/o a box, etc.

Anyway, that is the overall plan!

Thanks again.....

seutje's picture
Offline
Joined: 05/15/2008
Juice: 36
Re: Nifty Products Tutorial Part 1

I removed the $title, coz it already shows the title outside of the #node container
added modelnumber
added dimensions
changed pictures to refere to the base path (lotta ppl use a local webserver to test multiple drupal projects at the same time)
changed the sub picture loop not to include the main picture again
made main picture bigger, sub pictures smaller

changed all IDs to classes

<?php

// Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
?>

<div id="node">
<div class="productnode">
<?php // default image display  ?>
<div class="imagesholder">
<div class="mainimage"><a href="<?php print base_path() ?>files/imagecache/product/<?php print $imagePath; ?>"><img src="<?php print base_path() ?>files/imagecache/product/<?php print $imagePath; ?>" height="200px" width="200px" alt="Title"></a></div>
<?php // all image display  ?>
<ul class="other_imgs">
   <?php
          
// get all images except the default one that's already shown
           
foreach ($node->field_image_cache as $images) {
            if (
$images['filepath'] != $imagePath) {
       
?>

   <li><a href="<?php print base_path() ?>files/imagecache/product/<?php print $images['filepath']; ?>" title="<?php print $images['title']; ?>" rel="pagination"><img src=" <?php print base_path() ?>files/imagecache/product/<?php print $images['filename']; ?>" width="50" height="50" alt="<?php print $images['alt']; ?>"></a></li>
    <?php  
       
} }
       
?>

</ul>
</div>
<?php // model number ?>
<?php print $node->content['model']['#value']; ?>
<?php // product description  ?>
<div class="productdesc"><?php print $node->content['body']['#value'];  ?></div>
<?php // dimensions ?>
<?php print $node->content['dimensions']['#value']; ?>
<?php  // list price and sell price display  ?>
<div class="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>

<div id="cartButtons">
<?php // add to cart buttons ?>
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
</div>
</div>

hope this helps some1 besides myself ^^

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
Discounted price does not show up - Only the higher sell price

Will give this a try on Thursday. So far have it working except for the 2nd image. And the new list price does not show up in the shopping cart. It still uses the 'sell price' and not the discounted price. Even tested it with the original file and the higher price still shows up.

Hopefully your modifications have solved these two issues.

Have a nice evening and thanks for posting the new code.

Jim

vincent@drupal.org's picture
Offline
Joined: 05/18/2008
Juice: 30
Preselection radio button

Hello -

Works for me but I have a product with attributes which don't seem to appear in the data model ($node). My attribute is a radio-button selection between 2 options. The radio button group appears in the CART field (so HTML), so I cannot really customised how it is printed. Any idea on how/where to do that?

Also with this I seem to have lost the 'default' value for my option, now no option comes as pre-selected.

I would also have liked to show in the main product the "from price".

For example, I have a tea pouch product that is available in 2 sized: 100g and 200g.

My product is priced £0, the 100g £10 and the 200g £19.
I'd like to show in the product description "from £10".

Any idea on how to do this?

blueeeeie's picture
Offline
Joined: 05/19/2008
Juice: 2
Hi, I tried out the code

Hi,

I tried out the code given and it worked great. But currently when you click on the image thumbnails, it will open a new page showing the image that the user had clicked on.

What I'd like is when the user clicks on the 2nd thumbnail, the product page would refresh and instead of showing the first image in the image placeholder, it would show the 2nd thumbnail's image instead. And the user would still be on the same product page.

Is it possible for ubercart to do that?

kimalders's picture
Offline
Joined: 05/18/2009
Juice: 7
blueeeeie wrote: Hi, I tried
blueeeeie wrote:

Hi,

I tried out the code given and it worked great. But currently when you click on the image thumbnails, it will open a new page showing the image that the user had clicked on.

What I'd like is when the user clicks on the 2nd thumbnail, the product page would refresh and instead of showing the first image in the image placeholder, it would show the 2nd thumbnail's image instead. And the user would still be on the same product page.

Is it possible for ubercart to do that?

Rad through all posts, no answer to this found.
I would appreciate it very much if anyone could post it here. Or just a hint.

I have this now:

<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="112" alt="<?php print $images['alt']; ?>">
</a>

But i would like to have :

<a href="current-page-with-the-clicked-image-in-the-large-placeholder" ... > </a>

kimalders's picture
Offline
Joined: 05/18/2009
Juice: 7
Ok, i am here now: I created

Got it;

$imagePath = $node->field_image_cache['0']['filepath'];
$current_image = $node->field_image_cache[$_GET['id']]['filepath'];

<div class="prod_img_blok">
   <ul class="other_imgs">
      <?php
        
foreach ($node->field_image_cache as $images) {
        
$counter ++;
         if (
$images['filepath'] == $imagePath) {?>

             <li class="activeprodimg">
         <?php }else{ ?>
             <li >
         <?php } ?>
             <a href="/node/<?php print $node->nid ?>&id=<?php print $counter; ?>" title="<?php print $images['title']; ?>" >
                <img src="/files/imagecache/product/<?php print $images['filename']; ?>" width="112" alt="<?php print $images['alt']; ?>">
             </a>
          </li>
          <?php $counter=0;
           }
?>

    </ul>
    <div id="image">
         <img src="/files/imagecache/product/<?php print $current_image; ?>" alt="<?php print $images['title']; ?>">
    </div>
</div>

ksansana's picture
Offline
Joined: 12/16/2009
Juice: 3
trick with thumbnails

Can you give the full code, please, how to do this trick with thumbnails, I'm trying to find the decision, but no result. I'm new in php and drupal,may be I'm placing this code in wrong place, thnx

ideal2545's picture
Offline
Joined: 01/08/2010
Juice: 6
Hi Everyone, This thread has

Hi Everyone,

This thread has been absolutely fantastic, helped me get moving!

Question:

Has anyone been able to get http://drupal.org/project/tabs working with a customized product page. I have it alongside with http://drupal.org/project/cck_fieldgroup_tabs. The tabs work fantastic when I dont have any customizations on the product display page, the tabs come up just fine, but obviously without themeing. So ive been trying to find a way to print out the tabs to a customized product page, but have been having no luck. Does anyone have an idea?

Thanks,
Jon

As soon as I figure this out, ill definetly be posting how to do it... if someone doesnt beat me to it!

end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Nifty Products Tutorial Part 1

Does anyone know if its possible to server up a different node-product.tpl.php template file depending on role?

Lyle's picture
Offline
AdministratoreLiTe!
Joined: 08/07/2007
Juice: -40969
Re: Re: Nifty Products Tutorial Part 1

That's an interesting idea. I know it would take some hacking of your theme's template.php file. Basically you'd override the way phptemplate builds the filename of the node template. A couple of places to start looking is phptemplate_node() and _phptemplate_callback(). The callback function takes suggestions for the template filename from the functions that call it.

ericmalone's picture
Offline
Joined: 05/15/2008
Juice: 31
Need thickbox for picture

First of all, thanks for the tutorial. I would love to use this, but I want to keep thickbox and I don't know how to do it with your code. I can get it to come back with this that I pulled from the node.tpl.php

<?php
print $content
?>

But that leads to duplicate things and it's messy.

ericmalone's picture
Offline
Joined: 05/15/2008
Juice: 31
Re: Need thickbox for picture

End User, would you mind posting your code?

What I'm trying to do is keep the product display the way it is but add the flexibility of the product-node.tpl.php file so I can change things like adding the list price and a possibly a discount disclaimer.

end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Re: Need thickbox for picture

Well this is my product node template

<div class="node-<?php print $node->nid; ?><?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print
$picture;
    }
?>

    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <div class="content">
<table cellpadding="0" cellspacing="0"  class="product">
  <tr>
     <td align="center" class="product_image">
     <?php

    

// Grabs the firsts image path and sets $imagePath.
    
$imagePath = $node->field_image_cache['0']['filepath'];
?>

     <br /><?php print l(
   
theme('imagecache', 'product', $field_image_cache[0]['filepath'], $field_image_cache[0]['alt'], $field_image_cache[0]['title']),
   
$field_image_cache[0]['filepath'],
    array(
'class' => 'thickbox'), NULL, NULL, FALSE, TRUE); ?>

   </td>
   <td  class="product_info">
<div id="node">
<?php // product title  ?>
<p class="product-title"><?php print $title ?></p>
<p class="product-titles">Product Details</p>
<?php print $node->content['weight']["#value"]; ?>
<?php print $node->content['dimensions']["#value"]; ?>
<p class="product-titles">Product Rating</p>
<?php print $node->content["fivestar_widget"]["#value"];  ?>
<p class="product-titles">Product Reviews:</p>
Product Reviews <?php print $node->comment_count?> | <a href="/<?php print $node->links['comment_add']['href']; ?>#comment-form">Review Product</a> | <a href="#read_reviews">Read Reviews</a>
</div>
<br />
<div id="cartContainer">
<div id="cartAdd">
<?php // add to cart buttons ?>
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
<div id="cartPrice">
<?php  // list price and sell price display  ?>
<p class="product-titles">PNW Everyday Low Price</p>
<p id="productPrices" class="productGeneral"><?php print uc_currency_format($node->sell_price); ?></p>
</div>
<div id="spacer"><!-- nothing --></div>
</div>
</td>
</tr>
</table>
<hr />
<?php print $productupsell ?>
<br />
<p class="product-titles">Description:</p>
<?php // product description  ?>
<?php print $node->content['body']['#value'];  ?>
<br />
<a href="/<?php print $node->links['comment_add']['href']; ?>#comment-form" name="read_reviews">Review Product</a>
</div>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>
  </div>

Which looks like this http://www.pnwgardensupply.com/growshop/nutrients/green_planet/hydro_fue... This is not a live store yet.

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1430
Image Resize

End User:

Have you found a way to get thick box to display more than one image and to resize the 2nd or 3rd image as in the original product/catalog module?

end user's picture
Offline
Joined: 01/11/2008
Juice: 1716
Re: Image Resize

No I haven't as I only need one image for my products for now.

futurist's picture
Offline
Joined: 08/08/2007
Juice: 114
Re: Re: Image Resize

This method works fine for me:

$index = 0;
foreach ($node->field_image as $image) { // if your image field is named 'image'
  $index++;
  $filepath = $image['filepath'];
  $alt = $image['alt'];
  $title = $image['title'];
  if ($index == 1) {
    // first image large
    print '<a href="/'.$filepath.'" rel="'.$node->type.'-'.$node->nid.'" title="'.$alt.'" class="thickbox">'.theme('imagecache', 'large', $filepath, $alt, $title).'</a>';
  } else {
    // remaining images smaller
    print '<a href="/'.$filepath.'" rel="'.$node->type.'-'.$node->nid.'" title="'.$alt.'" class="thickbox">'.theme('imagecache', 'small', $filepath, $alt, $title).'</a>';
  }
}

You just need to set up two imagecache presets: one for the 'large' and one for the 'small' image.
Found it here.