Problem with Column Layout Grid for Product Listing 1.3.0.2

I've seen this question asked a few times but haven't found an answer.

I'm using the "Column Layout Grid for Product Listing" (1.3.0.2) and wanted three columns, but this keeps happening:

No matter how many columns I tell ZenCart I want, it does this.. if I say 4 columns, then the first three columns show, and the object in the 4th shows up in a second row (and empty space where the 4th column should be).

Thanks in advance for any help.

Each item consumes a specific width and it appears that you do not have enough width to display what you are calling out. I think that there is some re-sizing when additionals are requested but it is attempting to fit it into say 450px and there is not 450 to work with.

Try as a test, changing the shop width in the css in mainwrapper and up this # by say 50 or 60px and see if this corrects it or not. You could then also look at the left & right column widths and box widths in the admin to see what they are and subtract this from what you found in the css for the overall width to see what you have to work with.

Nope, that doesn't seem to be the problem.

The original width is 750px. I changed it to 800px, so there was 50px more room, and the problem is still occuring. I then changed it to 1000px to give it an extra 250px as a test, and it is still doing it.

It doesn't seem to be a problem of space not being there, because if I set it to 5 columns at 750px, four can fit, and the 5th one drops. If I set it to 2 columns, then one fits at the top, and the second column drops.

The problem appears that no matter how many columns I set, and no matter what the width is, the last column drops down to a second row.

Here are some more screenshots of the different category pages with the following settings: 5 Columns, 750px (I want to use 3 columns in my final layout, but I set it to five to show that up to four can actually fit in the layout). The screenshots below demonstrate the problem occuring on various category pages, each with different number of total items.

Here's the HTML for the table from the page with only 2 items. I don't understand why it is splitting the column. The html tells the table to be 100% of the space it is placed in, with each column at 50%, and it should fit!

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="cat2Table" class="tabTable">
  <tr >
   <th class="centerBoxContentsProducts centeredContent back" style="width:50%;" scope="col" id="listCell0-0"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=6"><img src="images/sushi/californiaroll_01.jpg" alt="California Roll Set" title=" California Roll Set " width="100" height="60" /></a><br><h3 class="itemTitle"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=6">California Roll Set</a></h3><div class="listingDescription"></div><br>$25.00<br /><br />Add: <input type="text" name="products_id[6]" value="0" size="4" /><br /><br /></th>
   <th class="centerBoxContentsProducts centeredContent back" style="width:50%;" scope="col" id="listCell0-1"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=7"><img src="images/sushi/su****ogo_01.jpg" alt="Sushi to Go Set" title=" Sushi to Go Set " width="100" height="60" /></a><br><h3 class="itemTitle"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=7">Sushi to Go Set</a></h3><div class="listingDescription"></div><br>$25.00<br /><br />Add: <input type="text" name="products_id[7]" value="0" size="4" /><br /><br /></th>

  </tr>
 
</table>

I was hoping that the author of this mod might chime in with some assistance. This is a strange representation of this. You have attempted several settings with varying results and some are not at all expected. As this requires a sql patch to enable I am not positive of how to back it out so that one could start over and re-install.

Thank you for trying the width adjustment, sorry that this was not the issue.

Having used this personally several times(not 1.3.0.2 yet) I would venture to say that there is something that is not set/installed correctly. 1.3.0.2 I do not think has altered the code areas that this uses so the 1.3.x contribution should work correctly.

I just installed the v1.3.0.2 version of this contribution on a fresh v1.3.0.2 install and cannot reproduce the problem, either with classic or template_default templates.

I recall seeing one other person report similar problem several months ago. I don't recall the exact resolution.

As to the SQL for install/uninstall, there's no harm in leaving the SQL changes in the database. They are just a couple switches used to control column vs row format. Very easy to install/uninstall this mod.

A URL where we can see this in action might be helpful...

The url for my shop is here: http://shop.mmm-fruit.com/index.php

I apologize if it loads slowly... I noticed after my new install of ZenCart, anything related to the store runs extremely slowly. Admin, the actual website, everything takes so long to load (I've tried it on both DSL and Cable internet in two different locations); but the rest of my website (not run by ZenCart) loads instantly.

I've used the version for ZenCart 1.2 and it has worked fine.

I am also having this problem. The site I am working on is here: http://www.modtomodern.com/shop

In Internet Explorer it loads fine, all four products per row in the product listing, but in Firefox the last product in the first row is split from the rest. I'm not sure why it is doing this! I also changed the width and right/left columns as mmmfruit did, but it did not resolve the problem.

I think you can "fix" this by making two small edits to the customized product_listing.php module used in the grid-layout mod:

approx line 95 starts with:php // Used for Column Layout (Grid Layout) add on module $column = 0; if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') { if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) { $col_width = floor(100/$num_products_count)-1; } else { $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW)-1; } } // Used for Column Layout (Grid Layout) add on module replace with:```php
// Used for Column Layout (Grid Layout) add on module
$column = 0;
if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
$col_width = floor(100/$num_products_count)-0.5;
} else {
$col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW)-0.5;
}
}
// Used for Column Layout (Grid Layout) add on module

