magento template for block with 2 columns

Question

I made a small magento (1.7) template file that displays a all products in a category. However they only display in a single column. I would like to display in 2 columns.

This executes the block from front page:

{{block type="catalog/product" name="msc.specials" template="mylib/featuredlist.phtml"}}

This is featuredlist.phtml -

<?php
//$_categoryId = $this->getCategoryId();

$productCollection = Mage::getModel('catalog/category')->load(4)
    ->getProductCollection()
    ->addAttributeToSelect('*')
    ->addAttributeToFilter('status', 1)
    ->addAttributeToFilter('visibility', 4)
    ->setOrder('price', 'ASC'); 
    $cartHelper = Mage::helper('checkout/cart');
?>

<div class='block block-list'> 
<div class='block-title'><strong><span><?php echo $this->__('SPECIALS') ?></span></strong></div>
    <div class='block-content'> 
        <ul>
            <h2><?php echo $this->__( $this->getLabel() ); ?></h2>
            <?php foreach ($productCollection as $product): ?>
                <div class="item">
                    <a class="product-image" href="<?php echo $product->getProductUrl() ?>">                
                        <img src="<?php echo $this->helper('catalog/image')->init($product, 'small_image')->resize(100); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($product, 'small_image')) ?>" />
                    </a>
                    <a class="product-name" href="<?php echo $product->getProductUrl() ?>"><?php echo $this->htmlEscape($product->getName()) ?></a>                     
                   <?php echo $this->getPriceHtml($product, true) ?>                       
                </div>

                <div class="cms-price-box" style=" text-align:center;"></div>
                <div class="button-row" style="text-align:center;">                 
                    <button class="button btn-cart" type="button" onclick="setLocation('<?php echo $this->getUrl('')."checkout/cart/add?product=".$product->getId()."&qty=1"  ?>')" class="button"><span><?php echo $this->__('Add to Cart') ?></span></button>
                </div>
                <br/><br/>              
            <?php endforeach ?>
        </ul>
     </div>
</div>

Answer 1

This is actually going to be a bit complicated. Maybe I am over reaching but you will need to do a couple things. Its making it a single item column because it is doing a foreach and just spitting each item out. To make it do two columns you will need to count the items in your list and divide by two. From there you could use some iterations to split it into two arrays and then do a foreach for both resulting arrays.

For each array you will want it in a div with css stylings for left or right columns. Additionally you should decide if you need items split in the middle, the first part goes in column 1 and the latter part goes into column 2. Or you may prefer to have odd items go in column 1 and even items go in column 2.

If you are looking for a more detailed answer I can give you one, however it is not a simple one. Will definitely take a little recoding if you are comfortable with that.

Here is a overview of what you could do: How to display two table columns per row in php loop

Answer 2

Here is a solution based on Nate's suggestion and reference. Would be interested in other ways of doing the same

<?php
$_categoryId = $this->getCategoryId();

$productCollection = Mage::getModel('catalog/category')->load($_categoryId)
    ->getProductCollection()
    ->addAttributeToSelect('*')
    ->addAttributeToFilter('status', 1)
    ->addAttributeToFilter('visibility', 4)
    ->setOrder('price', 'ASC'); 
    $cartHelper = Mage::helper('checkout/cart');

    $x = 1;
?>

<div class='block block-list'> 
<div class='block-title'><strong><span><?php echo $this->__('FEATURED PRODUCTS') ?></span></strong></div>
    <div class='block-content'> 
        <ul>
            <h2><?php echo $this->__( $this->getLabel() ); ?></h2>
            <table>
            <tr>            
            <?php foreach ($productCollection as $product): ?>
            <?php           
                $x++;
                if (($x % 2) == 0){
                    echo "</tr><tr>";
                }
            ?>          
            <td>                
                <div class="item">
                    <a class="product-image" href="<?php echo $product->getProductUrl() ?>">
                        <img src="<?php echo $this->helper('catalog/image')->init($product, 'small_image')->resize(180); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($product, 'small_image')) ?>" />
                    </a>
                    <br/>
                    <a class="product-name" href="<?php echo $product->getProductUrl() ?>"><?php echo $this->htmlEscape($product->getName()) ?></a>                     
                    <?php echo $this->getPriceHtml($product, true) ?>                      
                </div>

                <div class="cms-price-box" style=" text-align:center;"></div>
                <div class="button-row" style="text-align:center;">                 
                    <button class="button btn-cart" type="button" onclick="setLocation('<?php echo $this->getUrl('')."checkout/cart/add?product=".$product->getId()."&qty=1"  ?>')" class="button"><span><?php echo $this->__('Add to Cart') ?></span></button>
                </div>
            </td>
            <?php endforeach ?>
            </tr>
            </table>
        </ul>
     </div>
</div>