sexta-feira, 19 de julho de 2013

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

=)

6 comentários:

  1. Olá, insiro o código, mas ele mostra a primeira imagem, e começa a repetir a mesma imagem em todos os produtos e quando atualizo o navegador ele não lista mais os produtos? como resolver? vlw

    ResponderExcluir
    Respostas
    1. Olá Lucas!
      Estranho, porque aqui deu certo... Poderia postar sua dúvida no Fórum da Comunidade Magento ? Assim eu posso te ajudar e fica mais fácil para postar códigos.

      Excluir
  2. Boa noite, muito bom o artigo. Parabéns. Estou com uma dúvida. Seria possível fazer ele ler a 2ª imagem cadastrada ao invés da ultima? Obrigado. Daniel.

    ResponderExcluir
    Respostas
    1. Olá Daniel!
      Eu tenho um código aqui que faz isso, só que ele não funcionou muito bem para produtos que possuem apenas uma imagem. Caso você queira esse código, entre em contato comigo pelo e-mail ale.srodrigues@live.com
      =)

      Excluir
    2. Olá Bom dia. Mandei o e-mail ;) Muito obrigado.

      Excluir