Products Layout

[Nick1973]

Hi I'm trying to change the layout of the products listing table.

This is what I would like the code to look like, or something similar:

<table width="700" border="0" cellspacing="0" cellpadding="10">
<tr>
<td><table width="700" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="500">PRODUCT INFORMATION </td>
<td width="200"><div align="center">PRODUCT IMAGE </div></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="700" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="200">PRODUCT IMAGE </td>
<td width="500"><div align="center">PRODUCT INFORMATION</div></td>
</tr>
</table></td>
</tr>
</table>


I would like to us this sort of layout rather than the standard three column layout.

Please can somebody help me with this?

Many Thanks

Nick

[jwitt98]

You should be able to achieve this layout fairly easy by turning off both left and right side boxes in admin. Then you will want to set the number of product to display per row to 1. Then set a size for your images.
The rest of the look can be accomplished with css styling.
However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
And then assign some style for example:
.div1 img {
float: right;
border-left: 2px solid brown;
}
.div2 img {
float: left;
border-right: 2px solid brown;
}

[gjh42]

You're not going to get the size/weight attribute to work on the product listing page without some advanced PHP coding. It has been done, but is complex.

[Nick1973]

You should be able to achieve this layout fairly easy by turning off both left and right side boxes in admin. Then you will want to set the number of product to display per row to 1. Then set a size for your images.
The rest of the look can be accomplished with css styling.
However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
And then assign some style for example:
.div1 img {
float: right;
border-left: 2px solid brown;
}
.div2 img {
float: left;
border-right: 2px solid brown;
}

Ok only just got this. Do you know the code I will need to put in place?

[Nick1973]

You should be able to achieve this layout fairly easy by turning off both left and right side boxes in admin. Then you will want to set the number of product to display per row to 1. Then set a size for your images.
The rest of the look can be accomplished with css styling.
However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
And then assign some style for example:
.div1 img {
float: right;
border-left: 2px solid brown;
}
.div2 img {
float: left;
border-right: 2px solid brown;
}

Ok all my left and right sideboxes are turned off so how do where do I go to set the number of products to display to 1?

[rstevenson]

... However, If you want every other row to be staggered like in your screen shot, that will take a bit more work and some php code editing. Basically you will need the php code to generate 2 separate class selectors assigned to every other div. Hope you have enough php knowledge because this can become tricky.
And then assign some style for example:
.div1 img {
float: right;
border-left: 2px solid brown;
}
.div2 img {
float: left;
border-right: 2px solid brown;
}

Actually the Zen Cart code already contains classes for doing this. They're not in the stylesheet, but there's lots of classes that are not in the stylesheet but ready for use in the code if you need them. So add these two elements to your stylesheet.css and edit as suggested above.

.productListing-odd { }
.productListing-even { }

I use them for setting an alternate colour for each row, but I'm going to look into doing something similar to what you're trying to do. I like that look a lot.

Rob

[gjh42]

Unless you have installed the Column Grid mod, you will only have one product per row - no resetting needed.

Come to think of it, you will need to install Column Grid (from Free Addons) and set to "columns" and 1 per row, so that you can have the flexibility to move elements - you can't float a table cell. You might be able to float the image inside the cell, but I don't think the rest of the content will move to fit it.
You will need to edit /includes/modules/your_template/product_listing.php to give classes to all of the listing elements so they can be addressed individually.

Your best bet may be to look for the Flexible Product Listing mod I posted in the forum (not in Free Addons yet), and install that (includes Column Grid). With some guidance, I think you can use that to get the layout you want without having to add more than a line or two of code, and possibly all just in the stylesheet.

I'll be back late this evening to answer any more questions.

[Nick1973]

Actually the Zen Cart code already contains classes for doing this. They're not in the stylesheet, but there's lots of classes that are not in the stylesheet but ready for use in the code if you need them. So add these two elements to your stylesheet.css and edit as suggested above.

.productListing-odd { }
.productListing-even { }

I use them for setting an alternate colour for each row, but I'm going to look into doing something similar to what you're trying to do. I like that look a lot.

Rob

Go for it Rob, I'd already worked out the classes and have managed to do this anyway. The bit I'm struggling with is the actual layouts of the product listings. Not so much the background of them.

Thanks Though

Nick

[jwitt98]

Nick,
Please ignore what I said in my first post.
I was thinking you were referring to the products listings on the main page, shopping cart page etc. where the featured products, new products etc. are listed. Those are laid out using divs and css.

It's obvious to me now that you are trying to change the layout of the actual products listing page. That page is laid out using tables.

Sorry, my bad. I should have read your post more clearly. What the others are saying seems to be the route to go.