Can I make it dynamically change from 5 to 4 to 3 columns based on screen resolution?

Hello all,

I am trying to figure out if can do this.

Zen Cart 1.3.8p3
Database Patch Level: 1.3.8
fresh install
http://www.justforyouimages.com I've only been working on it a few days now so its by no means a finisihed product. so go easy on me if you notice to many mistakes.

I am developing this site for a customer and its my second store.
I use screen res. 1280x1024 and like the way the 5 columns look, but when i change to a lower setting ie 1024x768 the columns look to squished, is there a way in Zen or a mod to dynamically change the amout of columns based on window size?

so if a user is looking at it with 1280x1024 and minimizes the window to 3/4 screen they will see 4 columns, the same as a user that has 1024x768 set. these are just examples.

Im not a php coder at all, but I thought it may have a solution of setting the class="centerColumn" to so many px have five columns and 75% of that to 4 columns and 50% to 3 columns, but alas I have no idea how to do this. Any Ideas?

I have searched the forums in vain for something like this, but if its there ill take my licks for not using the right keywords :lookaroun

I suspect that could be done, but it would require custom coding. I doubt very much if you could do it in the stylesheet.

You didn't ask, but wouldn't it make more sense to have one 'men's t-shirt' product, and do the sizes and colors as attributes (or the colors, at least, if all sizes don't come in all colors).

There is a quick and dirty way to do this that only requires a simple code change to /modules/YOUR_TEMPLATE/product_listing.php

First you need to set the column widths to a fixed value.
Around line 105 you will find where the column width is calculated based on the columns per row setting.
Below that line, and after the 2nd closing }, add the following:
$col_width = '150';

150 is the width in px that you want your column to be and can be changed accordingly.

Now on line 241, change the '%;' to 'px;'.

Next, you need to set "Product Listing - Columns Per Row" to match your products per page value in order to get rid of any extra linebreaks.

As the window gets smaller the number of boxes that can fit in the centercolumn will get smaller and they will wrap to the next line.

The only other thing I would recommend is adding a fixed height to your centerBoxContentsNew class to avoid misaligned rows.

Sorry, I thought you were using the column grid module.

If you want to accomplish the same thing for the new products box, follow the same instructions but apply the changes to modules/YOUR_TEMPLATE/new_products.php.

stevesh:

You didn't ask, but wouldn't it make more sense to have one 'men's t-shirt' product, and do the sizes and colors as attributes (or the colors, at least, if all sizes don't come in all colors).

I am trying that out I just cant get it to look right, But I am working on it. I have those items in there to help me with the page layout. Thank you for the help:yes:

And to pjb923 thanks:clap: I will try this. Sound like what i was after, but as I am not a coder I may have to ask a few more questions.

I will Post with an update as soon as I can

I havent gotten to the column grid module yet so i will try this on the new products first.

Ok before I destroy my new_products.php and cause myself to curse my moniter let me ask a couple more questions now that I reread this and am trying to do it

pjb923:

Next, you need to set "Product Listing - Columns Per Row" to match your products per page value in order to get rid of any extra linebreaks.

1st. Does this mean that If I want 5 columns at full screen Im only going to be able to show 5 products? ie 1 row, 5 columns, or am I limited to 12 items as this is the max column per row in the (Index Listing - new products columns per row).

pjb923:

As the window gets smaller the number of boxes that can fit in the centercolumn will get smaller and they will wrap to the next line.

2nd. I take this to mean- if I have 3 rows of 4 columns and the window shrinks I will then have 4 rows of 3 columns, and then 6 rows of 2 columns, and then 12 rows of 1 column. Is this correct?

because I can live with that if thats all I can do, But what I was really looking to achive is

full screen or high res. 3 rows of 5 columns
smaller window or lower res. 3 rows of 4 columns
even smaller window or lower res. 3 rows of 3 columns

Thank you in advance:smile:

You would set the individual product width to something that looks good and gives 5 at 1280px; then you will have exactly as many of them per row as fit in the center column. In a 1600px wide screen there might be 7 or 8; in a 1280px screen, there could be 5, in 1024px there would be 4, etc. This would be a more flexible formula than you proposed.

For the new products centerbox, items per row is limited to 12 so you would want to set max products to 12 for neatness. This is not the new listing page and there could be other things like featured or specials centerboxes as well as a category or product listing on the page. There is no setting for minimum number of rows, so if 5 fit per row, you would get 2 full rows of 5 and a row with 2 products.

When you install Column Grid (easy and quick), you can set the number of products per row for the product listing as high as you want so there will be no awkwardness.

pisapona:

1st. Does this mean that If I want 5 columns at full screen Im only going to be able to show 5 products? ie 1 row, 5 columns, or am I limited to 12 items as this is the max column per row in the (Index Listing - new products columns per row).You can exceed 12 items, but after the 12th there will be a line break inserted and the 13th item will be forced into the next row. I can't figure out where the break is being inserted in the code, but it should be possible to manually remove it.

pisapona:

2nd. I take this to mean- if I have 3 rows of 4 columns and the window shrinks I will then have 4 rows of 3 columns, and then 6 rows of 2 columns, and then 12 rows of 1 column. Is this correct?
Yes, that is exactly how it would work.

pisapona:

because I can live with that if thats all I can do, But what I was really looking to achive is

full screen or high res. 3 rows of 5 columns
smaller window or lower res. 3 rows of 4 columns
even smaller window or lower res. 3 rows of 3 columns
This would require significantly more custom coding to dynamically change the maximum number of products displayed based on the current display size. You would probably need some javascript, as the display would need to be refreshed when the screen was sized. This goes beyond my skill level.

pjb923:

This would require significantly more custom coding to dynamically change the maximum number of products displayed based on the current display size. You would probably need some javascript, as the display would need to be refreshed when the screen was sized. This goes beyond my skill level.

Again thank you for the reply. Going to work on this right now. as for the java, I'm doing this for free so.... I cant pay for a custom javascript. I will make the advice you gave me work. Thanks

"after the 12th there will be a line break inserted and the 13th item will be forced into the next row. I can't figure out where the break is being inserted in the code, but it should be possible to manually remove it."

The output goes through /includes/templates/your_template/common/tpl_columnar_display.php, where this is inserted at the end of every row's output (near the bottom of the file):

You would need to selectively remove that when the new products centerbox is being processed and not otherwise.

An easier alternative would be to add to your stylesheet```
#whatsNew br.clearBoth {display: none;}

gjh42:

An easier alternative would be to add to your stylesheet```
#whatsNew br.clearBoth {display: none;}

Very good advice.  It never occurred to me that you could use display: none; on the breaks.  Much easier than hacking up the tpl_columnar_display.php code.  :bigups: