terça-feira, 15 de janeiro de 2013

Tutorial: Acrescentando imagens no filtro de navegação (navegação em camadas)


Olá pessoal!
Faz tempo que não posto coisas no blog, mas recentemente "encontrei" algo muito útil e resolvi compartilhar. Uma função muito questionada no fórum é a de como acrescentar miniaturas de cores e tamanhos no filtro lateral de navegação. No Magento Connect existem diversas extensões para essa necessidade, mas todas são pagas. Fazendo uma àrdua busca em blogs estrangeiros, encontrei uma extensão free que realiza essa função e funciona perfeitamente! Nesse tutorial vou colocar um passo-a-passo de como fazer essa extensão funcionar no Magento 1.7.0.2 e alterar o layout para que fique igual aos das extensões pagas.


1º Passo - Baixar a extensão e instalar

Você deve baixar o arquivo .zip no seguinte link:
https://github.com/jreinke/magento-attribute-option-image

------ Postagem Editada - 29/05/2013 ------

Pessoal, hoje eu fui verificar o link do arquivo e vi que retiraram a extensão do ar, pois o desenvolvedor resolveu comercializá-la. Sei que é um direito dele fazer isso, só não acho muito legal você postar algo free e depois retirar...
Mas, para a felicidade de todos (brincadeira!), eu criei uma conta no 4shared e subi o arquivo para disponibilizá-lo. O link para o download é o seguinte:

http://www.4shared.com/zip/QteV5qxv/magento-attribute-option-image.html

Não sei se isso é errado, mas eu baixei na época que era free!
=)

-------------------------------------------------------------

Após baixar, decompacte e instale manualmente (mesclando as pastas e movendo os arquivos).
Depois de instalar, limpe o cache!

2º Passo - Alterar o Observer.php, caso você utilize a versão 1.7 ou superior

Muitas pessoas que utilizaram essa extensão no Magento de versão igual ou superior a 1.7, relataram um bug no painel administrativo que pode ser resolvido da seguinte maneira:

Abra o arquivo Observer.php (app->code->community->JR->AttributeOptionImage->Model) e substitua todo o código pelo desse link:

https://github.com/bencorlett/magento-attribute-option-image/blob/fa2d06b0b3babc794c28348879253d100ab0a742/app/code/community/JR/AttributeOptionImage/Model/Observer.php

Caso você não utilize uma versão inferior, pule para o próximo passo!

3º Passo - Salvar as miniaturas das imagens

Para ficar mais organizado, crie uma pasta com o nome miniaturas dentro da pasta media (que fica na raiz). Dentro dela, salve todas as imagens de miniaturas que você vai utilizar no filtro, como cores, tamanhos, marcas etc.

Obs: Mantenha um tamanho e nome padrão para os quadradinhos. O tamanho será redimensionado posteriormente no css, mas poderá ser modificado.
Minha pasta miniatura está assim:



4º Passo - Adicionar as imagens em miniatura nos atributos

Nesse exemplo, vou adicionar as imagens das cores e tamanhos. Para isso você terá que ter os atributos cor e tamanho criados no seu painel administrativo. Se você instalou a extensão corretamente, ao clicar no atributo (em Catálogo->Atributos->Gerenciar Atributos), na aba Gerenciar Descrição/Opções irá aparecer o seguinte:



Preencha o campo imagem e miniatura(se houver) com o caminho da imagem salva anteriormente, seguindo o padrão:

http://home-da-loja/media/miniaturas/amarelo.png

Após preencher todos os campos, Salve. Se aparecer uma mensagem no topo da loja pedindo para reindexar os índices, faça isso.
Repita os passos para todos os atributos que você vai utilizar!

Obs: Para que a extensão funcione corretamente, na configuração dos atributos, no campo Usar em Navegação de Camadas deve estar selecionada a opção Filtrar (apenas com resultados).

5º Passo - Exibir as imagens no filtro de navegação

Altere o arquivo filter.phtml (app->design->frontend->SeuTema->SeuTema->template->catalog->layer), substituindo seu código pelo seguinte:

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
            <?php if($_item->getName() == "Cor" || $_item->getName() == "Tamanho" ) : ?>
             <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>" title="<?php echo $_item->getLabel() ?>"><img class="img-swatch" src="<?php echo Mage::helper('attributeoptionimage')->getAttributeOptionImage($_item->getValue()); ?>" alt="" /></a>
            <?php else: ?>
            <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>
        <!--(<?php echo $_item->getCount() ?>)-->
            <?php endif; ?>
        <?php else: echo $_item->getLabel() ?>        
        <?php endif; ?>       
    </li>
<?php endforeach ?>
</ol>
<p class="float-clearer"> </p> 


Onde Cor e Tamanho são as legendas dos atributos que eu irei usar as miniaturas. Caso a legenda dos seus atributos sejam diferentes, modifique-as para que o filtro seja exibido corretamente. 

Obs:
- Caso você não tenha esse arquivo no seu tema, crie um com o código citado;
- Caso queira manter a quantidade de produtos ao lado dos atributos que não possuem filtragem com imagens (por exemplo, atributo preço), apague os delimitadores de comentário na seguinte linha:

        <!--(<?php echo $_item->getCount() ?>)-->


6º Passo e último - Modificar o layout para a exibição das miniaturas na horizontal

Abra o seu styles.css (skin->frontend->SeuTema->SeuTema->css) e acrescente as seguintes classes, logo no início do arquivo:

.img-swatch {
  border: 1px solid #E1E1E1;
  cursor: pointer;
  display: inline;
  float: left;
  margin-bottom: 4px;
  margin-left: 5px;
  margin-top: 5px;
  padding: 2px;
  width:15px;
  height:15px;
}

.float-clearer {
    clear: both;
}



