View Single Post
  #34  
Old 04-24-2011, 01:32 PM
 
kgoel kgoel is offline
 

Advanced Member
  
Join Date: May 2010
Posts: 82
 

Default Re: Common sense Product Layout modification (4.3)

Quote:
Originally Posted by acidon
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


What changes you need to make in the admin files so that you can edit the product description. This MOD is only changing the custome front end. It is nice MOD.
__________________
Version 4.3.2
Reply With Quote