@ DrByte

Will it something related or not?

Another user had similar probelm but in the index page and in the Freature Products Box. Problem had solved and just for reference.
Please refer to the following link the details
Template Help

.

DrByte, I tried to change the code you specified, but in my product_listing.php file, there is no such code! Should I add it in, or would that not work?

goodmorning:

DrByte, I tried to change the code you specified, but in my product_listing.php file, there is no such code! Should I add it in, or would that not work?
The code referenced is from the contribution, not from the original distribution Zen Cart file.

Got it, thank you! Your fix worked great. :)

I made the modification but am having trouble checking to see if it works...

I seem to be having yet another problem with ZenCart, and am not sure what is causing it. Anything related to ZenCart (index.php, the admin, etc. etc. etc.) loads EXTREMELY SLOWLY... actually, I went to the site just now to test if the mod worked, but now it just spends a minute or so trying to load, then quits and loads a blank page. I am having this problem on different computers and different internet connections (university connection, DSL, and cable)... but I'm not sure if it's a server problem, because any other part of my website un-related to ZenCart loads super-quickly.

My ZenCart shop is here: http://shop.mmm-fruit.com/index.php

mmmfruit:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="cat2Table" class="tabTable"> <tr > <th class="centerBoxContentsProducts centeredContent back" style="width:50%;" scope="col" id="listCell0-0"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=6"><img src="images/sushi/californiaroll_01.jpg" alt="California Roll Set" title=" California Roll Set " width="100" height="60" /></a><br><h3 class="itemTitle"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=6">California Roll Set</a></h3><div class="listingDescription"></div><br>$25.00<br /><br />Add: <input type="text" name="products_id[6]" value="0" size="4" /><br /><br /></th> <th class="centerBoxContentsProducts centeredContent back" style="width:50%;" scope="col" id="listCell0-1"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=7"><img src="images/sushi/su****ogo_01.jpg" alt="Sushi to Go Set" title=" Sushi to Go Set " width="100" height="60" /></a><br><h3 class="itemTitle"><a href="http://shop.mmm-fruit.com/index.php?main_page=product_info&cPath=2&products_id=7">Sushi to Go Set</a></h3><div class="listingDescription"></div><br>$25.00<br /><br />Add: <input type="text" name="products_id[7]" value="0" size="4" /><br /><br /></th> </tr> </table> ``` I had the same problem and I fixed it. I can see from the html you posted that you are having the same problem as me becase your items are in a table. The table is created by the tpl_modules_products_listing that is part of the common templates. The tpl_modules_product_listing.php that comes with the mod must be in the directory **ZEN_CART_HOME_DIR/includes/templates/YOUR_TEMPLATE/templates/**, not in ZEN_CART_HOME_DIR/includes/templates/YOUR_TEMPLATE/. Unfortunately both are listed in the instructions. I am using the future_zen template for now and I had to make the directory templates under includes/templates/future_zen and move the tpl_modules_product_listing.php in there. The path to my file is ZEN_CART_HOME_DIR/includes/templates/future_zen/templates/tpl_modules_product_listing.php. Once I did, the items are put in <div> entries ``` <!-- BOF: Display grid of available sub-categories, if any --> <tpl_columnar_display />

<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_33"><img src="images/refreshingelements.4072b.jpg" alt="Bracelets" title=" Bracelets " width="180" height="240" /><br />Bracelets</a></div>

<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_32"><img src="images/refreshingelements.4143e.jpg" alt="Earrings" title=" Earrings " width="180" height="240" /><br />Earrings</a></div>
<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_38"><img src="images/refreshingelements.4084n.jpg" alt="Necklaces" title=" Necklaces " width="180" height="240" /><br />Necklaces</a></div>

<br class="clearBoth" />

<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_83"><img src="images/refreshingelementse3091.jpg" alt="Pendants" title=" Pendants " width="180" height="240" /><br />Pendants</a></div>
<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_139"><img src="images/SN194Acujpg.jpg" alt="Dichroic Glass" title=" Dichroic Glass " width="180" height="156.24365482234" /><br />Dichroic Glass</a></div>
<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_82"><img src="images/refreshingelements.lanyardids.jpg" alt="Lanyard ID Necklaces" title=" Lanyard ID Necklaces " width="180" height="240" /><br />Lanyard ID Necklaces</a></div>

<br class="clearBoth" />

<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_77"><img src="images/Anklet-SAM-100-turq.jpg" alt="Anklets" title=" Anklets " width="172" height="240" /><br />Anklets</a></div>
<div class="categoryListBoxContents" style="width:33%;"><a href="http://www2.refreshingelements.com/catalog/index.php?main_page=index&cPath=132_84"><img src="images/refreshingelements.hairsquiggle.jpg" alt="Hair Accessories" title=" Hair Accessories " width="180" height="135" /><br />Hair Accessories</a></div>

<br class="clearBoth" /> <!-- EOF: Display grid of available sub-categories -->

I had a similar problem and discovered that I had inserted a padding 0.5em in my navColumnOne an navColumnTwo. I deleted these in my CSS and this fixed things for me. Good Luck!