Column Layout Grid for Product Listing

[smcelligott]

just realised that my screen capture did not work. I stuck it on my test domain so you can see what I mean, in case you are not seeing what I am seeing . . .

http://teknix.net.au/alignment.html

[boudewijn]

Part of the problem may be browser related. I took a quick glance at your site with IE6 and IE8 native mode, and I see no horizontal shifting. Nevertheless it should display the same in all browsers and that is probably a css problem.

What I do see is that the prices and buy now button's don't line up occasionally. This is because of the structure of printing. If the description is two lines, it pushes price and button downwards. If it's neighbour has a description of only one line, the two products don't line up anymore.

Some time ago I fixed this, by changing the page code so that it would print the 3 (or other number) of pictures first, then the 3 descriptions, then the 3 prices, etc.

I'll be happy to supply you with what I wrote, although I cannot guarantee it will work flawless.

Boudewijn

[smcelligott]

Sounds great. I know what you mean, and wanted to fix that, but that was a low priority project. I agree to that this is likely a CSS issue. I'm thinking I changed a margin, or cell padding or something like that and the effect was not immediately noticed. Now I no longer have any idea what I did.

In a possibly related note, when I had the new products panel in the centre panel, and set the columns to four, just three products would display, and the fourth would wrap, and then on the next line the next three products, etc. I then changed the columns to three and I got two before the wrap, changed to two, and the products were in a single column, It definitely wasn't real estate related, because there was plenty or room to display all products -- to me this sounds almost like a forced right margin of some kind, but I can't figure out where it would be . . . hmmmmm

Thanks again for the offer of the horizontal alignment fix. Will install as soon as I receive, and let you know how it worked.

[boudewijn]

I'm quite ashame as I didn't document my changes well. But I'm reasonably sure that I modified only one file. So please save your old copy before overwriting it, and try it out on a test system first

The file should, after removing the .doc, be placed in includes/modules/<your template>

Please let me know how it works out!

[smcelligott]

boudewijn,

Fantastic! Love how this looks, another of my yet to figure outs as how to get the horizontal rule between rows on the category page, and now you've fixed that as well. This may be premature, but I've tested the other browsers and this may have fixed the main problem as well. Can't figure out why, as we were both convinced it was in the stylesheet. Need to test further. But in the interim, many thanks

[boudewijn]

I'm glad it helped you out! And you are right to give it some more thorough tests, as my tests focused on my use and not on all possible fields to display.
Taking a quick glance at the code, I see that I set the width of the columns to 99%, as an addition to the style class in CSS. I guess that made it fit. A bit of a workaround, but nevertheless it works :-)
The horizontal line was easy to fit in, as eventually, in the new code, the page is processed top to bottom. For the record: line 260 contains the <hr>.

I'll be happy to hear if you find any issues.

Boudewijn

[tomwitt]

How can I change the number of rows displayed. When I go 3 columns there are 12 products displayed on 3 rows. When I go with 4 columns there are 8 products displayed on 2 rows.

I have about 650 products so I would like to display 4 columns with maybe 10-15 rows?

[boudewijn]

You cannot set the number of rows anywhere. But you can set the max number of products per page. The setting for this is in: Admin->maximum values->Products Listing - Number Per page. So in your case the value would be 4 x 10/15 is between 40 and 60.

I hope this helps,
Boudewijn

[tomwitt]

perfect. thanks!

[kobra]

How can I change the number of rows displayed. When I go 3 columns there are 12 products displayed on 3 rows. When I go with 4 columns there are 8 products displayed on 2 rows.

You cannot set the number of rows anywhere.

Assuming that we are talking about the "column-grid" module
Indirectly
admin > config > Product Listing > Product Listing - Columns Per Row
admin > config > Maximum Values > Products Listing- Number Per Page