Custom grid display on front page of Magento 1.9 RWD

Question

I'm trying to create a custom grid view in Magento 1.9 to display 4 random products on the front page.

What I have so far is basically a copy of the php code from a grid display on one of the category pages into a new template called random.phtml. Then I call that template to display on the front page like so:

{{block type="catalog/product_list" category_id="5" product_limit="4" template="catalog/product/random.phtml"}}

Code for random.phtml is as follows basically a copy and paste from the grid portion of the code in app/design/frontend/rwd/default/template/catalog/product/list.phtml with a slight modification to take into account this issue:

<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>

<?php if(!$_productCollection->count()): ?>
<div class="padder">
<div class="note-msg">
    <?php echo $this->__('There are no products matching the selection.') ?>
</div>
</div>
<?php else: ?>
<div class="category-products">
    <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = 3; ?>
    <ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
        <?php $i=0; foreach ($_productCollection as $_product): ?>
    <?php if ($i==4) break;  // show 4 products max ?>
            <?php /*if ($i++%$_columnCount==0): ?>
            <?php endif*/ ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                    <?php $_imgSize = 210; ?>
                    <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                         src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>"
                         alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                </a>
                <div class="product-info">
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>

                    <?php
                        //$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                        $_nameAfter = $this->getChild('name.after');
                        if($_nameAfter):
                            $_nameAfterChildren = $_nameAfter->getSortedChildren();
                            foreach($_nameAfterChildren as $_nameAfterChildName):
                                $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                                $_nameAfterChild->setProduct($_product);
                                ?>
                        <?php echo $_nameAfterChild->toHtml(); ?>
                    <?php endforeach; ?>
                    <?php endif; ?>

                    <?php echo $this->getPriceHtml($_product, true) ?>
                    <?php if($_product->getRatingSummary()): ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>
                    <div class="actions">
                        <?php if($_product->isSaleable() && !$_product->canConfigure()): ?>
                            <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <?php elseif($_product->isSaleable()): ?>
                            <a title="<?php echo $this->__('View Details') ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?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) ?>" class="link-wishlist"><?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 ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
            </li>
            <?php /*if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
            <?php endif*/ ?>

        <?php endforeach ?>
    </ul>
    <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
</div>
<?php endif; ?>

This is essentially the same code I was using in an old installation of Magento which would select 4 random products for display.

The code works for the most part, but there are some problems:
1) All of the products in category 5 are showing instead of just 4.
2) Though HTML and CSS appear to be identical on both pages, formatting is messed up as compared to the products in grid format as they look on a category page.

I can post links to the pages if necessary, but it's a development site and I'd rather not have traffic on it.

Thanks for any help.

Answer 1

1) All of the products in category 5 are showing instead of just 4.

{{block type="catalog/product_list" category_id="5" product_limit="4" template="catalog/product/random.phtml"}}

This is wrong. You're using the wrong block, catalog/product_list, you should be using catalog/product_list_random and the wrong arg product_limit, you should be using num_products. It's not exactly obvious, I don't know if I used google or checked Block/Product/List/Random.php and worked out what

$numProducts = $this->getNumProducts() ? $this->getNumProducts() : 0;
$collection->setPage(1, $numProducts);

was doing.

2) Though HTML and CSS appear to be identical on both pages, formatting is messed up as compared to the products in grid format as they look on a category page.

On the default product list page, the div hierarchy is

<div class="col-main">
    <div class="category-products">

On the homepage, when you include that block, the div hierarchy is

<div class="col-main">
    <div class="std">
        <div class="category-products">

.std has some rules that .category-products isn't expecting to override. For instance, if you changed from using the grid to the list layout, you'd be using an ordered list, and all the products would start displaying their list item number because this css

std.ol { list-style: decimal outside; margin-bottom: 1.5em; }

if overriding the default css of list-style:none which product-list is relying on.