X-Cart forums - Related Products.tpl - thumbnail alignment problem

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

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

- - Related Products.tpl - thumbnail alignment problem (https://forum.x-cart.com/showthread.php?t=13583)

Related Products.tpl - thumbnail alignment problem

Hi,

I've edited related_products.tpl so that they display as thumbnail images, with 4 products across the page.

The page views fine when I have 4 products (the maximum) but when I only add 2 products to up-sell there is a problem with alignment. eg, if you imagine 4 thumbnail boxes across the page numbered 1-4 from left to right, then with 2 products selected the products show only in position 2 and 4. It just looks a little odd to have the products sitting centred and to the far right of the page. Ideally, I'd like them both left aligned in box positions no. 1 & 2.

I've posted my code below, and would really appreciate if someone can please point out where I'm going wrong.

Thanks,
Tracy

Code:

{* $Id: related_products.tpl,v 1.7.6.1 2004/12/06  svowl Exp $ *} 

{if $product_links ne ""} 



{capture name=dialog} 

{assign var="tmp" value="0"} 



{section name=cat_num loop=$product_links} 

{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if} 

{/section} 



{section name=cat_num loop=$product_links} 



{ if %cat_num.first% } 



<table border=0 cellspacing=5 width=100%> 

{/if}



  {if $smarty.section.cat_num.index is div by 4} 

     </tr> <tr align="left" valign="top"> 

  {/if} 



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

<td width="90" align="center"> 



{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_x=$config.Appearance.thumbnail_width product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}







<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}> 

<span class="ProductTitle">{ $product_links[cat_num].product|escape}</span> 

</a></td> 

{ if %cat_num.last% } 

</tr></table> 

{/if} 

{/section} 

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"} 

{/if}

I don't know if you have fixed your problem or not so just in case, here is my solution (better late than never). Just replace the entire contents of your related_products.tpl file with this:

Code:

{* $Id: related_products.tpl,v 1.10.6.1 2004/12/06  svowl Exp $ *} 

{if $product_links ne ""} 

{capture name=dialog}

{assign var="tmp" value="0"} 

{section name=cat_num loop=$product_links} 

{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if} 

{/section} 

{section name=cat_num loop=$product_links} 

{ if %cat_num.first% } 

<table border="0" cellspacing="2" width="100%"> 

{/if} 

  {if $smarty.section.cat_num.index is div by 4} 

<tr valign="top"> 

  {/if} 

<td width="{$product_links}%" align="center" valign="top"> 

{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_y=70 product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}

 

<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}> 

<font class="ProductTitle"> {$product_links[cat_num].product|escape}</font></a>




<FONT class="ProductDetailsTitle">{include file="currency.tpl" value=$product_links[cat_num].price}</FONT><FONT class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product_links[cat_num].price}</FONT>

</td> 

{ if %cat_num.last% } 

</tr></table> 

{/if} 

{/section}

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"} 

{/if}

You will notice that the code will center all related products very nicely accross your page regardless of wether you have 1 product or 4. If you want more products then replace 4 with whatever number you wish. The mod also includes price and alternate price. Just remove it if you don't need it. Hope this helps.

Do you know how to stop the related products opening up in a new window?

Thanx
Kirsten

There is a setting in General Settings/Modules options for that

THANX Padraic found it
Another annoying problem now solved :)

Do you think the above code would work for Recommended Products?

And would there be much difference in the coding?

As I want my recommends products to have the same layout

Regards
Kirsten

Compare the two side by side and you'll see the differences. Both mods are posted in the Custom Mods forum.

Quote:

Originally Posted by Online Michael

I don't know if you have fixed your problem or not so just in case, here is my solution (better late than never). Just replace the entire contents of your related_products.tpl file with this:

Code:

{* $Id: related_products.tpl,v 1.10.6.1 2004/12/06  svowl Exp $ *} 

{if $product_links ne ""} 

{capture name=dialog}

{assign var="tmp" value="0"} 

{section name=cat_num loop=$product_links} 

{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if} 

{/section} 

{section name=cat_num loop=$product_links} 

{ if %cat_num.first% } 

<table border="0" cellspacing="2" width="100%"> 

{/if} 

  {if $smarty.section.cat_num.index is div by 4} 

<tr valign="top"> 

  {/if} 

<td width="{$product_links}%" align="center" valign="top"> 

{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_y=70 product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}

 

<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}> 

<font class="ProductTitle"> {$product_links[cat_num].product|escape}</font></a>




<FONT class="ProductDetailsTitle">{include file="currency.tpl" value=$product_links[cat_num].price}</FONT><FONT class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product_links[cat_num].price}</FONT>

</td> 

{ if %cat_num.last% } 

</tr></table> 

{/if} 

{/section}

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"} 

{/if}

Thanks for the Mod Michael!!! Just what I was looking for. If this forum had a star system, you'd get a few from me!! 8)

Re: Related Products.tpl - thumbnail alignment problem

Hi Balinor,

I realise that this is an old thread, but hoped I could get some help on a small problem that I cannot fix myself (and I have tried!).
I am using the following code for my related_products.tpl:

HTML Code:

 

{* $Id: related_products.tpl,v 1.10.6.1 2004/12/06 svowl Exp $ *} 

{if $product_links ne ""} 

{capture name=dialog}

{assign var="tmp" value="0"} 

{section name=cat_num loop=$product_links} 

{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if} 

{/section} 

{section name=cat_num loop=$product_links} 

{ if %cat_num.first% } 

<table border="0" cellspacing="2" width="100%"> 

{/if} 

{if $smarty.section.cat_num.index is div by 4} 

<tr valign="top"> 

{/if} 

<td width="{$product_links}%" align="center" valign="top"> 

{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_y=70 product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}

 

<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}> 

<font class="ProductTitle"> {$product_links[cat_num].product|escape}</font></a>

<FONT class="ProductDetailsTitle">{include file="currency.tpl" value=$product_links[cat_num].price}</FONT><FONT class="MarketPrice">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product_links[cat_num].price}</FONT>

</td> 

{ if %cat_num.last% } 

</tr></table> 

{/if} 

{/section}

{/capture} 

{include file="dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog extra="width=100%"} 

{/if}

This works great except that ii shows the name and price to the right of the thumbnail and I wish it that the name is centralised under the thumbnail image and the price is under the name √ could you help with this?

I have attached a gif as it it now
Many thanks
Kev

Re: Related Products.tpl - thumbnail alignment problem

try put <center></center> tag to your problem

Re: Related Products.tpl - thumbnail alignment problem

Hi

many thanks for the reply - we needed to crack on and get the issue resolved so finally paid x-cart to solve the issue - thanks for the reply though

Kev

Quote:

Originally Posted by wtx

try put <center></center> tag to your problem