Criar Layout no Magento

13/02/2017

Criar Layout no Magento é rápido e simples!

Uma das grandes vantagens que temos em trabalhar com Magento é a sua capacidade de extensão do seu próprio sistema. Assim, muitos recursos e funções que não encontramos no sistema, podemos adicionar e assim tornar a nossa loja virtual em Magento cada vez melhor!

Nesse tutorial veremos como trabalhar com Layout em Magento.

Não, não estou me referindo a trabalhar com Temas, a criar um novo pacote de temas… Não é isso… Mas aprenderemos como criar um novo Layout dentro daqueles já disponibilizados no sistema: Uma Coluna, Duas Colunas, Três Colunas e etc.

Acesse o Admin do seu Magento e vá em Catálogo –> Gerenciar Categorias. Clique sobre uma categoria e vá na aba Design Personalizado:

 

Essa área corresponde exatamente ao template –> page do seu Tema.

Conforme vemos na imagem acima, o Magento já nos fornece alguns layouts prontos. E é exatamente nesse ponto que vamos trabalhar. Vamos criar layout no Magento. Assim, poderemos personalizá-lo a vontade!

 

Bom, vamos ao que interessa!

1.) Criar o arquivo .phtml customizado.

No meu caso, criei o arquivo 3columns_customizado.phtml no diretório template –> page do meu tema.

Abrindo um desses arquivos de tema, você notará, logo no início do arquivo, a seguinte informação:

Isso quer dizer que o arquivo responsável pelos Layouts do Magento está em:

Porém, o importante para nós será o arquivo config.xml em:

Abrindo esse arquivo, temos algumas informações, como:

 

Esse arquivo é o responsável pelo controle dos layouts que são disponibilizados no Magento.

Precisamos alterar esse arquivo para criarmos o nosso novo layout. No entanto, não é recomendável que faça qualquer alteração nos arquivos do core do Magento. Nesse caso, prosseguimos na criação de um pequeno módulo para sobreescrever esse arquivo.

 

2.) Criando a estrutura do nosso módulo

Copie o arquivo config.xml, crie os seguintes diretórios abaixo e cole esse arquivo nele:

De modo que a nossa estrutura ficará assim:

 

Abra o config.xml e adicionar o script:

 

O seu config.xml deverá ficar como se segue abaixo:

Criamos a <three_colunms_customizado>, com <label> 3 columns customizado, e informamos que utilizaremos o arquivo 3columns_customizado na <template>

 

Obs.: Não esqueça de fechar a tag: <three_colunms_customizado></three_colunms_customizado>

 

3.) Criando o XML do nosso módulo:

Crie o arquivo Mage_Local.xml em:

E adicione:

 

Explicado:

<config> informa que abrimos um tag de configuração;

<modules> o Magento precisa saber que são as configurações de um módulo;

<Mage_Page> nome do módulo criado;

<active> dizemos que o módulo está ativo pelo parâmetro true

<codePool> informamos ao Magento onde está os arquivos do nosso módulo

<depends> falamos para o Magento que esse módulo dependerá do core em <Mage_Core>

 

Após isso, limpe o cache do Magento e o seu layout criado deve exibir agora:

 

Espero ter ajudado!

Dúvidas? Deixe seu comentário!

 

Um abraço!

 

 

2 Comentários

  • Marcelo 13/02/2017em19:24

    Show de Bola Abraão, ficou legal essa explicação, show!!

    • Abraão Marques 17/02/2017em10:51

      Obrigado, Marcelo 😀

      Se tiver dicas para tutoriais, será muito bem vindo!

      Um abraço!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *