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 theli
element.Something like this: