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

Standardizing Products Page

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 01-29-2009, 12:02 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Standardizing Products Page

Hi,
We are facing difficulty in altering the way the products page is displayed by default.
For Product names which are long it generates two/three lines to display the name (which is fine with us and we don▓t want to truncate the name). But in the process if the next product has short name & fits in a single line the display of products gets affected as two/three line product name pushes the image down. I have attached a screen shot on how current products page displays┘.

Was wondering if we could resize the products page display in such a way that alignment of all products remains the same irrespective of the product name having one or two lines by defining the height.


I would appreciate inputs on this; as we need to resolve this issue.

Thanks in advance.

Best Regards,
Attached Thumbnails
Click image for larger version

Name:	snapshot.jpg
Views:	210
Size:	230.6 KB
ID:	1340  
__________________
4.6.1 Platinum


Reply With Quote
  #2  
Old 01-29-2009, 12:44 AM
  pauldodman's Avatar 
pauldodman pauldodman is offline
 

X-Guru
  
Join Date: Jul 2003
Location: Spain / UK
Posts: 3,062
 

Default Re: Standardizing Products Page

Well you can do whatever you want with that page - it's more a question of html than x-cart - if you are competent in html you can fix that no problem.
You could basically tweak it using divs or tables so that the product title always takes the same space.
I'm guessing you are using default x-cart templates, so that's an html tables issue. You need to edit skin1/customer/main/products_t.tpl and rework the table layout so that the table and the cells remain the same height no matter how much text there is.
__________________
Paul Dodman
e-business & m-commerce consultant
w: www.luminointernet.com
e: xcart@luminointernet.com

Professional X-Cart help, advice, support and services, specialists in Mobile X-Cart.
Reply With Quote
  #3  
Old 01-29-2009, 01:14 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Standardizing Products Page

Hi,

Thanks pauldodman for your response.

Kindly tell me where to modify, and what is the modified code?

I am sending my default x-cart page now

Code-

{* $Id: products_t.tpl,v 1.30.2.12 2008/07/15 12:07:40 ferz Exp $ *}
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

<table width="100%" cellpadding="5" cellspacing="1">

{math equation="floor(100/x)" x=$config.Appearance.products_per_row assign="width"}

{section name=product loop=$products}
{assign var="discount" value=0}

{if %product.index% is div by $config.Appearance.products_per_row}
<tr>
{assign var="cell_counter" value=0}
{/if}

{math equation="x+1" x=$cell_counter assign="cell_counter" }

<td width="{$width}%" class="PListCell">

