Change Layout on Product.tpl
 

I need to redesign the layout on product.tpl in such a way that it will show the product image on the left and on the right side I would like to have the starburst with the price reduction ( if any ) the product price and a copy of add to cart button .
I managed to bring the image in top and the product description under it but all my trials in moving the starburst ,price or add to cart button results in a broken code.
Can somebody help me please ?
I have atached my product.tpl file ver 4.1.11

Re: Change Layout on Product.tpl
 

Your best bet is to open it up in an html editor so you can better understand the mass of nested tables.

Re: Change Layout on Product.tpl
 

Thank you for the answer.
I am using Dreamweaver and I looked at the tables but I don't know how to include the starburst which contains the discounted price before the full description.
It seems save_percent_box is linked with the full description and if I try to reverse them I will get broken code .


<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}</td>
{if $product.taxed_price gt 0 and $product.list_price gt 0}
<td align="right" valign="top" width="60" id="save_percent_box"{if $product.taxed_price >= $product.list_price} style="display: none;"{/if}>

<table width="60" cellspacing="1" cellpadding="2">
<tr>
<td class="SaveMoneyLabel">
<br />
{math equation="100-(price/lprice)*100" price=$product.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}
&nbsp;<span id="save_percent">{ $discount }</span>% </td>
</tr>
</table> </td>
{/if}</tr>
</table>

Re: Change Layout on Product.tpl
 

Re: Change Layout on Product.tpl
 

Thanks a lot balinor . You are the man.
However I am trying to get the full description under the image and star burst .
So the format will be image starburst
fulldescription

I have created the table rows next to the image but when i am trying to take the code there including the smarty tags i am geting parsing erors.

I really apreciate your help .

Here is the code where you can see the the rows I have created .
Ideally I would like to have image starburst
price
extra field
fulldescription
P.S. I tried to make the layout of how I would like to get the page but it seems the formating is lost when the message is saved.


<tr>
<td width="58%" rowspan="4"><span class="PImgBox">{ if $active_modules.Detailed_Product_Images ne "" && $config.Detailed_Product_Images.det_image_popup eq 'Y' && $images ne '' && $js_enabled eq 'Y'}
{include file="modules/Detailed_Product_Images/popup_image.tpl" }
{else}
{include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}&nbsp;
{/if}
{* include file="thickbox/thickbox_productpage.tpl" *}
{if $active_modules.Magnifier ne "" and $config.Magnifier.magnifier_image_popup eq 'Y' and $zoomer_images ne '' and $js_enabled eq 'Y' and $printable neq 'Y'}
{include file="modules/Magnifier/popup_magnifier.tpl"}
{/if} </span></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="27%">&nbsp;</td>
<td width="15%" valign="top">&nbsp;</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="3" valign="top">

<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{if $product.taxed_price gt 0 and $product.list_price gt 0}
<td align="right" valign="top" width="60" id="save_percent_box"{if $product.taxed_price >= $product.list_price} style="display: none;"{/if}>

<table width="60" cellspacing="1" cellpadding="2">
<tr>
<td class="SaveMoneyLabel">
<br />
{math equation="100-(price/lprice)*100" price=$product.taxed_price lprice=$product.list_price format="%3.0f" assign=discount}
&nbsp;<span id="save_percent">{ $discount }</span>% </td>
</tr>
</table> </td>
{/if}
<td>{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}</td>
</tr>
</table>

Re: Change Layout on Product.tpl
 

Try this one...(I don't have a working copy of the 4.0.x version so I couldn't check it)

Re: Change Layout on Product.tpl
 

Thank you a lot. I will try it and I will keep you posted.

Re: Change Layout on Product.tpl
 

I have tried your product tpl but the starburst and the add to cart button is coming under the picture .
I would like them to be displayed next to the picture.
I have atached the images to make it more clear.

When I try to move the code in the columns I have created next to the picture the code is broken and I am geting smarty errors. Obviously I either break a table or a smarty tag.

Re: Change Layout on Product.tpl
 

Not to worry I am almost there now . I just need to align them.

Thanks a lot for your support