Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Product Grid View Change? 
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

Can I suggest a change?? In the product Grid view you have the following code:

<?// 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>
                <
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>
                <
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">&nbsp;</td>
        
<?endfor?>
        <?if 
($i%3==0):?>
        
</tr>
        
<?endif?>
        
</table>
        <
script type="text/javascript">decorateTable('product-list-table')</script>
    
</div>
It uses tables to layout the product data and uses <?if ($i++%3==0):?> to control the extra rows etc.  If someone wanted to show the products with more or less than 3 per row they would have to modify the code to do so.  It is possible to achieve the same result with divs and CSS:

<ul class="products">
        
<?$i=0
        foreach (
$_productCollection as $_product):?>
                         
                
<li><a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>"><img src="<?=$_product->getSmallImageUrl()?>" width="135" height="135" alt="<?=$this->htmlEscape($_product->getName())?>"/></a><h3><?=$_product->getName()?></h3><p><?=$this->getHelper('review/helper')->getSummaryHtml($_product'short')?></p><p><strong><?=$this->getHelper('catalog/product')->getPriceHtml($_product)?></strong></p><class="more"><a href="<?=$_product->getProductUrl()?>" title="<?=$this->htmlEscape($_product->getName())?>)">More Details</a></p></li>
    
    
           
        
<?endforeach?>
        
        
<script type="text/javascript">decorateTable('product-list-table')</script>
    
    
</ul>

If each LI has a clear left and the widths are set you can get them to wrap 3 per row.

Any comments/suggestions???

 
Magento Community Magento Community
Magento Community
Magento Community
 
Moshe
Magento Team
 
Avatar
Total Posts:  1770
Joined:  2007-08-07
Los Angeles
 

@Dan: How will you do vertical separators? As a border of LI, or background image?
Could you try this method with different cell heights on same row, for example because of different product title lengths, and have these borders continue after LI ends?
If you can do that please post here the solution, because we didn’t find cross browser solution…

With table it is also possible to have price html block to be aligned to the bottom of the cell, which also would require days of messing with css and browsers doing with LI’s.

Sigh… with current state of CSS and browsers compatibility, sometimes tables are more straightforward and mature solution.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

Hi,

I’ve asked the CSS guru here and he says he’d use background images on the LI. He also explained the CSS approach to the layout and explained that the reason for the LI’s wrapping was that they were in a container that was a specific width and has a clear left attribute. This site explains the principle: http://alistapart.com/stories/practicalcss/

We both agree with you that aligning anything to the bottom with CSS is difficult, if not impossible, so perhaps there is a need for tables in this instance....  Have you seen the example site in the show-off section that uses this approach?

One thing I would suggest to change is that all references to 3 in the current method should be replaced with a variable so that it is only needed to change in one place to update the layout.... if you could have this set per category then that would be great!!

Cheers

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bernhard Huber
Jr. Member
 
Avatar
Total Posts:  28
Joined:  2007-10-03
Warsaw Poland
 

it’s possible, here an example :

Link

but yes, there is a clear left every three times, and some css

but from a SEO, normality point of view, it’s better

 
Magento Community Magento Community
Magento Community
Magento Community
 
Insidedesign
Member
 
Avatar
Total Posts:  73
Joined:  2007-11-20
Asheville, NC
 

Any possibility that this will be added to the next release? The ability to set products per row…

 
Magento Community Magento Community
Magento Community
Magento Community
 
TechNWeb LLC
Member
 
Avatar
Total Posts:  44
Joined:  2008-10-29
Austin, TX
 

I’m trying to accomplish similar task, I would like to show 4 items per row for 3-colums-layout and 3 items per row on both of 2-columns-layout.

Has anyone been successful in adding a parameter to catalog.xml that can be passed to list.php file? This would really help a bunch!

 
Magento Community Magento Community
Magento Community
Magento Community
 
ForgetHangovers
Sr. Member
 
Total Posts:  83
Joined:  2009-04-12
Maryland, USA
 

Looks like some things have changed, I am using v1.3.2, and this is what the list.phtml looks like:

<?php // Grid Mode ?>

    
<?php $_collectionSize $_productCollection->count() ?>
    
<table class="products-grid" id="products-grid-table">
    
<?php $_columnCount $this->getColumnCount(); ?>
    <?php $i
=0; foreach ($_productCollection as $_product): ?>
        <?php 
if ($i++%$_columnCount==0): ?>
        
<tr>
        
<?php endif ?>
            
<td>
                <
class="product-image" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
                    <
img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
                <
h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h3>
                
<?php if($_product->getRatingSummary()): ?>
                <?php 
echo $this->getReviewsSummaryHtml($_product'short'?>
                <?php 
endif; ?>
                <?php 
echo $this->getPriceHtml($_producttrue?>
                <?php 
if($_product->isSaleable()): ?>
                
<button type="button" class="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart'?></span></button>
                
<?php else: ?>
                
<class="availability"><span class="out-of-stock"><?php echo $this->__('Out of stock'?></span></p>
                
<?php endif; ?>
                
<ul class="add-to-links">
                    
<?php if ($this->helper('wishlist')->isAllow()) : ?>
                        
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>"><?php echo $this->__('Add to Wishlist'?></a></li>
                    
<?php endif; ?>
                    <?php 
if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                        
<li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare'?></a></li>
                    
<?php endif; ?>
                
</ul>
            </
td>
        
<?php if ($i%$_columnCount==&& $i!=$_collectionSize): ?>
        
</tr>
        
<?php endif ?>
        <?php 
endforeach ?>
        <?php 
for($i;$i%$_columnCount!=0;$i++): ?>
              
<td class="empty">&nbsp;</td>
        
<?php endfor ?>
        <?php 
if ($i%$_columnCount==0): ?>
        
</tr>
        
<?php endif ?>
    
</table>
    <
script type="text/javascript">decorateTable('products-grid-table')</script>
    <?php 
endif; ?>
    <?php 
echo $this->getToolbarHtml() ?>
</div>

Notice the number ”3” has been replaced with ”$_columnCount” so where is this variable stored and how can I change it?

 
Magento Community Magento Community
Magento Community
Magento Community
 
TechNWeb LLC
Member
 
Avatar
Total Posts:  44
Joined:  2008-10-29
Austin, TX
 

I’m using an older version, but…

First place I’d look is in /app/core/Mage/Catalog/Block/Product/List.php and look for a function “getColumnCount()” and try to track where it grabs the varaibale from

Best,

 
Magento Community Magento Community
Magento Community
Magento Community
 
ForgetHangovers
Sr. Member
 
Total Posts:  83
Joined:  2009-04-12
Maryland, USA
 

Thanks for the reply Igorek,
Figured it out, Thanks to this thread: Where is columnCount set in 1.3.2
:-D

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sowmya
Jr. Member
 
Total Posts:  15
Joined:  2009-06-23
 

Hi,

I am looking for the same. Where can i get the column count.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ForgetHangovers
Sr. Member
 
Total Posts:  83
Joined:  2009-04-12
Maryland, USA
 
Sowmya - 05 July 2009 10:10 PM

Hi,

I am looking for the same. Where can i get the column count.

Sowmya,

Like I said in the post right above yours; “ this thread: Where is columnCount set in 1.3.2

 
Magento Community Magento Community
Magento Community
Magento Community
 
leetaylordoes
Sr. Member
 
Total Posts:  227
Joined:  2008-02-05
San Diego, CA
 

Hi All,

Here’s a quick update and overview on how to modify the number of columns displayed: http://www.eliasinteractive.com/blog/magento-quick-change-in-column-count-for-products-displaying-in-category-listing-grid-view

Cheers!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top