28/11/2015
Swatches ou Amostras: miniaturas do produto para atributos
Amostras tornam a apresentação dos produtos configuráveis mais atraentes, podendo ser usados em páginas de produtos, lista de categoria e navegação em camadas.
Amostra na tela do produto
Você pode determinar quais atributos serão configurados como amostra e determinar as dimensões usadas para páginas de produto, listas e navegação em camada.
Determine a configuração do swatch
Conforme adiciona produtos em seu catálogo, você poderá atualizar os atributos que correspondem a cada demonstração.
Adicionando nova cor
O tamanho definido para a amostra e o tamanho da imagem enviada determinam o nível de detalhe que pode ser visto em cada demonstração.
Qualidade do swatch
A qualquer momento podemos trocar uma amostra existente e o mesmo poderá ser facilmente recarregado na pasta de cache do Magento.
Recarregar amostras
Swatches ou amostras são recursos poderosos vistos apenas em grandes temas até então, mas agora é nativo no Magento e está disponível dentro do tema RWD, caso você já tenha uma loja ou queira comprar um tema com este recurso verifique no tema em questão se tem suporte para este recurso.
Swatches no ambiente de trabalho
Amostras na página do produto podem ser usadas para mostrar combinações de atributos, quando uma amostra é selecionada ou com o mouse sobre a mesma, a página automaticamente elimina as opções inexistentes colocando um risco sobre ela.
Seleção mais natural
Amostras sem imagem
Caso a amostra não tenha uma imagem atribuída, será mostrado o texto como um botão veja a imagem como f**a esse tipo de situação.
amostras sem imagem
Amostras na navegação em camadas
Amostras podem ser usadas na navegação em camadas, serão mostradas imagens e textos como botões correspondentes aos atributos disponíveis, na lista de produtos ainda pode-se utilizar uma amostra para trocar a imagem do produto na lista, vide imagem.
Navegação em camadas
Configurando Swatches
A partir deste ponto eu assumo que você já saiba como funcionam os produtos configuráveis e atributos, essencial para o uso das amostras, mesmo que produtos simples se beneficiem apenas pela navegação em camadas, são os produtos configuráveis que vemos todo potencial das amostras.
Configuração
Configurando
No painel administrativo, em menu System > Configuration ou Sistema > Configuração
No painel à esquerda em Catálogo ou Catalog, clique em Configurable Swatches, (até o momento que escrevi este artigo ainda não havia uma tradução disponível).
Clique em General Settings para expandir as opções a seguir:
Enabled coloque Yes.
Em Products Attributes to Show as Swatches in Product Detail selecione os atributos que devem comportar como amostras, segure a tecla Cntrl para selecionar vários itens.
Em Product Attribute to Use for Swatches in Product Listing escolha um atributo que vai aparecer junto ao produto na lista, devido ao limite de espaço só é possível escolher um atributo.
Defina a largura (widht) e altura (height) em pixels da amostra em cada página nos seguintes campos:
Expandindo Swatch Dimensions on Product Detail Page define o tamanho a amostra na página do produto.
Em Swatch Dimensions in Product Listing definirá as dimensões da amostra que f**a junto do produto na lista de produtos.
Swatch Dimensions in Layered Navigation define as dimensões da amostra que se localiza na navegação em camadas.
Quando tiver acabado clique em Salvar Configurações ou Save Config
Provavelmente será necessário atualizar o cache.
Na tela de Gerenciar Cache foi acrescentado o botão flush Swatch Images Cache que recarrega todas as imagens das amostras para a loja, use sempre este botão quando trocar estas imagens.
Testando as amostras na sua loja
Agora verifique se deu tudo certo com as amostras visualizando as páginas do catálogo e de produto para ver se os atributos estão funcionando corretamente como amostras, caso tenha ocorrido algum erro vale a pena verif**ar as configurações do atributo em específico.
Verifique se a seleção Utilizar Para Criar Produtos Configuráveis está marcado como sim.
Verifique se Visível nas Páginas de Produto no Frontend está marcado como sim.
Adicionado novos atributos
Conforme adiciona novos produtos haverá a necessidade de adicionar novos valores para cada atributo, por exemplo, se você vende camisas, sempre precisará incluir novas cores, podemos incluir novos valores a atributos que representam amostras.
Adicionando mais cores
No menu administrativo vá em Catálogo > Atributos Gerenciar Atributos (Catalog > Attributes > Manage Attributes).
Na lista selecione o atributo color.
Clique no menu ao lado Gerenciar Descrição/Opções (Manage Label / Options)
Na lista sobre Gerenciar Opções (Manage Options) clique em Adicionar Opção (Add Option).
Em Admin use os nomes das cores que deseja usar no admin, na sequência coloque os nomes das cores que deseja que apareça no frontend de acordo como idioma, se este for o caso (se não especif**ar um nome para cada visualização de loja será usado o mesmo do admin).
Determine a ordem que deseja que seja apresentado numerando-a na coluna posição (position).
Repita este processo quantas vezes forem necessárias.
Clique em Salvar Atributo (Save Attribute) quando tiver terminado.
Quando aparecer a mensagem pedindo atualização de cache clique em Gerenciar Cache (Cache Management) e atualize os caches que estiverem invalidados.
Preparando imagens das amostras
A imagem da amostra pode representar exatamente a cor do produto, assim como o padrão ou textura, há dois métodos que você pode utilizar para criar suas imagens, podendo usar um deles ou uma combinação dos dois
O método padrão é criar uma cor lisa genérica para representar a amostra e salvá-la na pasta media da loja
Outro método é criar amostras personalizadas para cada produto que representa o material, padrão ou textura do produto e carregá-la junto às imagens do produto.
O tamanho da amostra é atribuído nas configurações e o tamanho da imagem salva determinará o nível de detalhe que pode ser visto na amostra. Tenha atenção para que o tamanho da imagem seja o suficiente para transmitir a essência do design, mostre o tecido, textura, padrão ou grãos conforme a necessidade. Tenha a imagem do produto com a maior qualidade possível, corte e crie a imagem da amostra com o maior tamanho possível, algumas resoluções podem tornar difícil perceber o detalhe da amostra.
selecionando-swatch
Para capturar uma amostra você pode abrir a imagem principal num editor de imagem e cortar uma parte da imagem, você pode usar qualquer ferramenta do tipo conta gotas para capturar exatamente a cor que precisa e preencher a amostra com ela, se tiver acesso direto ao produto pode fotografar diretamente a área que quer como amostra, as imagens abaixo foram tiradas dos produtos originais.
catalog-product-configurable-swatch-samples
Subindo imagens de amostras para sua loja
A pasta swatches dentro da pasta de media da loja é o lugar mais comum para manter as imagens de amostras, as imagens de amostra na pasta swatches são adotadas como o padrão e serão usadas para qualquer produto. O nome de cada imagem enviada deve corresponder ao valor do atributo, neste exemplo cada nome de arquivo representa uma cor.
pasta-das-amostras
As amostras também podem ser associadas com um produto específico, neste caso a imagem pode ser colocada diretamente na área de imagens do produto. Amostras carregadas para um produto não são mostradas como miniaturas na galeria de imagens do produto ou na navegação em camadas, este método é muito recomendado para nomes com acentuação ou com caracteres especiais como árabe, chinês ou japonês.
O sistema utiliza do sistema de fallback para localizar a amostra, primeiro verif**a se o produto tem uma amostra específ**a, caso não tenha ele procura a imagem associada na pasta swatches.
Como trabalhamos com o idioma em português isso gera certa dificuldade quanto ao nome do arquivo já que não podemos inserir acentos, minha recomendação é utilizar o nome do admin do produto sem acento ou caracteres especiais, assim um a imagem de amostra padrão não f**ará perdia, por exemplo, na loja você quer usar a cor púrpura, então no rótulo admin do valor do atributo use purpura e na loja especifique o nome correto, assim o arquivo poderá se chamar purpura.jpg, purpura.png, ou purpura.gif.
Subindo as imagens das amostras para pasta swatches da sua loja
Antes de subir as imagens, confira os nomes dos arquivos que devem corresponder exatamente ao rótulo do atributo, amarelo.png vai corresponder a Amarelo mas não a Amarela.
Todos os nomes de arquivos enviados são convertidos para caixa baixa, além disso, qualquer caractere que não se enquadram no padrão americano (a-z 0-9) são convertidos em traço, ou seja “Azul Real” vira “azul-real”.
Se você tem acesso ao servidor ou ao FTP, as imagens podem ser inseridas na seguinte pasta:
[diretório onde o Magento foi instalado]/media/wysiwyg/swatches
Caso não tenha acesso siga estes passos
No menu do admin vá em CMS > Páginas (CMS > Pages).
Clique em qualquer item da lista.
Clique na aba Conteúdo (Content) na lateral esquerda.
No editor clique em inserir imagem e na árvore de diretórios clique na pasta swatches ou clique no botão Criar pasta… caso a pasta não exista.
Clique no botão Broswe Files e localize as imagens que deseja subir, você pode subir as imagens individualmente ou várias ao mesmo tempo.
Clique no botão upload Files para enviar as imagens, você terá algo parecido com esta imagem.
subindo-amostras
Quando tiver terminado feche essa janela com o botão no canto superior a direta e feche a edição da página sem salvar.
Caso o Magento peça para atualizar o cache faça-o imediatamente.
Vá ao frontend da loja e confira o resultado.
Caso algum item do produto configurável tenha sumido da navegação em camadas volte ao gerenciador de cache e clique no botão flush Magento Cache.
Subindo Amostras como imagens do produto
Use este método para associar uma imagem a uma amostra de um produto específico, amostras carregadas dessa forma vão para pasta media da loja
No menu administrativo vá em Catálogo > Gerenciar Produtos (Catalog > Manage Products).
Abra o produto configurável que deseja configurar
Se a imagem é apenas para uma visão de loja específ**a defina a visão em Selecionar ambiente (Choose Store View).
No painel a esquerda clique em imagens.
Clique no botão Browse Files… e selecione as imagens a serem carregadas.
Clique no botão Upload Files para carregar as imagens.
No campo Descrição informe o valor que a amostra representa com sufixo “-swatch”, por exemplo, para o atributo “amarelo” use “amarelo-swatch” com isso o Magento usará esta imagem como uma amostra.
amostra-com-produto
Quando terminado clique em salvar.
Se necessário, atualize o cache.
Configurando imagens dinâmicas
O Magento pode mostrar uma imagem dinâmica quando determinada amostra é selecionada. Este recurso é mostrado na página de produto e na listagem dos produtos.
catalog-configurable-swatches-plaid
Com esta técnica, cada produto associado pode ter uma imagem que representa essa variação, então se um produto possui várias cores essa imagem mudará dinamicamente quando a amostra de cor for selecionada, a imagem dinâmica também não f**a como miniatura na galeria de fotos do produto. Veja como trabalhar com este recurso
Método 1: Subindo imagens para o produto configurável
Quando você visualiza um produto na loja e clica na amostra, a imagem correspondente aparecerá como a imagem principal do produto, Você pode clicar em qualquer amostra para alterar a imagem. Também é interessante observar neste exemplo que a amostra Royal Blue usa a imagem do produto como miniatura, isso acontece porque não há uma amostra configurada para este valor, então o fallback usa a imagem com a descrição Royal Blue.
imagem-dinamica
Cada produto simples teve uma imagem que representa essa variação porque essa imagem não é uma amostra elas não precisam do sufixo “-swatch”. As variações usadas nesse exemplo são rotuladas como “Royal Blue,” “Pink,” e “Red.”simple-blue_thumb
O atributo de cada variação é atribuído a sua cor correspondentecatalog-configurable-swatch-attribute-blue_thumb_0_0
Adicionamos ao produto principal as imagens de cada variação e damos a elas os nomes correspondentes a cada cor no campo descrição (Label).catalog-product-swatch-dynamic-swap-configurable_thumb_0_0
Método 2: Subindo amostras para o produto configurável
Este método trás amostras personalizadas que serão carregadas no produto configurável. Cada produto associado tem uma imagem que representa tal variação. Quando clicamos em cada amostra, a imagem do produto correspondente é mostrada.
imagem-do-swatch-dinamico
Uma imagem é salva em cada produto associada que mostra a variação do produtoimagem-principal-do-produto
O atributo cor da variação do produto é atribuída para a cor referenterotulo-do-produto
Em adição ás imagens produto principal um conjunto completo de imagens de amostra é carregada para o produto configurável, neste exemplo as amostras são: Royal Blue-swatch, Charcoal-swatch, Red-swatch e Khaki-swatch.imagens-do-produto
Como nomear as amostras
O idioma padrão do Magento é o inglês e para nós que trabalhamos com português o Magento recomenda que usemos amostras para cada produto configurável específico, já que as imagens das amostras trabalham como classes CSS e podem conter apenas caracteres a-z A-Z e 0-9 caracteres não alfanuméricos como árabe, chinês, alemão e japonês não são suportados.
O Magento recomenda que faça upload das amostras pelo admin sempre que possível. Caso não seja possível é necessário observar a tradução do nome já que por padrão os nomes dos arquivos trabalham com a codif**ação ASCII e geralmente em nossos computadores utilizamos uma que permita uso de acentos, como o UTF-8, por exemplo:
Königsblau f**a k-onigsblau.png
Púrpura f**a p-rpura
Veja abaixo a tabela de conversão dos caracteres mais comuns
Caracter Transição Substituição
Frances
À `A -a
 ^A -a
Æ AE ae
Ä “A -a
Ç C c
É ‘E -e
È `E -e
Ê ^E -e
Ë “E -e
Î ^I -i
Ï “I -i
Ô ^O -o
ΠOE oe
Ö “O -o
Ù `U -u
Û ^U -u
Ü “U -u
Ÿ “Y -y
Alemão
Ä “A -a
Ö “O -o
Ü “U -u
ß ss ss
Espanhol
Ñ ~N -n
Á ‘A -a
É ‘E -e
Í ‘I -i
Ó ‘O -o
Ú ‘U -u
Mas como regra geral, você sempre pode utilizar o nome do admin como o nome do arquivo dessa forma não terá erro, por exemplo use purpura ao invés de púrpura no rótulo do admin.
Limpando o cache das amostras
As imagens das amostras são redimensionadas e salvas como cache antes de serem usadas, estas imagens de cache são salvas no seguinte diretório
[diretório da sua instalação Magento]/media/catalog/swatches/
Por isso quando as imagens de amostras são alteradas é preciso atualizar esse cache para que seja mostrada a imagem correta na loja.
Para atualizar o cache das amostras é muito simples, basta fazer o seguinte:
No menu administrativo vá em Sistema > Gerenciar Cache (System > Cache Management).
No gerenciamento de cache adicional clique no botão Flush Swatch Images Cache.
atualizar-swatches-cache
Pronto o cache foi atualizado
Neste artigo eu disse tudo que encontrei sobre os swatches ou amostras como chamei neste artigo, até o momento que finalizei este artigo não havia tradução correta para esta nova área do admin por isso coloquei vários termos em inglês e usei em português o que considerei mais adequado, espero que tenha servido para tirar suas dúvidas.
