Como criar tema magento com o mínimo de arquivos

Veja como é simples criar um tema Magento com o mínimo de arquivos, que segue as suas boas práticas, indispensável para quem pretende se aprofundar nesta ferramenta.

Para quem não conhece esta ferramenta se assusta com o número de arquivos que o tema base do Magento possui, o que me fez pesquisar muito para saber como trabalhar com ele, apenas olhando as pastas e arquivos se torna muito confuso esse estudo.
Veja como é simples criar um tema Magento com o mínimo de arquivos, que segue as suas boas práticas, indispensável para quem pretende se aprofundar nesta ferramenta.

Para quem não conhece esta ferramenta se assusta com o número de arquivos que o tema base do Magento possui, o que me fez pesquisar muito para saber como trabalhar com ele, apenas olhando as pastas e arquivos se torna muito confuso esse estudo.

Neste tutorial eu falo apenas o básico para a criação de um tema Magento, para um tema simples. Esta é a parte mais difícil, o início, mas boa notícia é que depois disso tudo fica mais fácil, porque você já entenderá o processo.

Este método visa concentrar todas as personalizações de xml em um único arquivo, o local.xml o que diminui muito o número de arquivos a se trabalhar dentro de um tema, ele pode conter todas as alterações do tema (clique no link para saber mais). Vale lembrar também que para visualizar toas as alterações do tema é preciso desativar o cache do Magento.

Criando um novo tema

Como criar um novo projeto de tema

Atenção NUNCA DUPLIQUE UM TEMA JÁ EXISTENTE, a princípio isso pode até tornar um pouco mais fácil o processo de criação, mas também incorre um grande risco de torna-lo totalmente incompatível com atualizações. Muitos designers (incluindo algumas das principais empresas de design Magento) fez isso por um longo tempo, e deixou o mundo Magento meio perdido 1.4 foi lançado. Em vez disso, use esta abordagem de “menor impacto” que ensino.

O primeiro passo será a criação de pastas para o novo tema. Vamos chama-lo aqui de new_theme mas você pode usar o nome que quiser. Crie as seguintes pastas:

Novas pastas:

Para efeitos didáticos criaremos dois arquivos, local.css para nossas alterações de estilo, mas você pode simplesmente copiar o style.css para dentro do seu tema e o local.xml.

Novo arquivo:

Dentro de local.css coloque o conteúdo css exclusivo do seu tema, ou copie o style.css para o local correspondente e faça as alterações necessárias, lembrando que aqui estou usando o local.css para que você conheça este funcionamento.

Dentro de local.xml iremos personalizar nossa loja retirando, inserindo ou movendo blocos de informações, veremos um pouco do atributo action para o Magento chamar o local.css.

Conteúdo do local.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
 <default>

  <!-- remove chamadas de blocos desnecessarias -->
  <remove name="right.poll"/>
  <remove name="right.permanent.callout"/>
  <remove name="left.permanent.callout"/>
  <remove name="paypal.partner.right.logo"/>

  <!-- adciona local stylesheet -->
  <reference name="head">
   <action method="addCss"><stylesheet>css/local.css</stylesheet></action>
  </reference>

 </default>
</layout>

 

Agora copie os arquivos necessários para a pasta skin, inevitavelmente e para economizar tempo, precisamos incorporar no tema arquivos do tema padrão do Magento, copie a pasta blank, ele é muito básico e funciona como um framework, assim você já tem as imagens que precisará trocar, ou não, fica a seu critério.

Agora diga ao Magento que use o seu novo tema como padrão. No painel administrativo vá em Sistema e clique em Visual. Dentro de Tema, no campo padrão, coloque o nome do tema, no caso deste tutorial new_theme.

Pronto,repare que ainda não copiamos nenhum arquivo da pasta “tempolate” onde ficam os arquivos .phtml, mas para personalizar seu tema será impossível não copiar ao menos um. Para exemplo vou tirar a assinatura do Magento do rodapé, que só será possível copiando o arquivo footer.phtml.

copide fotter.phtml do seguinte endereço:

e cole para dentro de seu tema

abra a sua cópia, você verá o código a seguir:

<div>
    <div>
        <?php echo $this->getChildHtml() ?>
        <p><?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?></p>
        <address><?php echo $this->getCopyright() ?></address>
    </div>
</div>

 

Remova a linha em destaque e pronto, personalizamos nosso rodapé.

Pronto este é o básico que precisa saber para criar um tema Magento, creio que ficou um pouco extenso, que o “mínimo de arquivos” talvez seja um pouco mais do que pensou, temas Magento realmente demandam muito trabalho, mas é uma excelente ferramenta open source para lojas online e representa um mercado em crescimento em todo o mundo.

Gostou? compartilhe e fique atento pois darei continuidade a este tutorial implementando técnicas mais avançadas para criação de templates.

Quer mais? veja em meu site dou muito mais dicas de como criar temas em magento.

Um abraço.

PS.: Este conteúdo foi baseado wiki oficial da Magento: Designing for Magento.

[egoi-magento]