product grid design

[tonylees]

Hi,

Could someone please give me some ideas how to change the layout of the product listing (in a grid layout)... I want to create something similar to;

I would also like all products shown to be equalized (my current effort can be seen Here)

http://www.halifaxboilerrepairs.co.uk

Any help would be appreciated.

Thanks

Tony.

[MrKhoa99]

Hi,

I think we don't need to edit in layout xml. We should edit in catalog/product/list.phtml.

+The text under Product name is short description? You can get by:

$_helper = $this->helper('catalog/output');

<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>

To Insert ellipsis (...), you can read here:

http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide

+VIEW PRODUCT is the link reaches to the product detail page? This code is already:

<?php echo $_product->getProductUrl() ?>

[tonylees]

Hi thanks for the reply. But how do i get the layout as the image. This is when the products are displayed on a category page (3 or 4 to a row)

Is this just css?

Thanks
Tony

[MrKhoa99]

Hello,

You can set in layout xml: layout/catalog.xml, you find setColumnCount and set the number of products per row.

<action method="setColumnCount"><count>5</count></action>

[tonylees]

Hi thanks, but it is the actual way the product is displayed that i am trying to sort out if you can look at halifaxboilerrepairs.co.uk you can see the way the product is currently displayed... i want it to look like the image in my original post.

Best regards
Tony

[MrKhoa99]

Hello,

I saw that there are two places where show your products listing: Homepage and category view page. On category view page, you can set  setColumnCount in layout. On homepage, how you get the products? If using layout xml to add products on homepage? => you can also add setColumnCount to your layout.

If you take a look  list.phtml on rwd package default. You can see:

<?php // Grid Mode ?>

    <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

As we can see, Magento will get column count value to use for Css style. Please check any hard code- column count value on catalog/product/list.phtml in Grid mode.