1

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?

3

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>
  • Thanks Marius, I would just like to add that it was necessary to add cursor: pointer; to my CSS file to show the cursor. – SR_Magento Mar 10 '14 at 13:09
  • Yep... do the necessary css modifications – Marius Mar 10 '14 at 13:12
  • I appreciate it! :) – SR_Magento Mar 10 '14 at 13:13
1

Well, when you checkout the code youll see that its an unordered list and each tile is a list item. You want the list item to be clickable I guess. So in theory you have to make the whole li to be a link which would make it wrong HTML.

Id suggest removing the ul/li structure and put spans instead using display:inline-block for each tile for example. The whole span can be inside an "a element". That should make it all clickable.

Regards

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.