X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   border around product box on 3-column product list page with tables (https://forum.x-cart.com/showthread.php?t=61400)

vasilis 10-27-2011 01:44 PM

border around product box on 3-column product list page with tables
 
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.

gb2world 10-27-2011 04:15 PM

Re: border around product box on 3-column product list page with tables
 
You can modify the loops or get rid of the tables altogether, but there are some implications, see: http://forum.x-cart.com/showthread.php?t=54565

Sisom also came up with a work around using the one column template for 2 columns: http://forum.x-cart.com/showthread.php?t=54565

---


All times are GMT -8. The time now is 06:57 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.