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

Common sense Product Layout modification (4.3)

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #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:	651
Size:	27.9 KB
ID:	1834  Click image for larger version

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

The following 6 users thank acidon for this useful post:
am2003 (01-30-2010), BBM_ (08-22-2010), Bedell (11-16-2010), jburba2000 (01-25-2010), Shehzad (01-15-2011), yuehan (01-31-2010)
  #2  
Old 01-16-2010, 04:18 PM
 
Shiftlocked Shiftlocked is offline
 

Advanced Member
  
Join Date: Apr 2007
Posts: 72
 

Default Re: Common sense Product Layout modification (4.3)

nice work there, I think I get what you are at but do you have a before and after screenie of this?
__________________
Xcart Version: Patched 4.4.0 to 4.5.0
Mods Installed so far. Firetank Feed Manager - More soon - Looking for a designer to reinvent the website. Feel free to get in touch
Reply With Quote
  #3  
Old 01-16-2010, 06:51 PM
  acidon's Avatar 
acidon acidon is offline
 

Senior Member
  
Join Date: Feb 2008
Posts: 139
 

Default Re: Common sense Product Layout modification (4.3)

Ok updated original post with screenshots
__________________
Version 4.7.6 X-cart Gold
Reply With Quote
  #4  
Old 01-16-2010, 07:31 PM
  hoosierglass's Avatar 
hoosierglass hoosierglass is offline
 

X-Adept
  
Join Date: Aug 2006
Location: Zionsville, IN
Posts: 974
 

Default Re: Common sense Product Layout modification (4.3)

For a long time had our hardware site set up like this. At that time we did not have many product options or variables set set it seemed like the way to diplay our wares. The only real draw back to this was categories that had dozens of prodcuts and several pages or product listings. Because of this we switched to a two column listing with no discription and a text under the image to click for more information. When we switched to this type of layout our sales increased by 20% and more in the first five months after switching to the two column layout. Personally I like the one column layout but cannot argue with the change in sales since switching to two column. I am working with 4.3 and have that set to a three column look. It will be interesting to see what kind of sales change we will see with this change.
__________________
X-Cart Gold 4.7.7
Custom Work from www.luminointernet.com
www.indy-pen-dance.com
Reply With Quote
  #5  
Old 01-17-2010, 07:32 AM
  amy2203's Avatar 
amy2203 amy2203 is offline
 

X-Wizard
  
Join Date: Jul 2004
Location: Watford, UK
Posts: 1,509
 

Default Re: Common sense Product Layout modification (4.3)

Quote:
Because of this we switched to a two column listing with no discription and a text under the image to click for more information

Which page did you do this on? the category listing page, or the individual product page?
__________________
X-Cart version 5 (Previously 3.5-4)

Previous Versions included
BCSE Reward Points Mod
Altered Cart On Sale Mod
Wordpress Plugin

Please don't PM me for support. I help where I can on the forum and your question will more likely be answered there.

Shout me a Coffee!
Reply With Quote
  #6  
Old 01-25-2010, 06:49 PM
 
jburba2000 jburba2000 is offline
 

Advanced Member
  
Join Date: Dec 2003
Location: Oklahoma
Posts: 66
 

Wink Re: Common sense Product Layout modification (4.3)

Beautiful, quick and easy mod. Looks great and like almost every other site on the Internet now.
__________________
Mindells.com - Your Style. Your Comfort. Your Way.
X-Cart Platinum - 4.6.1
Reply With Quote
  #7  
Old 01-26-2010, 05:13 AM
  hoosierglass's Avatar 
hoosierglass hoosierglass is offline
 

X-Adept
  
Join Date: Aug 2006
Location: Zionsville, IN
Posts: 974
 

Default Re: Common sense Product Layout modification (4.3)

Quote:
Originally Posted by amy2203
Which page did you do this on? the category listing page, or the individual product page?

We did this in the products.tpl, so basically the listing of the products in the categories. This is done in the admin general settings area of the back end.
__________________
X-Cart Gold 4.7.7
Custom Work from www.luminointernet.com
www.indy-pen-dance.com
Reply With Quote
  #8  
Old 01-29-2010, 08:57 PM
  tam10's Avatar 
tam10 tam10 is offline
 

eXpert
  
Join Date: Mar 2007
Posts: 252
 

Default Re: Common sense Product Layout modification (4.3)

Perfect. Thank you.
Just one question -how do hide the SKU from customer side.
__________________
Tammy
x-cart gold + 4.7.2
x-cart 5.2.10

Reply With Quote
  #9  
Old 01-30-2010, 10:52 AM
  acidon's Avatar 
acidon acidon is offline
 

Senior Member
  
Join Date: Feb 2008
Posts: 139
 

Default Re: Common sense Product Layout modification (4.3)

Quote:
Originally Posted by tam10
...how do hide the SKU from customer side.

In /customer/main/product_details.tpl find:

Code:
<td class="property-name">{$lng.lbl_sku}</td> <td class="property-value" id="product_code">{$product.productcode|escape}</td>

and replace it with:


Code:
<td class="property-name">{* {$lng.lbl_sku} *}</td> <td class="property-value" {* id="product_code" *}>{* {$product.productcode|escape} *}</td>

CODE UPDATED TO REFLECT PRODUCT VARIANTS SKUs AS WELL
__________________
Version 4.7.6 X-cart Gold
Reply With Quote

The following user thanks acidon for this useful post:
  #10  
Old 01-30-2010, 01:34 PM
  tam10's Avatar 
tam10 tam10 is offline
 

eXpert
  
Join Date: Mar 2007
Posts: 252
 

Default Re: Common sense Product Layout modification (4.3)

Thanks
__________________
Tammy
x-cart gold + 4.7.2
x-cart 5.2.10

Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


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 07:59 PM.

   

 
X-Cart forums © 2001-2020