X-Cart forums - Related Products.tpl - column versus row format

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

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

- - Related Products.tpl - column versus row format (https://forum.x-cart.com/showthread.php?t=13024)

Related Products.tpl - column versus row format

Hi - just wondering whether someone can help me modify this code please. I've got my related products showing with thumbnails, but they are appearing in one long column. I'd like to change the code so that they appear in a row (5 across the page). I'm new to HTML code, and don't know where to begin with this. Any help is appreciated.

Code:

{* $Id: related_products.tpl,v 1.7 2002/10/22 10:27:05 olga Exp $ *} 

{if $product_links ne ""} 

{capture name=dialog} 

<table border=0 width=100%><tr><td> 

<table border=0 width=100%> 

{section name=cat_num loop=$product_links} 

{if $smarty.section.product_links.index is div by 3} 

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

{/if} 

<td valign="top"> 

<table border=0 width=100%> 

<tr> 

<td width=100 align=center valign=top>



<a href=product.php?productid={$product_links[cat_num].productid}&cat={$cat}&page={$navigation_page}>



{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_x=100 product=$products[product].product} 



</a>

 

{$product_links[cat_num].product|escape}</font> 

<font class=TableCenterProductTitleOrange> </font><font size=1></font></p></td> 

</tr> 

</table> 

</td> 

{/section} 

</td></tr></table> 

</td></tr></table> 

{/capture} 

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

{/if}

Try this:

http://forum.x-cart.com/viewtopic.php?t=14995

For 5 columns, just change the number in this line of code from 3 to 5:

Code:

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

Thanks for pointing me in the right direction. I've now got the code above, but there is quite a lot of white space between the Product Name and the thumbnail. How do I close the gap slightly and move the Product Name closer to the thumbnail image?

Thanks.

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

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

  {/if} 



<td width="250" 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}

Remove one of the two
tags at the end of the code for the product image.