Home » Forums » Ubercart » Support

Themeing Product View

Submitted by VitaLife on Mon, 10/29/2007 - 23:08
VitaLife

Posts: 95
 Joined: 10/29/2007
Bug Finder

I figured this would have been asked somewhere on the site, but I cannot find it. I'm upgrading the shopping on my platform to Ubercart, and I'm having problems determining the best way to alter the product summary and detail pages.

Currently I have this on my site as a product list: (non-ubercart)
http://www.ipodfitnesscenter.com/shopping

And this is my product detail: (non-ubercart)
http://www.ipodfitnesscenter.com/shopping/viewproduct/759

As you can see, the add to cart buttons now use only the paypal cart and I'm replaceing payal cart with UberCart.

Here are the prety much standard Ubercart pages

http://www.ipodfitnesscenter.com/products or
http://www.ipodfitnesscenter.com/catalog/166/supplements
and
http://www.ipodfitnesscenter.com/content/celadon-plus-multivitamin

I want to make these pages look like the ones above. First, I can't figure out how to add the description to the products page. I tried to alter the view, but when I add node->body, I get all the node teaser, along with aonther image, and another add to cart button. Next, where are these pages themed?

An alternative idea, (I'd rather theme the pages, but..) is there a way I can just create an Add to Cart button on my current views above that would add to the ubercart instead of drupal cart?

Thanks for the help everyone.
JimF
permalink #1 Tue, 10/30/2007 - 09:25
Lyle

Posts: 2244
 Joined: 08/07/2007
AdministratoreLiTe!

That's really strange that Views doesn't give you the option of displaying just the Body text without all the other stuff. I suppose you can display the teaser and take out the parts it already displays.

The product module integrates its fields with Views so you can add the "Product: Add to cart link" field to display a button for each node. I recommend not doing that if you use the attribute module, though. I think they get in the way. If you do use them, maybe you can think of a way to deal with them.

permalink #2 Tue, 10/30/2007 - 10:09
Ryan

Posts: 5269
 Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

One thing you can try that I've done in the past is simply add a textfield to the product content type called "Product list description" or something like that. Include the blurb you want to show up in the products list (copy/paste the description if you want) and display it in the view, so you won't have to worry about access to the node body at all.

permalink #3 Wed, 10/31/2007 - 21:49
VitaLife

Posts: 95
 Joined: 10/29/2007
Bug Finder

I pretty much got the affect I wanted by installing the contemplate module and editing the teaser view. Then I deleted the other fields from the view. Here is the new Ubercart View of the page

http://www.ipodfitnesscenter.com/supplements

permalink #4 Wed, 10/31/2007 - 22:19
VitaLife

Posts: 95
 Joined: 10/29/2007
Bug Finder

I got it all to work pretty well. I used contemplate to modify the teaser and was able to make a good looking view page.
http://www.ipodfitnesscenter.com/ipodproducts

To create the product detail page took quite a bit of code.
http://www.ipodfitnesscenter.com/content/zeacaps

First I had to redirect requests to the proper template by putting this in my page.tpl.php file.

<?php
if (($node->type == 'supplements' || $node->type == 'ipodfitness') && (arg(2) <> 'edit'))  {/* check if it's a blog node */
    include 'page-shopping.tpl.php'; /*load  page-blog.tpl.php */
    return; }
?>

The arg(2) let me keep the normal formatting for editing the products while displaying them using my customer friendly view.

I replaced the print $content in my page template with this

<?php
   
     $add_to_cart_output = theme_uc_product_add_to_cart($node);
     $pic = '/home/vitalife/public_html/' .$node->field_image_cache[0][filepath] ;
    $price = 'MSRP: $' . number_format($node->list_price,2). '<br><h2>Your Price: <b>$' . number_format($node->sell_price,2) . '</b></h2>';               
        if (file_exists($pic)) {
                    $dim = ImageSize($pic,300,500);
                    $dim = explode(",", $dim);
                    } else {
                    $dim[0] = 500;
                    $dim[1] = 500;
                    }
                   
//print_r($node);                   

print '
<table bgcolor="#FFFFFF"  width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
                        <td><table  width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="13"><img src="/img/pro_top_left.gif" alt="" width="13" height="37" /></td>
                            <td class="pro_top_bg">' . $node->title . '</td>
                                <td align=right class="pro_top_bg">  <a href=/cart><img src="/img/view_cart.gif"></a>   <a href=/cart/checkout><img src="/img/checkout.gif"></a>   </td>
                            <td width="13"><img src="/img/pro_top_right.gif" alt="" width="13" height="37" /></td>
                          </tr>
                        </table></td>
                      </tr>
                      <tr>
                        <td align="left" class="cnt_pad"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                          <tr valign="top">
                            <td width="24%"><table border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td><img src="/' .$node->field_image_cache[0][filepath]  .'" width="' .$dim[0] .'" height="' .$dim[1] .'" border="0"  class="img_brd2" /></td>
                              </tr>
                              <tr>
                                <td align="center" class="img_brd2" style="border-top:0;"><p class="pro_txt_hd">' . $node->title . '</p>

                                  <img src="/img/spacer.gif" alt="" width="1" height="3" />
                                  SKU: ' . $node->model  . '<br>
                                   ' . $price  . '<br>' .
                                      $add_to_cart_output . '

                                  </td>
                              </tr>
                           
                           
                             </table></td>
                            <td width="76%" style="padding:0 0 0 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                            <td>' .$node->body .'</td>
                          </tr>
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td class="box_hd">Testimonials</td>
                            <td class="box_hd" align="right"><b>
                                <a href=/comment/reply/' .$node->nid .'#comment-form>
                                    Add your Testimonial</a></b>
                            </td>
                          </tr>
                          <tr>
                            <td colspan=2>&nbsp;</td>
                          </tr>
                          <tr>
                            <td colspan=2>'. comment_render($node, $node->cid) .'</td>
                          </tr>
                                </table></td>
                              </tr>
                            </table>
                      </tr></table>';
   
               
?>

The most difficult part was getting comments to display, after I discovered comment_render, all that was left was to modify my commnet.tpl.php to allow me to alter the format so it would go in a table. I added this to the top of my comment template.

<?php

$node = db_fetch_object(db_query('select type from {node} where nid = %d',$comment->nid));
if ($node->type == "supplements"  ||  $node->type == "ipodfitness") {
echo "<div align='right' class='shrink'>";
echo $picture;
echo "</div>";

  if ($comment->new) echo '<font color=#DF6401>&nbsp;' . drupal_ucfirst($new) . '&nbsp;</font>';
  if ($submitted) {
    echo '<span class="submitted">';
    echo t('!date — !username', array('!username' => theme('username', $comment), '!date' => format_date($comment->timestamp)));
    echo '</span>' ;
    }

print $content ;
if ($links) echo '<div class="links">' .  $links . '</div><hr>';

return;
}
?>

I don't know much about using the ubercart image tools yet, so if you know of a better way for me to display my photos, please let me know.
Jim

permalink #5 Thu, 11/01/2007 - 08:36
Lyle

Posts: 2244
 Joined: 08/07/2007
AdministratoreLiTe!

Ãœbercart uses theme_imagecache for most of it's image needs. Just put theme('imagecache', $preset, $filepath, $alt, $title) in your code. $preset will probably be 'product' or 'thumbnail', but it can be any of the presets for imagecache. $filepath is still $node->field_image_cache[0]['filepath']. The field_image_cache arrays have 'alt' and 'title' keys too if you want to use them.

permalink #6 Thu, 11/01/2007 - 08:38
Ryan

Posts: 5269
 Joined: 08/07/2007
AdministratorHead Code Monkey - I eat bugs.

Jim, the results are awesome, and I appreciate you posting the process up here for others to learn from. Smiling

(One minor thing, which you may have already noticed, is the Pouch Color and price overlap for the shoe pouch on the product list. I'm on 1024x768 resolution.)

permalink #7 Thu, 11/01/2007 - 09:51
VitaLife

Posts: 95
 Joined: 10/29/2007
Bug Finder

Thanks Ryan,
Actually, it's a browser thing. Looks good on IE but not on FF, Thanks for pointing it out.

permalink #8 Thu, 11/01/2007 - 13:46
oslinux
Posts: 203
 Joined: 09/06/2007

IE???????? Get operah or firefox, man !!!!