Does anyone have a version of the node-product.tpl.php file that will create an output that is exactly like the default ubercart product page style. I am trying to modify the default slightly but I do not want to totally redesign it yet. 
Thanks
Tue, 08/19/2008 - 20:43
looking for that too
Is any chance to get one?
I've found different solutions on this page but looking for the default one.
Re: Match ubercart default with node-product.tpl.php
I'm interested in this.
Also, anything related to the Product List (on Catalog) because i want to change small things on the product grid.
Re: Match ubercart default with node-product.tpl.php
Yeah i agree, would be really handy to have the default layout as a tpl.php file to fiddle around with.
The nifty products page is really good, i just used the code from about half way down the thread and it works very well.
m
incredible?
As a non-themer I find it highly difficult to change the product page without some pointers.
Is it too hard for the devs to come up with the file requested by the original poster?
Re: incredible?
This might not be exactly what you are looking for, but the best I can do at the moment. Here is an example of the Node-product-tlp.php file.
<!-- start node-product-page.tpl.php -->
<div id="node-<?php print $node->type; ?>" class="node clear-block">
<div class="content">
<?php if($node->content['image']['#printed']): ?>
<?php print $node->content['image']['#value']; ?>
<?php endif; ?>
<div id="content-body">
<h1 class="title"><?php print $title; ?></h1>
<?php print $node->content['body']['#value']; ?>
</div>
</div>
<?php print $node->content['add_to_cart']['#value']; ?>
<div id="product-info">
<h2 class="title">
Product Information
</h2>
<?php
unset($node->content['body']);
unset($node->content['image']);
unset($node->content['display_price']);
unset($node->content['add_to_cart']);
unset($node->content['#children']);
foreach($node->content as $key => $field) {
if($field['#printed']) {
print '<div class="product-field">'. $field['#value'] .'</div>';
}
}
?>
</div>
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
</div>
thill wrote:This might not
This might not be exactly what you are looking for, but the best I can do at the moment. Here is an example of the Node-product-tlp.php file.
<!-- start node-product-page.tpl.php -->
<div id="node-<?php print $node->type; ?>" class="node clear-block">
blablabla...
</div>
Hey thill!
It's quite there! Are you willing to give it another try?
I'm posting differences between the "default one" and yours, using the Garland Theme
Default look, unchanged:
http://files.uploadbag.com/Files/Public/b888aaac_png_d5abb516__productpa...
Thil's look, with a custom node-productpage.tpl.php:
http://files.uploadbag.com/Files/Public/a3788376_png_41639625__productpa...
As you can see, the second screenshot doesnt show the Category terms, among other small differences.
Re: thill wrote:This might not
I am sorry if I misled you, I wasn't saying that code was the exact code, it was just a custom one I have used for a site. I was just trying to give you something to work with to make it to your liking.
I understand thil. Believe
I understand thil.
Believe me, i've been trying to achieve what i want but with no success.
I have decided to go with a simple look, basically the same as the "default one" .
The only thing i need to add is Lightbox support. And for that sole reason i have to change the template/theme.
As i do this, the images popup with Lightbox but the thumbnails are aligned on the left side of the screen but i want them on the right hand side (just like the default way)!
Do you know how could i achieve this?
Here's my full template code (it's different from yours):
<!-- lightbox is working, but thumbs are on the left side of the page-->
<?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 ?>
<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
<a href="<?=base_path()?><?=$imagePath?>" rel="lightbox[prod]"><img src="<?=base_path()?>files/imagecache/product/<?=$imagePath?>" alt="<?=$title?>" title="<?=$title?>"></a>
<?php // all image display ?>
<ul class="other_imgs">
<?php foreach ($node->field_image_cache as $images) { if ($images['filepath'] != $imagePath) { ?>
<a href="<?=base_path()?><?=$images['filepath']?>" rel="lightbox[prod]" title="<?=$title?>">
<img src="<?=base_path()?>files/imagecache/uc_thumbnail/<?=$images['filename']?>" alt="<?=$title?>"></a>
<?php } } ?>
</ul>
<div id="cartButtons">
<?php // add to cart buttons ?>
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
</div>
Here's a screenshot to make it easier: http://files.uploadbag.com/Files/Public/57016b57_png_1f1d9734__pleasemak...
got it
Ok, its working better now (still far from perfect).
The code for the image part to be aligned on the right should include the proper classes, like this:
<div class="product_image">
<?php // default image display ?>
<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
<a href="<?=base_path()?><?=$imagePath?>" rel="lightbox[prod]"><img src="<?=base_path()?>files/imagecache/product/<?=$imagePath?>" alt="<?=$title?>" title="<?=$title?>" class="imagecache imagecache-product"></a>
<?php // all image display ?>
<ul class="other_imgs">
<?php foreach ($node->field_image_cache as $images) { if ($images['filepath'] != $imagePath) { ?>
<a href="<?=base_path()?><?=$images['filepath']?>" rel="lightbox[prod]" title="<?=$title?>">
<img src="<?=base_path()?>files/imagecache/uc_thumbnail/<?=$images['filename']?>" alt="<?=$title?>" class="imagecache imagecache-uc_thumbnail"></a>
<?php } } ?>
</ul>
</div>
It's coming along boys!
Hello,
I've worked on these things and i'm posting a new file that can be used to achieve the "default look".
It's very easy to edit and add other fields, etc, and still keep the way it looks.
This also has builtin Lightbox support. If you dont use it (why not?), you will probably have to change that part.
<!--
Doomed's own ubercart product template: this one should look very similar to the 'default look'.
It has only few selected fields and comes with Lightbox support.
Created with the help of many people on the forums of Ubercart.org .
Last update: 21/nov/2008
-->
<?php // Grabs the firsts image path and sets $imagePath.
$imagePath = $node->field_image_cache['0']['filepath'];
?>
<!-- node and node inner -->
<div class="node <?php print $node_classes ?>" id="node-<?php print $node->nid; ?>">
<div class="node-inner">
<!-- show categories, etc. -->
<?php if ($unpublished || $submitted || count($taxonomy)): ?>
<div class="node-top">
<?php if ($unpublished) : ?>
<div class="unpublished"><?php print t('Unpublished'); ?></div>
<?php endif; ?>
<?php if ($submitted): ?>
<div class="submitted">
<?php print $submitted; ?>
</div>
<?php endif; ?>
<?php if (count($taxonomy)): ?>
<div class="taxonomy"><?php print t(' Categorias: ') . $terms; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- /show categories, etc. -->
<!--show default image first, then others-->
<div class="product_image">
<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
<?php if (!$node->field_image_cache == NULL) { ?>
<a href="<?=base_path()?><?=$imagePath?>" rel="lightbox[prod]">
<img src="<?=base_path()?>files/imagecache/product/<?=$imagePath?>" alt="<?=$title?>" title="<?=$title?>" class="imagecache imagecache-product">
</a>
<?php } ?>
<?php if (count($node->field_image_cache) > 1) { ?>
<ul class="other_imgs" style="list-style-type:none; margin-top:10px; text-align:center;">
<?php foreach ($node->field_image_cache as $images) { if ($images['filepath'] != $imagePath) { ?>
<li style="display:inline; padding:0; margin-left:0;">
<a href="<?=base_path()?><?=$images['filepath']?>" rel="lightbox[prod]" title="<?=$title?>">
<img src="<?=base_path()?>files/imagecache/uc_thumbnail/<?=$images['filename']?>" alt="<?=$title?>" class="imagecache imagecache-uc_thumbnail">
</a>
</li>
<?php } } ?>
</ul>
<?php } ?>
</div>
<!--/show default image first, then others-->
<!--show fields: sku, description, prices-->
<?php //print $title ?>
<div class="model"><?php print $node->model ?></div>
<p><?php print $node->content['body']['#value']; ?></p>
<div class="sell_price">Preço: <?php print uc_currency_format($node->sell_price); ?></div>
<div class="display_price"><?php print uc_currency_format($node->sell_price); ?></div>
<!--/show fields: sku, description, prices-->
<!--show add to cart button-->
<div class="add_to_cart">
<?php print $node->content['add_to_cart']["#value"]; ?>
</div>
<!--/show add to cart button-->
<!--wish i knew-->
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
<!--/wish i knew-->
</div>
</div>
<!-- /node and node inner -->
It's working pretty well atm.
Use it and post feedback/improvements - i'm specially interested in removing redundant/unnecessary stuff.
| Attachment | Size |
|---|---|
| node-productdoomed.tpl_.php_.txt | 2.9 KB |
Re: Match ubercart default with node-product.tpl.php
Why would you use lightbox and not the built in thickbox support? Is it that much better?
thill wrote:Why would you
Why would you use lightbox and not the built in thickbox support? Is it that much better?
What do you mean it comes with built in thickbox support?
Isnt thickbox a module you have to install and enable sepearately? Just like lightbox, etc ?
Re: thill wrote:Why would you
I integrated your script, but I cant seem to get the thumbnails for the lightbox working. It displays just the text on the product page, no thumb preview. When I click the link lightbox displays images.
Any help would be appreciated.
Re: Re: thill wrote:Why would you
Your php might not be configured for the short tag. Here's what I did, but I didn't replicate the multiple images because the site I'm working on doesn't have them.
<div class="product-image">
<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
<?php if (!$node->field_image_cache == NULL) { ?>
<a href="<?php print base_path() . $imagePath; ?>" rel="lightbox[prod]">
<img src="<?php print base_path() . $imagePath; ?>" alt="<?php print $title; ?>" title="<?php print $title; ?>" class="imagecache imagecache-product">
</a>
<?php } ?>
</div>
Re: Match ubercart default with node-product.tpl.php
I got mine to look the way I need it to. Mine has the product pictures working with proper thumbnails (with the main image's thumbnail bigger than the rest) with Lightbox support, the product images are left-aligned, price and SKU not shown, and "Add to cart" removed (my client needs it that way).
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print $submitted; ?></span>
<?php endif; ?>
<div class="content clear-block">
<?php //print $content ?>
<table>
<tr>
<td>
<!--<div class="product_image">-->
<?php // main picture ?>
<?php $imagePath = $node->field_image_cache['0']['filepath']; ?>
<?php //print base_path() . $imagePath; ?>
<a href="<?php print base_path() . $imagePath?>" rel="lightbox[prod]">
<img src="<?php print base_path() . "sites/default/files/imagecache/product/" . $imagePath ?>" alt="<?php print $title?>" title="<?php print $title?>">
</a>
<?php // other pictures ?>
<ul class="other_imgs">
<?php foreach ($node->field_image_cache as $images) { if ($images['filepath'] != $imagePath) { ?>
<a href="<?php print base_path()?><?php print $images['filepath']?>" rel="lightbox[prod]" title="<?php print $title?>">
<img src="<?php print base_path() . "sites/default/files/imagecache/uc_thumbnail/" . $images['filename']?>" alt="<?php print $title?>"></a>
<?php } } ?>
</ul>
<!--</div>-->
</td>
<td>
<?php print $node->content['body']['#value']; ?>
</td>
</tr>
</table>
</div>
<div class="clear-block">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>
File System Path changes lead to missing images
There is a common problem with multisite installations and usually with development sites moving to production sites where the File System Path is changed but the "files" table has this information hard coded. There is a sql statment to update the "files" table for past problem data.
update files set filepath = REPLACE(filepath, "sites/default/files/", "sites/example/files/"); http://www.ubercart.org/comment/edit/60956
or
update files set filepath = REPLACE(filepath, "sites/default/files/", "");
depending on who's post you read. I used the first one and found it worked after the second one did not.
This overall problem is generally overcome by using symlinks in the sites directory. Basically you point the symlink with the name of "example.com" to the directory of "example". There are many other posts on this so if you are having this problem search them out. It often appears as missing images and other files that have been uploaded after moving a site (or renaming) to a new directory.
However, I found that the above node-product.tpl.php had one flaw that was related to this because "sites/default/files" is hard coded. I replaced this with file_directory_path() and it works now in a multisite environment with an altered file system path.
So now this line:
<?php
print base_path() . "sites/default/files/imagecache/product/" . $imagePath
?>reads like this:
<?php
print base_path() . file_directory_path() . "/imagecache/product/" . $imagePath
?>I also altered the line with the uc_thumbnail in the same way. Hope this helps.
Alt text is not the title
I'm looking for a way to display the alt text in the lightbox caption and not the title of the node. The images have different colors and that should be displayed in the caption.
this is part of the code i have in my custom product template
<a href="/<?php print $images['filepath']; ?>" class="lightbox" rel="lightbox[product]" alt="<?=$title?>" title="<?php print $title?>"><img src="/sites/default/files/<?php print $images['filename']; ?>" width="95" height="95" alt="<?php print $images['alt']; ?>"></a></li>
Updated node--product.tpl.php for Ubercart 3 on Drupal 7?
hi anyone have any updates on the node--product.tpl.php for Ubercart 3 on Drupal 7?
There is one made for the prosper theme for drupal 7, but its a subtheme of fusion and i cant exactly just copy that since i already built my templates around the Zen theme. Alot of the vars are calling fusion specific items so cant just copy it over.
Re: Updated node--product.tpl.php for Ubercart 3 on Drupal 7?
Bump for the above... I'd be very interested in anything anybody can tell me about creating a template for UC3 and D7. The one I'm working with currently can't find the images, or pretty much anything useful. So I'd be grateful for any help.
Answer to original question
There's lots of helpful stuff in this thread, but I don't see the original question truely answered anywhere:
Does anyone have a version of the node-product.tpl.php file that will create an output that is exactly like the default ubercart product page style.
The answer is stupidly easy, but took me a while to figure out: "Product" is just another drupal content type, same as any other... Just copy the default node.tpl.php and rename node-product.tpl.php if you're looking for the true exact default as your starting point for modifications.
This may also address the question for those looking for a D7 solution as well...