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:

/**
 * Template for Mage_Page_Block_Html
 */

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

app/code/core/Mage/Page/Block/Html

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

app/code/core/Mage/Page/Block/etc

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

<page>
<layouts>
<empty module=”page” translate=”label”>
<label>Empty</label>
<template>page/empty.phtml</template>
<layout_handle>page_empty</layout_handle>
</empty>
<one_column module=”page” translate=”label”>
<label>1 column</label>
<template>page/1column.phtml</template>
<layout_handle>page_one_column</layout_handle>
<is_default>1</is_default>
</one_column>
<two_columns_left module=”page” translate=”label”>
<label>2 columns with left bar</label>
<template>page/2columns-left.phtml</template>
<layout_handle>page_two_columns_left</layout_handle>
</two_columns_left>
<two_columns_right module=”page” translate=”label”>
<label>2 columns with right bar</label>
<template>page/2columns-right.phtml</template>
<layout_handle>page_two_columns_right</layout_handle>
</two_columns_right>
<three_columns module=”page” translate=”label”>
<label>3 columns</label>
<template>page/3columns.phtml</template>
<layout_handle>page_three_columns</layout_handle>
</three_columns>
</layouts>
</page>

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:

local/Mage/Page/etc

De modo que a nossa estrutura ficará assim:

Abra o config.xml e adicionar o script:

http://www.4magento.com.br/criar-layout-no-magento/