Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Change Layout on Product.tpl

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 11-21-2008, 03:16 AM
 
Isleman Isleman is offline
 

Senior Member
  
Join Date: Jan 2005
Location: UK
Posts: 128
 

Default 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
Attached Files
File Type: tpl product.tpl (10.9 KB, 131 views)
__________________
X-Cart ver. 4.4.2 ( www.responseelectronics.com )
X-Cart ver. 4.1.11 ( www.mrdoorbell.com)
Reply With Quote
  #2  
Old 11-21-2008, 03:18 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default 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.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #3  
Old 11-21-2008, 03:32 AM
 
Isleman Isleman is offline
 

Senior Member
  
Join Date: Jan 2005
Location: UK
Posts: 128
 

Default 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>
__________________
X-Cart ver. 4.4.2 ( www.responseelectronics.com )
X-Cart ver. 4.1.11 ( www.mrdoorbell.com)
Reply With Quote
  #4  
Old 11-21-2008, 04:57 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default Re: Change Layout on Product.tpl

Code:
<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>
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #5  
Old 11-21-2008, 06:30 AM
 
Isleman Isleman is offline
 

Senior Member
  
Join Date: Jan 2005
Location: UK
Posts: 128
 

Default 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>
__________________
X-Cart ver. 4.4.2 ( www.responseelectronics.com )
X-Cart ver. 4.1.11 ( www.mrdoorbell.com)
Reply With Quote
  #6  
Old 11-22-2008, 05:15 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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)
Attached Files
File Type: txt new- product.tpl.txt (11.6 KB, 112 views)
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #7  
Old 11-25-2008, 06:19 AM
 
Isleman Isleman is offline
 

Senior Member
  
Join Date: Jan 2005
Location: UK
Posts: 128
 

Default Re: Change Layout on Product.tpl

Quote:
Originally Posted by JWait
Try this one...(I don't have a working copy of the 4.0.x version so I couldn't check it)

Thank you a lot. I will try it and I will keep you posted.
__________________
X-Cart ver. 4.4.2 ( www.responseelectronics.com )
X-Cart ver. 4.1.11 ( www.mrdoorbell.com)
Reply With Quote
  #8  
Old 11-25-2008, 07:02 AM
 
Isleman Isleman is offline
 

Senior Member
  
Join Date: Jan 2005
Location: UK
Posts: 128
 

Default 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.
Attached Thumbnails
Click image for larger version

Name:	Product-tpl-.jpg
Views:	192
Size:	8.7 KB
ID:	1253  Click image for larger version

Name:	Product-tpl-wanted.jpg
Views:	187
Size:	9.0 KB
ID:	1254  
__________________
X-Cart ver. 4.4.2 ( www.responseelectronics.com )
X-Cart ver. 4.1.11 ( www.mrdoorbell.com)
Reply With Quote
  #9  
Old 11-25-2008, 07:32 AM
 
Isleman Isleman is offline
 

Senior Member
  
Join Date: Jan 2005
Location: UK
Posts: 128
 

Default 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
__________________
X-Cart ver. 4.4.2 ( www.responseelectronics.com )
X-Cart ver. 4.1.11 ( www.mrdoorbell.com)
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 02:11 PM.

   

 
X-Cart forums © 2001-2020