styling product listing pages with column layout grid

Ive just tried the CSS version only on my 1.38a installation and I get a similar problem. It does show the page but ONLY 1 column (row) at a time and there are corruptions like it shows the last left side column sidebox text at the top of the product list page... weirdio.

:blink:

That is really weird, and doesn't sound like something that the mod should be able to affect.
Can you post a link to your site? (If you still have the mod active.)

I got the column version of the mod working in October, but hadn't posted an update yet. Here it is, for testing (v0.9.1).
As before, the readme is incomplete, so ask if you need help installing. There appears to be a bug in the "rows" setting which I haven't fixed yet, but the demo version works to put the price to the left of the add button, in a 3-column layout.

Please let me know how this works for you.

Hi, gjh42. Thank you for directing me to this mod.

After running SQL commands, below is what I got.

1062 Duplicate entry 'PRODUCT_LISTING_LAYOUT_STYLE' for key 2
in:
[INSERT INTO zen_configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES ('Product Listing - Layout Style', 'PRODUCT_LISTING_LAYOUT_STYLE', 'rows', 'Select the layout style:
Each product can be listed in its own row (rows option) or products can be listed in multiple columns per row (columns option)', '8', '40', NULL, now(), NULL, 'zen_cfg_select_option(array('rows', 'columns'),');]
If you were entering information, press the BACK button in your browser and re-check the information you had entered to be sure you left no blank fields.

Not really sure if this is ok or not. As of now, the products are all still there and I achieved somewhat similar to what I desired.

I’d like to make sure if my SQL ran properly or not first before I tweak some.

For those who are reading this thread, here’s an image what I’m trying to achieve with this mod.

nyanko chan =^.^=

That would be because you had already installed Column Layout Grid, and the sql is purely for that mod - nothing is different in it for Flexible Product Listing. No harm was done, but I will make a note in the readme that the sql doesn't need to be run again if you have Column Grid already.

To improve the spacing of the price and add area, find in your stylesheet_flexible_product_listing.css```
.listingPrice {float: left;} /demo setup/

margin: 0.4em 0 0 1.5em;
to get```
.listingPrice {float: left; margin: 0.4em 0 0 1.5em;} /*demo setup*/

Hi, gjh42

Thank you for clearing SQL thingy!!

And I added the code you suggested. In my opinion, the distance between ‘price’ and ‘add’ was still too long, so I changed it to

Margin: 0.4em 0 0 4.5em;

and now the distance is not too close, not to far. My main browser is Fire Fox, and I will be checking the site with IE and Chrome to see how it looks like. If problem arises, I will come back to this thread to report it.

Thank you so much for the great mod and help!!

nyanko chan =^.^=

Looks good!

I would appreciate it if some others would try this out, with various adjustments and settings. Let me know about any issues that show up.

Hello,

Installed this mod and it seems to be working properly. By the way, if I change the "Layout Style" under Admin/Product Listing back to "Rows", is it normal that the product disappears from the website? If so, does that mean that the only way to go back to default layout is to uninstall this mod?

Also, do I have to upload the "Bonus simpler alternative for CSS control over the stock layout:" or not? At the moment, I only uploaded the files under "includes". Lastly, what are the difference between the two?

All the best

Forgot to add, how do I align them to the left (pictures, description, price) and then the add to cart to the right of the price?

There is a bug that I haven't found yet in the "row" listing setting. I will work on it and post when I have progress.

The "alternative" is just that - an alternate version of the mod for those who don't need the complexity of the full version.
All it does is add class tags to all of the elements of the standard row listing so they can be addressed by the stylesheet.

The class tags generated by the mod are listed in stylesheet_flexible_product_listing.css. You can adjust styling with those. Post a link to your site if you need specific help.

Hello,

Thanks for the reply and for the mod.

If you go to my site https://www.animeheavens.co.uk, you will see under "New Products for December" that the products are aligned to the left. I want the same thing to happen for the product listings...you can check what I have now by clicking "New Arrivals". Not entirely sure which part on the stylesheet_flexible_product_listing.css should I add codes on and what.

All the best..

Hey there everyone. I've trolled the forum and can't seem to run across an answer to a feature I'm sure many of you have thought about or even implemented already.

Using the column layout grid, is it possible to:

1. Set the number of products shown on each grid page? Right now, I only see 9 when the number of columns is set to 3. Example here:

http://www.sweetlexi.com/index.php?main_page=index&cPath=40_49
It would be nice to be able to set it to a larger value like 21 (or more).

2. Is it possible to add a "View all" link to force the grid to reload and show every single product on one page? Yes I know this would grow the page vertically (and also take longer to load)... but some folks like shopping this way.

And Glen - if your feature can do this, please let me know! :cool:

Thanks everyone!!

Setting the number of products per page for listings is a basic feature of Zen Cart.

See admin > Configuration > Maximum Values > Products Listing- Number Per Page.

You can also set this number for other types of listings.
Setting it to a large number will allow up to that number to show.

Hello,

How do I set the image to the left?

Thanks

gjh42:

Setting the number of products per page for listings is a basic feature of Zen Cart.

LOL. Thanks, Glen. I'm happy that I got this working now and also sheepishly ashamed that I overlooked it. And yes... I have the book.

D'oh!

:laugh::frusty::laugh::oops:

Hello there,

I managed to get the look I want but have 1 last problem. On this page http://www.animeheavens.co.uk/shop/index.php?main_page=products_all there doesn't seem to be a margin around the listings so they are pretty much on the sides. I want it to look like this page http://www.animeheavens.co.uk/shop/index.php?main_page=index&cPath=573

Im not sure why they are different. Any help pls.

Thank you

The product listing has a wrapper div (#indexProductList) which appears to have padding (or else the form inside it has margins).
The all products listing has no margin/padding on wrapper or form. There is a wrapper div (.centerBoxWrapperContents); you need to specify the page body id in order not to affect other pages which may also have that class.

#productsallBody .centerBoxWrapperContents  {padding: 1.0em;}

That did the trick! THANKS SO MUCH!!!!!

Hi All,

I have been trying to add some spacing to my new products on my homepage (https://www.truwater.com.au)

I would like a space between the border and the top of the pic, the bottom of the pic and the product heading, and the bottom of the product heading and the price.

Everything i seem to do movies the entire centre box not the individual products.

Any help would be great.
THanks