Olá pessoal!

Nessa postagem irei transcrever um tópico muito interessante postado pelo Jonatan Machado no Fórum da Comunidade Magento.

Nesse tópico ele ensina como mudar a imagem do produto para outra quando em estado hover (quando você passa o mouse sobre ela).

Tenho certeza que o código compartilhado irá ajudar muita gente!

Para colocar esse efeito na sua loja, basta fazer o seguinte:

– No seu list.phtml (app -> design -> frontend -> default -> SeuTema -> template -> catalog -> product), procure pelo trecho responsável pela exibição da imagem (que irá aparecer duas vezes, uma para a exibição em tabela, outra em lista).

No tema padrão do Magento, o trecho é o seguinte:

<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>

Após encontrar o trecho correto, substitua ele todo (nas duas vezes em que ele irá aparecer) pelo seguinte código:

<?php
$product = Mage::getModel('catalog/product')->load($_product->getId());
$helper = Mage::Helper('catalog/image');
foreach ($product->getMediaGalleryImages() as $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) ?>"
 onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $image->getFile())->resize(135); ?>';"
 onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>';"/>
</a>

Obs: Utilizando esse código, a imagem que aparecerá no efeito hover será a última cadastrada no produto.

Demonstração: http://www.arsenalwebdesign.com/templates/loja-trike/

Tópico na íntegra: http://www.comunidademagento.com.br/forum/topic/5243-rollerover-imagem-para-listas-de-produtos/

Agradecimento: Jonatan Machado