Modifying the <tr> that [-- LOOP PRODUCTS --] inserts?

[soosy]

Is it possible to modify the <tr> that [-- LOOP PRODUCTS PAGE.Columns--] inserts?

At first I wanted to add some style tags to the TR tag (ok, I could do it through a global CSS)....

But now for complex layout reasons I'd like each product row to be in its own table. So I'd really like to replace the
</tr><tr>
with:
</tr></table>
<table><tr>

Any options for this? Can I manually set up a loop somehow with if/thens?

[JeremeD]

Hopefully, I understand what you're trying to do.

You can put whatever you want inside the loop. Try this:

Code: Select all

<table>
[-- LOOP PRODUCTS Page.Columns --]
<td>
  <table>
  <tr><td>
  Content Inside Table
  </td></tr>
  </table>
</td>
[-- END_LOOP PRODUCTS --]
</table>


What this will do is make a new table inside each table cell.

It will create a lot of (possibly unnecessary) extra code though. What are you trying to do exactly? There may be a better way to go about it.

[soosy]

Hi, thanks for the response and sorry to not respond sooner. (I was dealing with a family health emergency over the weekend.)

What I'm trying to do is set up rows of products, 4 across (4 columns). Depending on the product picture and text, the height of each will be variable. The tricky part comes in that I would like all the "add to cart" buttons for each product aligned along the BOTTOM of the row. I ended up wanting to use code like this:

Code: Select all

   <table border="1" width="100%" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" style="height:400px; border:1px solid green; position:relative;">
   <tr>
   <td style="vertical-align:bottom;">
      <div style="position:absolute; top:0px; border:1px solid red;">
      top?
      </div>
      bottom?
   </td>
   <td style="vertical-align:bottom;">
      <div style="position:absolute; top:0px; border:1px solid red;">
      top?
      </div>
      bottom?
   </td>
   </tr>
   </table>
   <table border="1" width="100%" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" style="height:400px; border:1px solid green; position:relative;">
   <tr>
   <td style="vertical-align:bottom;">
      <div style="position:absolute; top:0px; border:1px solid red;">
      top?
      </div>
      bottom?
   </td>
   <td style="vertical-align:bottom;">
      <div style="position:absolute; top:0px; border:1px solid red;">
      top?
      </div>
      bottom?
   </td>
   </tr>
   </table>


Since the DIVs are absolutely positioned it ends up that is relative to the outer table which means multiple rows must be in separate tables. At least, that's the best I could come up with that worked cross-browser.

My solution ended up being to not use the column specifier in LOOP PRODUCTS at all. I ended up with a table-less solution using only floating DIVs... something like this:

Code: Select all

<div style="left: 228px; position: absolute; top: 220px; width: 600px; z-index: 1; ">
   [-- LOOP PRODUCTS --]
   <div style="position:relative; float:left; width:150px; height:450px;">
        [-- PRODUCT product_template.html --]
   </div>
   [-- END_LOOP PRODUCTS --]
   <div style="clear:both"></div>
<div>

Inside the product_template I have a div similar to my first example to put the Add To Cart button at the bottom:

Code: Select all

      <div style="position:absolute; bottom:0px;">
      Add to cart code
      </div>

The only drawback to this approach is that I had to use a fixed height for the DIVs of 450px.


So... I pretty much got the effect that I wanted... but my original question still stands. :) It would be useful is there was a way to control the </tr><tr> that ShopSite inserts after each product row.

Thanks.

[JeremeD]

If you like what you're doing with the divs, you can certainly do that more reliably (and with less code) using tables. Like this:

Code: Select all

<table border="0" cellspacing="0" cellpadding="10">
[-- LOOP PRODUCTS 3 --]
[-- PRODUCT product_template.html --]
[-- END_LOOP PRODUCTS --]
</table>


And the product template would look like this:

Code: Select all

<td align="center">
<div style="height: 150px; vertical-align: top">
[-- Product.Graphic --]
</div>
[-- Product.Name --]<br>
[-- Product.Description --]<br>
[-- Product.Price --]
</td>


Of course, if you want the add to cart buttons aligned along the bottom without having to set a specific height for the div, you could just set the vertical alignment of each cell to bottom like this:

Code: Select all

<td align="center" valign="bottom">
[-- Product.Graphic --]
<br>
[-- Product.Name --]<br>
[-- Product.Description --]<br>
[-- Product.Price --]
</td>


[soosy]

Ah that table solution does work well.

The problem with the second example of valign="bottom" is that then the product graphic and description are aligned to the bottom as well. The difficulty is that I have two sets of information in the table that want to be aligned differently... I want the product info+graphic to hug the top and the add-to-cart to hug the bottom. Well that part isn't tricky if you specify a fixed height... the tricky part is not having to specify a fixed height, and to accomodate product descriptions that are differing lengths.