Magento - More than three products per row in grid view - 'How do I' Questions - eCommerce Software for Growth, Powered by Open Source

Skip to site navigation »
Skip to main content »
Skip to footer content »

Sales: Call 877.832.5289 (N America)|310.295.4144 (International)

Magento Forum

More than three products per row in grid view

inspiredbackpacker Total Posts: 47 Joined: 2008-09-01 Ignore user	How do I have more than three products per row in grid vie? I know I need to change the code as shown in this thread, http://www.magentocommerce.com/boards/viewthread/842/ but how?I will continue to mess with my precious code and wait for an answer to fall on my head Signature Helping people makes me feel good… People helping me makes me feel GREAT
	Posted: September 5 2008 \| top

inspiredbackpacker Total Posts: 47 Joined: 2008-09-01 Ignore user	Scratch that, I figured it out myself again. Maybe it’s the posting it that triggers something. Anyways, I new it had something to do with changing the number 3 found in the code, I just forgot to change all four, forgot the one on the top. Now I’m good. Signature Helping people makes me feel good… People helping me makes me feel GREAT
	Posted: September 5 2008 \| top \| # 1

jvalen Total Posts: 54 Joined: 2007-12-12 Los Angeles Ignore user	inspiredbackpacker - 05 September 2008 01:13 PM Scratch that, I figured it out myself again. Maybe it’s the posting it that triggers something. Anyways, I new it had something to do with changing the number 3 found in the code, I just forgot to change all four, forgot the one on the top. Now I’m good. @ inspiredbackpacker How did you accomplish this? I can’t find the location of the file to edit. I was also wondering how to do this. Signature Converting to Magento BarbieIsOut
	Posted: September 5 2008 \| top \| # 2

inspiredbackpacker Total Posts: 47 Joined: 2008-09-01 Ignore user	The file location is: magento/app/design/frontend/default/default/template/catalog/product/list.phtml The code to change is the numbers 3 found in here, one at the top, three at the bottom: <?// Grid Mode?> <div class="listing-type-grid catalog-listing"> <!-- the class name will change to .listing-type-cell if viewing in list mode --> <?$_collectionSize = $_productCollection->count()?> <table cellspacing="0" class="generic-product-grid" id="product-list-table"> <?$i=0; foreach ($_productCollection as $_product):?> <?if ($i++%3==0):?> <tr> <?endif?> <td> <p class="product-image"> <a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>"> <img src="<?=$_product->getSmallImageUrl()?>" width="135" height="135" alt="<?=$this->htmlEscape($_product->getName())?>"/> </a> </p> <h5><a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>)"><?=$_product->getName()?></a></h5> <?=$this->getHelper('review/helper')->getSummaryHtml($_product, 'short')?> <?=$this->getHelper('catalog/product')->getPriceHtml($_product)?> <?if($_product->isSaleable()):?> <button class="form-button" onclick="setLocation('<?=$this->getAddToCartUrl($_product)?>')"><span><?=$this->__('Add to Cart')?></span></button> <?endif;?> <div class="clear"></div> <p class="add-to"> <a href="<?=$this->getAddToWishlistUrl($_product)?>" class="link-cart"><?=$this->__('Add to Wishlist')?></a> <?if($_compareUrl=$this->getAddToCompareUrl($_product)):?><br/> <a href="<?=$_compareUrl?>"><?=$this->__('Add to Compare')?></a> <?endif;?> </p> </td> <?if ($i%3==0):?> </tr> <?endif?> <?endforeach?> <?for($i;$i%3!=0;$i++):?> <td class="empty-product"> </td> <?endfor?> <?if ($i%3==0):?> </tr> <?endif?> </table> <script type="text/javascript">decorateTable('product-list-table')</script> </div> Good luck Signature Helping people makes me feel good… People helping me makes me feel GREAT
	Posted: September 5 2008 \| top \| # 3

jvalen Total Posts: 54 Joined: 2007-12-12 Los Angeles Ignore user	@ inspiredbackpacker Thanks alot its working! Signature Converting to Magento BarbieIsOut
	Posted: September 5 2008 \| top \| # 4

inspiredbackpacker Total Posts: 47 Joined: 2008-09-01 Ignore user	Just some more help on fixing the widths, they are found in the css class (.listing-type-grid td) Change the percentage to 25% Signature Helping people makes me feel good… People helping me makes me feel GREAT
	Posted: September 5 2008 \| top \| # 5

