sexta-feira, 25 de outubro de 2013

Gala Color Swatches Free


Olá Pessoal!
Nessa postagem irei ensinar, de maneira simples, como usar a extensão Gala Color Swatches Free para substituir o menu dropdown dos produtos configuráveis por miniaturas de cor e tamanho, por exemplo.

1º Passo - Instale a extensão pelo Magento Connect:

http://www.magentocommerce.com/magento-connect/gala-color-swatches-free-9787.html


2º Passo - Antes de configurar a extensão, é necessário verificar o nome da pasta criada no diretório media da sua instalação, pois existe um bug em relação a ela. No meu caso, a pasta estava nomeada como colors_watches e eu tive que renomear para swatches, já que a extensão buscava as miniaturas nesse caminho. Para saber qual o caminho exato usado pela extensão para buscar as miniaturas, abra o arquivo settings.phtml (app -> design -> frontend -> base -> default -> template -> em_colorswatches) e procure o seguinte:

src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>

Logo após ele estará o nome da pasta.

3º Passo - Salve as miniaturas de cor e tamanho no diretório anteriormente renomeado (swatches). Para facilitar, nomeie essas imagens com o termo correspondente, como no exemplo abaixo:


4º Passo - Verifique qual a legenda e as opções dos atributos em que as miniaturas serão usadas. Para isso, vá em Catálogo -> Atributos -> Gerenciar Atributos e clique no atributo em questão. Na aba Gerenciar Descrição, veja como está preenchida a descrição do atributo e as suas opções. Na imagem abaixo, por exemplo, a legenda seria Cor e as opções seriam Amarelo, Azul, Branco, Laranja, Preto e Rosa.





Obs: Se, ao criar o produto configurável, o Nome do Atributo for alterado na guia Produtos Associados, será necessário usar esse termo para setar as miniaturas no próximo passo, ao invés da legenda do atributo.



5º Passo e último - Supondo que você já tenha produtos configuráveis cadastrados corretamente, vá em Sistema -> Configuração -> GERAL/Gala ColorSwatches Settings e preencha o campo Custom Option Swatches seguindo o formato:

[Legenda do Atributo] : [Opção do Atributo] = [Nome da Imagem]

Inserindo uma linha para cada miniatura. Por exemplo:

Cor : Amarelo = amarelo.png
Cor : Azul = azul.png
Cor : Branco = branco.png
Cor : Laranja = laranja.png
Cor : Preto = preto.png
Cor : Rosa = rosa.png
Tamanho : PP = tamanho_pp.png
Tamanho : P = tamanho_p.png
Tamanho : M = tamanho_m.png
Tamanho : G = tamanho_g.png
Tamanho : GG = tamanho_gg.png


Seguindo todos os passos corretamente, o resultado será o seguinte:



Então é isso! Qualquer dúvida, utilizem o Fórum:
http://magentodicas.com.br/

13 comentários:

  1. Olá! Parabéns pelo post.

    Ensina a como usar o GALA nos filtros da sidebar, de categoria navegável.

    Seria de grande utilidade para mim.

    Obrigado, até mais.

    ResponderExcluir
    Respostas
    1. Olá Diogo!
      Você já viu esse tutorial?
      http://referenciamagento.blogspot.com.br/2013/01/tutorial-acrescentando-imagens-no.html
      Ele faz o que você quer, mas é necessário baixar outra extensão.

      No Magento Connect também existe essa opção bem interessante:
      http://www.magentocommerce.com/magento-connect/tonbo-colorpicker-6643.html
      Não testei ainda, mas deve funcionar!

      Excluir
    2. Como eu coloco varias fotos com cores diferentes do mesmo produto?

      Excluir
    3. Como eu coloco varias fotos do mesmo produto com cores diferentes sendo q só tem as tres opções no cadastro do produto?

      Excluir
    4. Não entendi, poderia explicar melhor ou mostrar um exemplo?

      Excluir
  2. Certo. E como faço para que a imagem fique diferente das demais quando não houver mais estoque para um determinado tamanho/co ?

    ResponderExcluir
  3. Bom dia..
    Alguém sabe se esse plugin tem como deixar uma cor já pré-selecionada.
    Isso resolveria uma BAITA problema que to enfrentando.

    Problema:
    Cadastrei os produtos como configuráveis, cor/tamanho.
    Só que estou mudando o layout e não preciso mais da COR. Pois no produto, terão os links para as outras cores.
    Tem outra maneira de resolver isso? desabilitar a cor sem ter que recadastrar?

    ResponderExcluir