Column Layout Grid for Product Listing

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

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

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.

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!

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

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

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?

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

perfect. thanks!

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.
boudewijn:

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

Is it possible than customers can choose if they want to see the productlist in column grid or in row style

To my best knowledge that is not possible. It would require adjustment of the code and probably another option to allow visitors to have that option available or not.

I seem to be having the extra space problems too, agreed my pictures are different sizes. The first time I looked at it everything was fine but now when I look I get the spaces. I have used firefox 3.6 and IE8 and the result is the same. My site is https://www.kut4u.co.uk I am using Zen Cart 1.3.8a and the Column Layout Grid Version: 1.3.8 Author: stevefriedman71. If someone could help me out I would appreciate it.

You have padding on this huge list of elements, which is causing the products to be wider than the specified 32.5% and not all fit on one row:```
.centeredContent, th, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, label#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
padding:0.5em;
text-align:center;
}

Add to the bottom of your stylesheet```
.centerBoxContentsProducts {padding: 0.2em;}

http://tomaruinc.com/index.php?main_page=index&cPath=1

That is the link to a product listing page. I don't know why, but the column layout grid is not working right on this site I'm designing. I've installed it on two other sites already and everything went smoothly but this time it's giving me problems.

Based on the results of the first two times I've installed this mod, the wt, item name, price, categories, etc. disappears once in column mode, but everything just seems to be under each other like they are blocks or something. If I'm not making any sense just look at the site.

I'm running zen cart 1.3.8a and I installed column_layout_grid_v_1_3_8.

How many columns per row do you have set?
It looks like you are missing a file, as the output is for the default rows layout (with cell headings), but it is displaying with the columns template.
What do you have in /includes/modules/your_template/product_listing.php?

Hi Glenn,

I have 3 columns per row set. I have product_listing.php and product_listing.php.bak in the the modules/my_template/ folder. I even copied the files from the other sites I successfully installed it in and still not luck.

My original thought was that I thought I was missing a file as well but I checked the zip package for the module like 10 times and all it contained was product_listing.php in modules and tpl_modules_product_listing.php in templates/my_template/templates folder.

Try comparing the file on your server with a copy fresh from the zip (use Winmerge or the like).

Okay, I will but do you think there's a possibility the error is within the sql file?

gjh42:

You have padding on this huge list of elements, which is causing the products to be wider than the specified 32.5% and not all fit on one row:```
.centeredContent, th, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, label#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
padding:0.5em;
text-align:center;
}

> Add to the bottom of your stylesheet```
.centerBoxContentsProducts {padding: 0.2em;}

You ARE the guru Glenn thankyou SO much!:clap: