X-Cart forums - Aligning products

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Aligning products (https://forum.x-cart.com/showthread.php?t=28961)

Aligning products

I want to edit the alignment of the product thumbnails when they are three across. Which part of this code do I need to edit? I want them to line up either at the top of the thumbnail images or at the bottom where the price is.

Thanks in advance!

Code:

 {* $Id: products_t.tpl,v 1.30.2.4 2006/11/27 11:40:25 max Exp $ *}

 <table width="100%" cellpadding="0" cellspacing="0">

 <tr>

     <td class="ProductArea">

 

 <table width="100%" cellpadding="0" cellspacing="0">

 

 {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}

 {if not ($config.Appearance.products_per_row is div by 2) or %product.index% eq "0"}

 {cycle values="ProductBox1,ProductBox2" assign="product_style"}

 {/if}

 <tr>

 {assign var="cell_counter" value=0}

 {else}

 {cycle values="ProductBox1T,ProductBox2T" assign="product_style"}

 {/if}

 

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

 

     <td width="{$width}%" class="{$product_style}" style="height: 100%;" valign="top">

 

 <table width="100%" cellpadding="0" cellspacing="0" align="center" class="ProductLeftShadow">

 <tr>

     <td align="center">

 

 <table width="100%" cellpadding="0" cellspacing="0" align="center" class="DialogBorderStart">

 <tr>

     <td  class="DialogBorderEnd" align="center">

 

 <table width="100%" cellpadding="5" cellspacing="0" align="center" class="ProductBoxStart">

 <tr>

     <td class="ProductListBoxEnd" align="center">

 <br /><br />

 

 <table cellpadding="3" cellspacing="0" width="100%">

 <tr>

     <td class="PListCell">

 <a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}">{include 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 show_border="Y"}</a>

 

 {if $active_modules.Special_Offers ne "" and $products[product].have_offers}

 {include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}

 {/if}

     </td>

 </tr>

 </table>

 <a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;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 /><br />

 {/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}

 &nbsp;

 {elseif $products[product].taxed_price ne 0}

 {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}{/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}

 {if $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}

 <br />

 <font style="font-size: 5px;"><br /></font>

 {include file="customer/main/buy_now.tpl" product=$products[product] style="list"}

 {/if}

 {/if}

 <br />

 <br />

     </td>

 </tr>

 </table>

     </td>

 </tr>

 </table>

     </td>

 </tr>

 </table>

     </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="{cycle values="ProductBox1,ProductBox2"}" valign="top">

 <table width="100%" cellpadding="0" cellspacing="0" align="center" class="ProductEmptyStart">

 <tr>

     <td class="ProductBoxEmptyEnd">&nbsp;</td>

 </tr>

 </table>

 </td>

 {/section}

 </tr>

 {/if}

 

 </table>

     </td>

 </tr>

 </table>

 {if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses}

 <div class="FCButtonsBox">

 {include file="modules/Feature_Comparison/compare_selected_button.tpl" no_form=true}

 </div>

 {/if}

Re: Aligning products

Could also be this template:

Code:

 {* $Id: products.tpl,v 1.72.2.3 2006/11/27 11:40:25 max Exp $ *}

{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses}

<div class="FCButtonsBox">

{include file="modules/Feature_Comparison/compare_selected_button.tpl"}

{include file="modules/Feature_Comparison/products_check_js.tpl"}

</div>

{/if}

{if $usertype eq "C" and $config.Appearance.products_per_row ne "" and $config.Appearance.products_per_row gt 0 and $config.Appearance.products_per_row lt 4 and ($featured eq "Y" or $config.Appearance.featured_only_multicolumn eq "N")}

{include file="customer/main/products_t.tpl" products=$products}

{else}

{if $products}

{section name=product loop=$products}

{assign var="discount" value=0}

<table width="100%" cellpadding="0" cellspacing="0" align="center" class="{cycle values="ProductBox1,ProductBox2"}">

<tr>

    <td class="ProductLeftShadow">

<table width="100%" cellpadding="0" cellspacing="0" align="center">

<tr>

    <td class="ProductBox">

<table width="100%" cellpadding="0" cellspacing="0" align="center" class="DialogBorderStart">

<tr>

    <td class="DialogBorderEnd">

<table width="100%" cellpadding="0" cellspacing="0" align="center" class="DialogCorner">

<tr>

    <td valign="top" class="ProductBoxStart">

<table width="100%" cellpadding="29" cellspacing="0" align="center" class="ProductBoxEnd">

<tr>

    <td valign="top" class="DialogShadow2">

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}{if $featured eq 'Y'}&amp;featured{/if}"><font class="ProductTitle">{$products[product].product}</font></a>

