Efeito rollover nas imagens da listagem

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

2017-01-24T20:26:17+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x