<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}" class="ProductTitle">{$products[product].product}</a><br />
{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}
{$lng.lbl_sku}: {$products[product].productcode}<br />
{/if}
<table cellpadding="3" cellspacing="0" width="100%">
<tr>
<td height="100" nowrap="nowrap">
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}">{i nclude file="product_thumbnail.tpl" productid=$products[product].productid image_x=$products[product].tmbn_x|default:$config.Appearance.thumbnail_width image_y=$products[product].tmbn_y product=$products[product].product tmbn_url=$products[product].tmbn_url}</a>
{if $active_modules.Special_Offers ne "" && $products[product].have_offers && $usertype eq 'C'}
{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}
{/if}
</td>
</tr>
</table>
{if $printable neq 'Y'}
<a href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_page}">{$ lng.lbl_see_details}</a>
{/if}
{if $products[product].product_type ne "C"}
<br />
<br />
{if $active_modules.Subscriptions ne "" and $products[product].catalogprice}
{include file="modules/Subscriptions/subscription_info_inlist.tpl"}
{else}
{if ($config.General.unlimited_products ne "Y" && ($products[product].avail le 0 or $products[product].avail lt $products[product].min_amount) && $products[product].variantid) or ($products[product].taxed_price ne 0 or ($products[product].variantid && $products[product].variants_has_price) or ($active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""))}
{if $products[product].taxed_price ne 0 or ($products[product].variantid && $products[product].variants_has_price)}
{if $products[product].list_price gt 0 and $products[product].taxed_price lt $products[product].list_price}
{math equation="100-(price/lprice)*100" price=$products[product].taxed_price lprice=$products[product].list_price format="%3.0f" assign=discount}
{if $discount gt 0}
<font class="MarketPrice">{$lng.lbl_market_price}: <s>
{include file="currency.tpl" value=$products[product].list_price}
</s></font><br />
{/if}
{/if}
<font class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</font><br /><font class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$products[product].taxed_price}</font>{if $discount gt 0}{if $config.General.alter_currency_symbol ne ""},{/if} {$lng.lbl_save_price} {$discount}%{/if}
{if $products[product].taxes}<br />{include file="customer/main/taxed_price.tpl" taxes=$products[product].taxes is_subtax=true}{/if}
{/if}
{if $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}
{include file="modules/Special_Offers/customer/product_special_price.tpl" product=$products[product]}
{/if}
{else}
<font class="ProductPrice">{$lng.lbl_enter_your_price}</font>
{/if}
{/if}
{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0}
<div align="center" style="width: 100%; padding-top: 10px;">
{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}
</div>
{/if}
{*** Uncomment it if you need 'Buy Now' button ***
{if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}
{include file="customer/main/buy_now.tpl" product=$products[product]}
{/if}
*** Uncomment it if you need 'Buy Now' button ***}
{/if}
</td>

{capture name=prod_index}
{math equation="index+x+1" index=%product.index% x=$config.Appearance.products_per_row}
{/capture}
{if $smarty.capture.prod_index is div by $config.Appearance.products_per_row }
</tr>
{/if}

{/section}

{if $cell_counter lt $config.Appearance.products_per_row}
{section name=rest_cells loop=$config.Appearance.products_per_row start=$cell_counter}
<td class="SectionBox"> </td>
{/section}
</tr>
{/if}

</table>
</td>
</tr>
</table>
{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses && $js_enabled}
{include file="modules/Feature_Comparison/compare_selected_button.tpl"}
{/if}

Please help me to do that.

Thanks to all again.
__________________
4.6.1 Platinum


Reply With Quote
  #4  
Old 02-01-2009, 08:05 PM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Standardizing Products Page

Hi,

Anybody can help me to do this !!!!!!!!

Thanks to all again.
__________________
4.6.1 Platinum


Reply With Quote
  #5  
Old 02-01-2009, 08:52 PM
  ARW VISIONS's Avatar 
ARW VISIONS ARW VISIONS is offline
 

X-Man
  
Join Date: Jan 2007
Location: Pensacola, FL
Posts: 2,536
 

Default Re: Standardizing Products Page

ok you will need to edit 2 files

make backups of both first****

custoemr/main/product_t.tpl
and skin1.css

find this code in product_t.tpl

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a><br />


change to this

<div class="prodTitle"><a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a></div><br />


add this to skin1.css

.prodTitle{
height:33px;
}


upload both files.


increase or decrease 33px until desired result is reached.
__________________
xcart 5.1.2
Reply With Quote
  #6  
Old 02-04-2009, 12:04 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Standardizing Products Page

Hi,
Thanks Ashley for your response. Now the codes work fine.
Thanks to all again.
__________________
4.6.1 Platinum


Reply With Quote
  #7  
Old 02-12-2009, 11:21 AM
 
pfarcus pfarcus is offline
 

Senior Member
  
Join Date: Jan 2009
Posts: 179
 

Default Re: Standardizing Products Page

Thanks Ashley,

Dang, I'm sure I did everything right but I don't see a difference. I set it on something crazy like 1033px just to see but it didn't do anything.

?
__________________
CDSEO PRO
4.1.11 PRO
Dynamic images by xcartmod.com
X-Cart CSSTemplate/Skin for v4.1.11 PRO
Reply With Quote
  #8  