<br />

<br />

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

    <td align="center" valign="top">

<div class="PListImgBox">

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}{if $featured eq 'Y'}&amp;featured{/if}">{include file="product_thumbnail.tpl" productid=$products[product].productid image_x=$config.Appearance.thumbnail_width product=$products[product].product tmbn_url=$products[product].tmbn_url show_border="Y"}</a>

{if $active_modules.Special_Offers ne "" and $products[product].have_offers}

{include file="modules/Special_Offers/customer/product_offer_thumb.tpl" product=$products[product]}

{/if}

</div>

<a href="product.php?productid={$products[product].productid}&amp;cat={$cat}&amp;page={$navigation_page}{if $featured eq 'Y'}&amp;featured{/if}">{$lng.lbl_see_details}</a>

{if $active_modules.Feature_Comparison ne '' && $products[product].fclassid > 0 && $printable ne 'Y'}

<br />

<br />

<div align="center">

{include file="modules/Feature_Comparison/compare_checkbox.tpl" id=$products[product].productid}

</div>

{/if}

</td>

<td><img src="{$ImagesDir}/spacer.gif" width="14" height="1" alt="" /></td>

<td valign="top" width="100%">

{if $config.Appearance.display_productcode_in_list eq "Y" and $products[product].productcode ne ""}

{$lng.lbl_sku}: {$products[product].productcode}

<br />

<br />

{/if}

{$products[product].descr|truncate:300:"...":true}

<br />

<br />

{if $products[product].product_type eq "C"}

{include file="buttons/details.tpl" href="product.php?productid=`$products[product].productid`&amp;cat=`$cat`&amp;page=`$navigation_page`"}

{else}

{if $active_modules.Subscriptions ne "" and ($products[product].catalogprice gt 0 or $products[product].sub_priceplan gt 0)}

{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}

&nbsp;

{elseif $products[product].taxed_price ne 0}

{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}

{if $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}

<s>

{/if}

<font class="ProductPriceSmall">{$lng.lbl_our_price}: {include file="currency.tpl" value=$products[product].taxed_price}</font><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 $active_modules.Special_Offers ne "" and $products[product].use_special_price ne ""}

</s>

{/if}

{if $products[product].taxes}

<br />

<div class="PListTaxBox">{include file="customer/main/taxed_price.tpl" taxes=$products[product].taxes}</div>

{/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 $usertype eq "C" and $config.Appearance.buynow_button_enabled eq "Y"}

<br />

{include file="customer/main/buy_now.tpl" product=$products[product]}

{/if}

{/if}

    </td>

</tr>

</table>

    </td>

</tr>

</table>

    </td>

</tr>

</table>

    </td>

</tr>

</table>

    </td>

</tr>

</table>

    </td>

</tr>

</table>

{/section}

{if $active_modules.Feature_Comparison ne '' && $products && $printable ne 'Y' && $products_has_fclasses}

<div class="FCButtonsBox">

{include file="modules/Feature_Comparison/compare_selected_button.tpl" no_form=true}

</div>

{/if}

{else}

{$lng.txt_no_products_found}

{/if}

{/if}

Re: Aligning products

Wow that is a lot of tables! Is that an add-on skin or have you done some customizing? The first thing you need to do is get rid of half of those nested tables. products_t.tpl is the one you want...and you want to set the table cell that contains the image to this:

<td style="vertical-align: top;">

Re: Aligning products

Thanks, Balinor. That's an add-on. What do you mean by get rid of nested tables? (And what are nested tables?)

Thank you!

Re: Aligning products

You have tables inside of tables inside of tables. Makes for really bloated code and makes it more difficult to control the display. You could probably get rid of most of them in that particular instance.

Re: Aligning products

Looks great in IE, but Mozilla / Firefox ignore it. Sure would be nice if these different browsers could settle on some standards.

Thanks again!

Re: Aligning products

How do you know which tables are extraneous?

Re: Aligning products

Well that's the thing...Firefox, Opera and Safari DO follow the standards...IE does not :(

Re: Aligning products

Yeah - you're right about that. Is there a code that is equivalent to what you gave me that would work in Firefox? If so, can they be used together? Or do I have to make a choice between which browser is going to get the right appearance? Although, it's unfortunately not much of an option which choice is made. Most people still use IE.

Personally, I've only ever used it to check stuff like this. For personal use, I've always been a Mozilla fan.

Thanks again :)

Re: Aligning products

All of those tables can be removed except the one that is used to create the three columns that display your products. That way, you have one cell containing one thumbnail. I bet the code I gave you will work once you get rid of those tables, as IE tends to add unnecessary padding to each table.