View Single Post
  #1  
Old 01-16-2010, 02:45 PM
  acidon's Avatar 
acidon acidon is offline
 

Senior Member
  
Join Date: Feb 2008
Posts: 139
 

Wink Common sense Product Layout modification (4.3)

I bet 90% of x-cart owners sooner or later decide to place full product description under product picture(s)/product options area and make it use full page width instead of shy little corner on the right.

I searched forum for an easy solution, but was only able to find the tutorial for 4.2. After looking into code i realized that 4.2 solution is NOT going to work for 4.3 ....

An hour later I came up with this solution which I am more then happy to share with all of you guys :

1) Go to /customer/main/product_details.tpl and edit out next piece of code with {* *} :
Code:
<table cellspacing="0" cellpadding="0" summary="{$lng.lbl_description|escape}"> <tr> <td class="descr">{$product.fulldescr|default:$product.descr}</td> {if $active_modules.Special_Offers} {include file="modules/Special_Offers/customer/product_bp_icon.tpl"} {/if} {if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0} <td align="right" valign="top"> <div class="save-percent-container"> <div class="save" id="save_percent_box"> <span id="save_percent">{$product.appearance.market_price_discount}</span>% </div> </div> </td> {/if} </tr> </table>

2) in the same template, right after the first piece of code you just edited out, find:
Code:
<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}"> <tr> <td class="property-name">{$lng.lbl_sku}</td> <td class="property-value" id="product_code" colspan="2">{$product.productcode|escape}</td> </tr> {if $config.Appearance.show_in_stock eq "Y" && $config.General.unlimited_products ne "Y" && $product.distribution eq ""} <tr> <td class="property-name">{$lng.lbl_in_stock}</td> <td class="property-value product-quantity-text" colspan="2"> {if $product.avail gt 0} {$lng.txt_items_available|substitute:"items":$product.avail} {else} {$lng.lbl_no_items_available} {/if} </td> </tr> {/if} {if $product.weight ne "0.00" || $variants ne ''} <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}> <td class="property-name">{$lng.lbl_weight}</td> <td class="property-value" colspan="2"> <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol} </td> </tr>

and replace it with :

Code:
<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}"> <tr> <td class="property-name">{$lng.lbl_sku}</td> <td class="property-value" id="product_code">{$product.productcode|escape}</td><td rowspan="3" align="right" valign="top">{if $product.appearance.has_market_price && $product.appearance.market_price_discount gt 0} <div class="save-percent-container"> <div class="save" id="save_percent_box"> <span id="save_percent">{$product.appearance.market_price_discount}</span>% </div> </div>{/if}</td> </tr> {if $config.Appearance.show_in_stock eq "Y" && $config.General.unlimited_products ne "Y" && $product.distribution eq ""} <tr> <td class="property-name">{$lng.lbl_in_stock}</td> <td class="property-value product-quantity-text"> {if $product.avail gt 0} {$lng.txt_items_available|substitute:"items":$product.avail} {else} {$lng.lbl_no_items_available} {/if} </td> </tr> {/if} {if $product.weight ne "0.00" || $variants ne ''} <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}> <td class="property-name">{$lng.lbl_weight}</td> <td class="property-value"> <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol} </td> </tr>

3) Go to /customer/main/product.tpl and find :
Code:
<div class="details"{if $max_image_width gt 0} style="margin-left: {$max_image_width}px;"{/if}> {include file="customer/main/product_details.tpl"} {if $active_modules.Feature_Comparison ne ""} {include file="modules/Feature_Comparison/product_buttons.tpl"} {/if} </div> <div class="clearing"></div>

right after it add :

Code:
<p class="descr">{$product.fulldescr|default:$product.descr}</p> {if $active_modules.Special_Offers} {include file="modules/Special_Offers/customer/product_bp_icon.tpl"} {/if}

This should do it

P.S: In order to modify/adjust the product options layout after modification (if neccessary), go to /main.css and find :

table.product-properties .property-name {
width: 30px;
white-space: nowrap;
}
table.product-properties .property-value {
white-space: normal;
}

Play around with this CSS to get the desired look
Attached Thumbnails
Click image for larger version

Name:	before.jpg
Views:	676
Size:	27.9 KB
ID:	1834  Click image for larger version

Name:	after.jpg
Views:	766
Size:	29.2 KB
ID:	1835  
__________________
Version 4.7.6 X-cart Gold
Reply With Quote