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,

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.

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.

Re: Standardizing Products Page
 

Hi,

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

Thanks to all again.

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.

Re: Standardizing Products Page
 

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

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.

?

Re: Standardizing Products Page
 

Seems like skin1.css file is cached, so press Ctrl+F5 in Mozilla Firefox to force reload it.

Re: Standardizing Products Page
 

You can try it on skin1_c.css file.

Thanks to all again.

Re: Standardizing Products Page
 

Hi Ashley,

Thank you very much for the code, it worked like a charm :D/
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}