Trabalhando com Temas

Depois que as pessoas instalam o Magento, usam a tradução de idiomas para pt-BR e iniciam as configurações de categorias e produtos, logo vem a necessidade de personalizar o template da loja.

Então vamos ver os primeiros passos de como, quando e onde personalizar o design do sistema, isso na versão 1.4.x que apesar de ter muita coisa similar a 1.3.x possui algumas particularidades que funcionarão apenas na nova versão.

Se você já possui um tema e quer utilizá-lo vá em Sistema -> Template e clique em Criar Tema. Nesse momento você pode ver um cadastro bem simples como este:

controle de temas

Informe onde o tema será aplicado, se você tem apenas uma loja com uma única visão, então terá apenas uma opção. Depois selecione o tema que você possui e quer usar. E por último você pode informar a data de início e fim para exibir o tema. Como por exemplo temas de natal e datas comemorativas, pode deixar tudo pré-programado.

Sendo este o melhor local para você gerenciar seus temas. Uma outra opção seria indicar o tema em Sistema -> Configuração -> Geral [Template] onde você possui duas guias de configuração para “template” e “tema“.

template do sistema

Aqui você poderia configurar seu template/tema que será usado como padrão do sistema, deixando a opção anterior apenas para temas especiais. Ou como eu falei anteriomente, faça tudo pelo Sistema -> Template e centralize suas configurações.

Você pode pegar o tema de duas formas, ou baixando o pacote compactado, ou pelo Magento Connect. Cada tema possui suas particularidades, então depois de pegar um tema gratuito na internet, comprar um, ou pegar pelo connect, procure por um arquivo do tipo “leiame.txt” com informações referentes a configuração do tema.

Os arquivos responsáveis pelos blocos e layouts ficam em app -> design -> frontend -> aqui! E os arquivos responsáveis pelas imagens, formatações e funções de tela ficam em skin -> frontend -> aqui!

Como dito anteriormente, na pasta skin é onde temos os arquivos de formatação visual, cores, fontes, imagens. Umas pasta “images” armazena as imagens, uma pasta “css” armazena as folhas de estilos (css) e uma pasta “javascript” armazena as funções de controle da tela como validação de campos, exibição de menus, etc.

Faça um teste. Abra o arquivo “styles.css” do seu tema selecionado no Magento e altere os atributos da página como largura, cores, fontes, tamanhos, imagens de fundo, bordas, etc.

Nos arquivos de javascript você incluir validações personalizadas como validação de CPF/CNPJ por exemplo, ou alguma função para exibir imagens em slideshow, ou menus animados, eventos ajax, etc.

Na pasta de imagens você pode substituir qualquer imagem do site, como a logo, imagens de fundo, ícones, banners, etc.

Já na pasta de design é onde você gerencia o layout e as funcionalidades que irão para a tela. São arquivos xml’s responsáveis por montar os blocos e as páginas phtml que montam o conteúdo final para o usuário.

Abra o arquivo “catalog.xml” e veja as referências de blocos indicando “left“, “right“, “top.menu“, “footer“, etc. Cada bloco desses carrega determinados blocos de páginas phtml ou apenas imagens, como você pode ver em exemplos aqui mesmo no blog que criam menus a esquerda ou a direita do site.

Dentro da pasta template tudo está organizado em pastas com nomes bem sugestivos como “catalog“, “page“, “reports“, etc. Cada uma dessas pastas possui arquivos phtml que montam a página html para o usuário.

Abra o arquivo “popular.phtml” que fica dentro da pasta “tag” e faça as alterações que desejar para mudar a forma como o sistema exibe a nuvem de tags “tags populares” por exemplo.

Em resumo é isso, pois apenas esse assunto renderia um livro. Mas já dá uma idéia de como as coisas funcionam na hora de trabalhar com temas no Magento. Continuem estudando.

Sucesso!