Old 02-13-2009, 02:14 AM
  Yurij's Avatar 
Yurij Yurij is offline
Banned
 

X-Adept
  
Join Date: Jan 2008
Posts: 486
 

Default Re: Standardizing Products Page

Quote:
Originally Posted by pfarcus
Thanks Ashley,

Dang, I'm sure I did everything right but I don't see a difference. I set it on something crazy like 1033px just to see but it didn't do anything.

?
Seems like skin1.css file is cached, so press Ctrl+F5 in Mozilla Firefox to force reload it.
Reply With Quote
  #9  
Old 02-13-2009, 02:25 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Standardizing Products Page

Quote:
Originally Posted by pfarcus
Thanks Ashley,

Dang, I'm sure I did everything right but I don't see a difference. I set it on something crazy like 1033px just to see but it didn't do anything.

?

You can try it on skin1_c.css file.

Thanks to all again.
__________________
4.6.1 Platinum


Reply With Quote
  #10  
Old 02-17-2009, 07:54 PM
  MsBecky's Avatar 
MsBecky MsBecky is offline
 

Member
  
Join Date: Jul 2008
Location: California
Posts: 22
 

Question Re: Standardizing Products Page

Hi Ashley,

Thank you very much for the code, it worked like a charm
I was wondering how I could do this for the related/upsell products found under (related_products.tpl), as I have images instead of links and would like them to show up the same way - Even.

Any help would be greatly appreciated ~ Thanks Becky

Here is my current related_products.tpl code:

{* $Id: related_products.tpl,v 1.15.2.1 2007/05/02 06:05:39 max Exp $ *}
{if $product_links ne ""}
{capture name=related_products}
{assign var="tmp" value="0"}
{section name=cat_num loop=$product_links}
{if $product_links[num].productid}{assign var="tmp" value="1"}{/if}
{/section}
{section name=num loop=$product_links}
{if %num.first%}
<table border=0 width="100%">
<tr>
{/if}
{if $smarty.section.num.index is div by 3}
</tr><tr valign="top">
{/if}
<td width=33% align=center valign=center class="PListCell";>
<a href="product.php?productid={$product_links[num].productid}" class="ItemsList">{$product_links[num].product}</a>
<br /><br>
<a href="product.php?productid={$product_links[num].productid}">{include file="product_thumbnail.tpl" productid=$product_links[num].productid image_x=$config.Appearance.thumbnail_width product=$product_links[num].product type="T"}<br /><br />{$lng.lbl_see_details}</a>
<br /><br />
<font class="ProductPrice">{$lng.lbl_our_price}: {include file="currency.tpl" value=$product_links[num].taxed_price}</font>
</td>
{if %num.last%}
</tr></table>
{/if}
{/section}
{/capture}
{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.related_products extra='width="100%"'}
{else}
{capture name=dialog}
No related products with this product.
{/capture}
{/if}




Quote:
Originally Posted by Ashley
ok you will need to edit 2 files

make backups of both first****

custoemr/main/product_t.tpl
and skin1.css

find this code in product_t.tpl

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a><br />


change to this

<div class="prodTitle"><a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_p age}" class="ProductTitle">{$products[product].product}</a></div><br />


add this to skin1.css

.prodTitle{
height:33px;
}


upload both files.


increase or decrease 33px until desired result is reached.
__________________
X-Cart Gold 4.1.10
Mods: BCS Engineering, Cart-Lab, FireTankSoftware, WebsiteCM
Hosting: EWDHosting.com (These Folks Are The Best!)

================================================
THE LITTLE BEAN COFFEE CO.
Fresh Handcrafted Artisan Coffee & Tea,
Specialty Beverages, and Gourmet Food
================================================

Experience The Little Bean╝ Difference!
www.thelittlebean.com | 1-888-848-BEAN (2326)

"Behind every successful woman is a substantial amount of coffee"
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design



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 06:43 AM.

   

 
X-Cart forums © 2001-2020