Olá, Dando continuidade agora vamos criar a estrutura básica do nosso tema, que é muito semelhante a estrutura que fizemos no tutorial de como criar um tema Magento com mínimo arquivos, se não viu vale a pena dar uma lida.

Atenção: a partir da versão 1.9.1.0 foi acrescentado um novo xml na pasta etc do tema, ele permite que você escolha o fallback antes o tema base/default, mais detalhes no final desse artigo.

Quer criar temas para Magento?

Sequência dos artigos

Desativar o cache

Antes de tudo, não se esqueça de desativar o cache para que não tenhamos sustos com o layout.

Vá em sistema > Gerenciamento de Cache

Você pode selecionar todas as opções, mas por enquanto podemos marcar somente as quatro primeiras: Configuração, Layouts, Blocks HTML output e Traduções.

Em Ações selecione Desativar e clique no botão Enviar.
Desabilitando o cache do magento

Depois de recarregar a tela ela ficará assim
Cache do magento desabilitado

Com isso podemos dar sequência às alterações

Criando as pastas principais

Como sabe o Magento divide o tema em duas pastas, uma na pasta app/design/frontend e outra em skin/frontend. Para criarmos um tema responsivo aproveitando o tema nativo desta versão vamos criar um tema personalizado do pacote de tema rwd. Assim aproveitaremos este excelente tema responsivo que já vem nativo com o Magento

Primeiro crie as pastas do tema:

Vamos primeiro criar as duas pastas principais do nosso tema que vai ficar dentro de app/design/frontend/rwd e skin/frontend/rwd, vou chamar este tema de red, então fica assim:

app/design/frontend/rwd/red

skin/frontend/rwd/red

agora dentro de cada pasta vamos copiar a estrutura padrão de qualquer tema, entenda que talvez não utilizemos todas estas pastas e poderemos apagá-las no futuro. Então na pasta app/design/frontend/red colocaremos as pastas layout, template e locale. Na pasta skin/frontend/red irão as pastas images js e css então a estrutura ficará assim:

app/design/frontend/rwd/red
app/design/frontend/rwd/red/layout
app/design/frontend/rwd/red/locale
app/design/frontend/rwd/red/template

skin/frontend/rwd/red
skin/frontend/rwd/red/css
skin/frontend/rwd/red/images
skin/frontend/rwd/red/js

Com isso temos o esqueleto de um tema, está tudo vazio, mas já podemos alterar o tema na loja Magento.

Vá em Sistema > Configuração > Design,

Abra a guia temas e

No campo Predefinido escreva o nome do seu tema, no meu caso red.
Definindo meu tema magento

Pronto com isso já definimos nosso tema como o tema padrão do Magento, mas como saber se funcionou se não tem nenhum arquivo? Simples, mova um arquivo para dentro dele

Vá na pasta skin/fronend/rwd/default/css, copie o arquivo styles.css e cole na pasta skin/frontend/rwd/red/css.

Agora vá a sua frente de loja, atualize a tela (caso já estivesse aberta) e veja o código fonte. Exatamente na linha 56 veremos o caminho do arquivo do nosso tema.

veja o magento usando meu tema personalizado


Novo método de fallback

Esta parte é uma atualização do artigo original.

a partir da versão 1.9.1.0 você pode escolher para onde irá o fallback, na prática isso permite que seu tema não fique obrigatoriamente dentro do pacote padrão do Magento permitindo assim uma melhor separação do que é seu e o que é do Magento.

Na prática isso muda a disposição das suas pastas que ao invés de ficar dentro da pasta rwd, vai ficar assim:

Pastas em app:

  • app/design/frontend/red/default
  • app/design/frontend/red/default/etc
  • app/design/frontend/red/default/layout
  • app/design/frontend/red/default/locale
  • app/design/frontend/red/default/template

Pastas em skin:

  • skin/frontend/red/default
  • skin/frontend/red/default/css
  • skin/frontend/red/default/images
  • skin/frontend/red/default/js

No admin onde se declara o tema, o campo “predefinido” pode ficar em branco e no campo “Nome do pacote atual” você pode substituir o rwd pelo seu pacote, nessa caso o red.

Em sequência pra que possamos escolher qual será o tema que faremos o fallback copie o arquivo em rwd/default/etc/theme.xml para a pasta correspondente no seu tema, tirando o comentário esse arquivo é bem simples:

<?xml version="1.0"?>
<theme>
    <parent /> <!-- aqui especificamos o fallback, nesse caso nada foi setado -->
</theme>

Se você quer que o fallback seja para o tema rwd/default é assim que vai ficar o arquivo:

<?xml version="1.0"?>
<theme>
    <parent>rwd/default</parent> <!-- fallback para o pacote rwd no tema default -->
</theme>

Se usar o default/default você terá a cara do antigo tema padrão do Magento. etnão era isso que queria acrescentar neste artigo.

Bom por hoje é só isso, mas se você já tem uma certa experiência com temas Magento isto é o suficiente para você começar, mas se você quer mais não fique preocupado, pois no próximo artigo vou mostrar como alterar este arquivo style.css e fazer nossas primeiras alterações dentro do nosso tema

Até lá comente aqui o que você achou até agora deste artigo e quero aproveitar também pra pedir aquela força para curtir minha página e compartilhar nas redes dociais. Para mim divulgar este material e ajudar o máximo de pessoas é meu maior prazer

Um abraço.