msohler Total Posts: 7 Joined: 2008-08-14 Ignore user	Thanks for your suggestion, but it must be for magento before 1.1.6 as that page doesn’t even have “table” in it any more. here’s the grid area and I see the 3 but when I change it to 4 and one other to 3 and change the css to 25% it still does’t break at 4. products. <?php // Grid Mode ?> <div class="listing-type-grid catalog-listing"> <?php $_collectionSize = $_productCollection->count() ?> <?php $i=0; foreach ($_productCollection as $_product): ?> <?php if($i++%3==0): ?> <ol class="grid-row"> <?php endif; ?> <li class="item"> <p class="product-image"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"> <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /> </a> </p> <h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5> <?php if($_product->getRatingSummary()): ?> <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?> <?php endif; ?> <?php echo $this->getPriceHtml($_product, true) ?> <?php if($_product->isSaleable()): ?> <button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button> <?php else: ?> <div class="out-of-stock"><?php echo $this->__('Out of stock') ?></div> <?php endif; ?> <p class="add-to"> <?php if ($this->helper('wishlist')->isAllow()) : ?> <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a> <?php endif; ?> <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a> <?php endif; ?> </p> </li> <?php if($i%3==0 \|\| $i==$_collectionSize): ?> </ol> <?php endif; ?> <?php endforeach ?> <script type="text/javascript">decorateGeneric($$('.grid-row'), ['last', 'odd', 'even']);</script> </div> <?php endif; ?> <?php echo $this->getToolbarHtml() ?> <?php endif; ?> I even change the image to be much smaller. <?php // Grid Mode ?> <div class="listing-type-grid catalog-listing"> <?php $_collectionSize = $_productCollection->count() ?> <?php $i=0; foreach ($_productCollection as $_product): ?> <?php if($i++%4==0): ?> <ol class="grid-row"> <?php endif; ?> <li class="item"> <p class="product-image"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"> <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(92, 126); ?>" width="92" height="126" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /> </a> </p> <h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5> <?php if($_product->getRatingSummary()): ?> <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?> <?php endif; ?> <?php echo $this->getPriceHtml($_product, true) ?> <?php if($_product->isSaleable()): ?> <button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button> <?php else: ?> <div class="out-of-stock"><?php echo $this->__('Out of stock') ?></div> <?php endif; ?> <p class="add-to"> <?php if ($this->helper('wishlist')->isAllow()) : ?> <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a> <?php endif; ?> <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a> <?php endif; ?> </p> </li> <?php if($i%4==0 \|\| $i==$_collectionSize): ?> </ol> <?php endif; ?> <?php endforeach ?> <script type="text/javascript">decorateGeneric($$('.grid-row'), ['last', 'odd', 'even' ]);</script> </div> <?php endif; ?> <?php echo $this->getToolbarHtml() ?> <?php endif; ?>
	Posted: October 7 2008 \| top \| # 6

JRushMusic.com Total Posts: 2 Joined: 2008-10-04 Miami, FL Ignore user	can you change this pn version 1.1.6 Signature http://www.jrushmusic.com http://www.thugrehab.com
	Posted: October 7 2008 \| top \| # 7

msohler Total Posts: 7 Joined: 2008-08-14 Ignore user	Ok I figured some of it out for Magento 1.1.6 You do have to change the 3 to 4 in 2 places (there are only 2 places to make this fix in 1.1.6 as mentioned above. ) in this file: app/design/frontend/default/default/template/catalog/product/list.phtml Change from this <?php if($i++%3==0): ?> to this <?php if($i++%4==0): ?> But you also have change the skin/frontend/default/default/css/boxes.css file - and FYI the changing of 33% to 25% didn’t fix it entirely, as mentioned above I also had to change the 138px to 95 px and for regular 3 colums layout and I changed the 208 to 105 pix (see the lines below /* my fix / for the exact lines. You would also have to edit the back ground image so that the “line” shows up between columns. but I didn’t get that far yet. and I didnt’ figure out the rest of the layouts, but this is the area to make the changes. / Grid Type / .listing-type-grid { background:url(../images/bkg_products-grid3.gif) 0 0 repeat; } .listing-type-grid .grid-row { border-bottom:1px solid #d9dde3; } /.listing-type-grid li.item { float:left; width:138px; padding:12px 10px; line-height:1.6em; overflow:hidden; }/ / my fix / .listing-type-grid li.item { float:left; width:95px; padding:12px 10px; line-height:1.6em; overflow:hidden; } .listing-type-grid .last { border-bottom:0; } .listing-type-grid .product-image { text-align:center; } .listing-type-grid .rating-box { float:left; margin-left:0; margin-right:5px; } .listing-type-grid .actions { margin:10px 0; text-align:center; } / Rewrites for different layouts / .col-1-layout .listing-type-grid { background-image:url(../images/bkg_products-grid1.gif); } .col-1-layout .listing-type-grid li.item { width:280px; } .col-1-layout .listing-type-grid li.item { width:280px; } .col-2-left-layout .listing-type-grid, .col-2-right-layout .listing-type-grid { background-image:url(../images/bkg_products-grid2.gif); } .col-2-left-layout .listing-type-grid li.item, / .col-2-right-layout .listing-type-grid li.item { width:208px; }/ / my fix */ .col-2-right-layout .listing-type-grid li.item { width:150px; }
	Posted: October 9 2008 \| top \| # 8

msohler Total Posts: 7 Joined: 2008-08-14 Ignore user	skip this post, i edited the original where I made a mistake
	Posted: October 9 2008 \| top \| # 9

nath247 Total Posts: 3 Joined: 2008-10-28 Ignore user	Thanks great thread. but just another question how do you get rid of the boeders to the products or reduce the width, cant find it in the css boxes. probably stering right at me
	Posted: 6 days ago \| top \| # 10

Magento Community

Magento Community

Back to top

Batch Order Status Update

How do I set "Origin of the shipment" for UPS shipping to a specific country, city and postcode?

Sales: Call 877.832.5289 (North America) 310.295.4144 (International)