Hi, I am working on a client's site which is 4.3.1 Gold and it uses 3-column display of the products list, for which the corresponding template file is 'product_t.tpl'. I am trying to create a border around each product box, but the problem is that actually each 'product box' is not a div or html tag by itself but it consists of table cells on consecutive table rows, ie , the product title, product image,product price, of each product are rendered as table cells, that belong on consecutive table rows. A {foreach} Smarty loop which runs over each product renders the first row with the first 3 products' names (3-column products list). Then, a next {foreach} loop creates the next row of the first 3 products' images, the next creates the next row of the first 3 products' prices, and so on.
So, the markup looks something like this (say, for product, name, image and price):
HTML Code:
<table>
<tr><td>prd1_name</td><td>prd2_name</td><td>prd3_name</td></tr>
<tr><td>prd1_image</td><td>prd2_image</td><td>prd3_image</td></tr>
<tr><td>prd1_price</td><td>prd2_price</td><td>prd3_price</td></tr>
<tr><td>prd4_name</td><td>prd5_name</td><td>prd6_name</td></tr>
<tr><td>prd4_image</td><td>prd5_image</td><td>prd6_image</td></tr>
<tr><td>prd4_price</td><td>prd5_price</td><td>prd6_price</td></tr>
.....................................................................................
..........................................................................................
</table>
So, what I want to do is to create a border around each product box which actually doesn't exist as an html entity, because each product is split in rows. I have tried setting borders on certain sides of the table cells that are part of the 'product boxes', so the borders of adjacent cells are connected, but then I need to set the cell-spacing to zero, and that gets all the 'product boxes' adjacent, with no margin among themselves, which is a problem.
I was wondering if the only solution is to rewrite the 'products_t.tpl' template, re-arranging the loops, so instead of rendering the table cells of each consecutive row repeatedly, they would render each 'product box' by rendering the 3 consecutive table rows and then proceed to the next product. That way, I could work out the bordering of the products.
In other words the code would be similar to this:
HTML Code:
<table>
<tr><td>prd1_name</td></tr>
<tr><td>prd1_image</td></tr>
<tr><td>prd1_price</td></tr>
</table>
<table>
<tr><td>prd2_name</td></tr>
<tr><td>prd2_image</td></tr>
<tr><td>prd2_price</td></tr>
</table>
........................................................................
..............................................................................
Has there been any ready template file with this modification or something similar that I could find somewhere, or some other approach to the already existing template?
Appreciate any tips.