Obs: Caso queira aumentar/diminuir o tamanho dos quadradinhos, basta alterar o valor das propriedades width e height!

Seguindo todos os passos anteriores corretamente, seu filtro de navegação ficará mais ou menos assim:



Para finalizar, como em todos os tutoriais, quero deixar bem claro que o estilo(css) depende muito do seu tema e que esse tutorial foi testado no default e na versão 1.7.0.2!

Então é isso! Fiquem à vontade para dar sugestões, tirar dúvidas ou corrigir algo, deixando um comentário!

=)

Fonte: Magento: Add images to product attribute options

19 comentários:

  1. Olá, excelente explicação, parabéns! Mas será que eu consigo colocar essas miniaturas ao lado dos botões de rádio na página do produtio, nos produtos configuraveis?

    ResponderExcluir
    Respostas
    1. Olá Mônica!
      Obrigada pelos elogios! =)
      Na página do produto eu aconselho usar a seguinte extensão free:
      http://www.magentocommerce.com/magento-connect/gala-color-swatches-free-9787.html
      Ela funciona perfeitamente com os produtos configuráveis, basta colocar a legenda do seu atributo na parte de configuração da extensão.
      Se você quiser eu posso até fazer um tutorial explicando melhor.


      Excluir
  2. Olá, se puder explicar eu agradeço, pois era justamente o que eu procurava...
    Já integrei o gala-color no magento 1.7, mas depois nao sei como usa-lo em meus produtos...hehehe.

    ResponderExcluir
    Respostas
    1. Olá Léo!
      Em breve postarei um tutorial sobre isso!
      Mas, basicamente você deve criar um produto configurável e setar as imagens utilizadas no gala color swatches de acordo com as legendas de seus atributos.

      Excluir
  3. Olá muito bom seu post. Estou usando o Gala nos atributos de cores e tamanhos dos produtos, mas quando clico em uma cor ele não troca a imagem do produto, sabe como corrigir isso ? Uso a versão 1.7.0.2 do magento.
    Abraço.

    ResponderExcluir
    Respostas
    1. Olá Alex!
      Infelizmente eu também não consegui trocar a imagem do produto ao clicar nas cores...
      Já tentei de diversas formas, já entrei em contato com a desenvolvedora da extensão e eles disseram que a extensão não realiza essa função.
      O estranho é que eu já vi que alguns desenvolvedores conseguiram fazer isso, só que os procedimentos são idênticos aos meus e mesmo assim não funcionou...

      Excluir
  4. https://github.com/bencorlett/magento-attribute-option-image/tree/fa2d06b0b3babc794c28348879253d100ab0a742


    Seria essa extensão?

    ResponderExcluir
  5. Nossa agora que eu fui ver esse tutorial eu tinha feito tudo com css :)

    O resultado fica bem parecido poren nao sao imagam no html
    Vlw muito bom

    ResponderExcluir
    Respostas
    1. Olá Jonatan!
      Vi seu código no fórum, ficou muito legal, parabéns!
      =D

      Excluir
  6. Ola amigo, boa noite.
    Eu fiz o tutorial mas nao consigo deixar alinhado lado a lado, na parte final. Creio que algum problema na parte do css, veja como fica.[

    http://imageshack.us/a/img560/5443/vfg7.png

    Tem alguma ideia do que posso fazer para alinhar?
    Thiago

    ResponderExcluir
  7. http://www.magentocommerce.com/boards/viewthread/602110/

    Olá,alguém poderia me ajudar sou novo no Magento,e queria uma ajuda quanto a logística do site,trabalho na empresa www.mezzbrindes.com.br trabalhamos com lembrancinhas e brindes personalizados,e nós queremos fazer um loja virtual mas a nossa loja seria bem diferentes das 99% das que existem no Magento,queremos fazer da seguinte forma
    :
    Cliente faz o pedido no site > nós enviamos um email de que recebemos o pedido (até ae normal) > nós fazemos a criação da arte da lembrancinha ou do produto personalizado > postamos uma nova aba no menu do cliente no cadastro dele tipo "Minha Amostra" nesse campo ele mostra (como na imagem em anexo) uma imagem da arte do produto personalizado e se aprovando ela clica em sim e vai pro checkout(formas de pagamento e envio), e se não aprovar é enviado um email automatico para nós com as observações que ela coloca num form para fazermos a alteração da arte.
    Resumindo ela só paga depois da aprovação da arte!
    Agradeço desde já!

    ResponderExcluir
  8. Olá... Já arrumei várias "coisas" no meu site com a ajuda de seus tutoriais...
    Estou tentando colocar imagens para tamanhos: 34, 36, 38 até o 52, mas não consigo encontrar..
    Vc tem como me ajudar?!?
    Muito obrigada,
    Renata

    ResponderExcluir
    Respostas
    1. Olá Renata!
      Sua dúvida ficou meio vaga...

      Você quer colocar as imagens no filtro de navegação e não está conseguindo?
      Você seguiu o tutorial? Baixou a extensão?

      Excluir
  9. Olá, estou configurando uma loja de presentes e tem a opção "monte sua cesta" gostaria de colocar imagem nos produtos da opção personalizada como já vi em alguns sites, saberia me dizer onde encontro algo sobre isso??

    Obrigada

    Damaris

    ResponderExcluir
    Respostas
    1. Olá Damaris!
      Não entendi muito bem o que você quer... Seria mais ou menos isso?
      http://referenciamagento.blogspot.com.br/2013/10/gala-color-swatches-free.html
      Deve ter alguma extensão no magento connect que realize o que você procura, veja:
      http://www.magentocommerce.com/magento-connect/

      Excluir
  10. Show de bola, codigo simples e eficiente!

    ResponderExcluir