Product List – Make Entire Product Tile Clickable in List/Grid View

product-list

I've been collecting data and have found that most users are not clicking through on my products when browsing my site. I suspect that it is because the clickable areas on list and grid view (list.phtml) are small and specific (image, name). I have removed the links to add to compare / add to favorites and have removed the add to cart button in favor of a "More Info".

Since tablets and touch devices are becoming more and more popular I would like to make the entire tile clickable.

        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
        <?php // Product Image ?>
        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
        <?php // Product description ?>
        <div class="product-shop">
            <div class="f-fix">
                <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product) ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <?php if($_product->isSaleable()): ?>
                 <p><button type="button" title="<?php echo $this->__('More Info') ?>" class="button btn-cart" onclick="setLocation('<?php echo $_product->getProductUrl(); ?>')"><span><span><?php echo $this->__('More Info') ?></span></span></button>                    <?php else: ?>
                    <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                <?php endif; ?>
                <div class="desc std">
                    <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
                </div>
             </div>
        </div>
    </li>

I've tried to use the products html link but it breaks the sites layout.

<a href="<?php echo $_product->getProductUrl() ?>  PRODUCT LIST CODE </a>

Using the default theme as an example, how can I make the entire tile clickable?

Best Answer

You can add an onclick event on the li element.

Something like this:

<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>" onclick="setLocation('<?php echo $_product->getProductUrl() ?>')">
<!-- rest of the item content here -->
</li>