Como trabalhar com arquivos de template (PHTML) Magento 1.9

Sequência dos artigos

Olá, neste artigo veremos como fica a alteração de conteúdo dos arquivos de template, aqueles com extensão PHTML. Nos temas anteriores a maior necessidade de trabalhar como estes arquivos vinham da necessidade de tornar o tema responsivo, migrar o código para padrão HTML 5 ou limpar o código. No entanto este novo tema já traz o recurso responsivo nativo junto com formato para HTML 5 o que reduz muito a necessidade de editar arquivos de template.

Mesmo assim o método para modificar os arquivos de template continua a mesma, então vou dar um pequeno exemplo de como alterar arquivos de template e sinta-se a vontade para testar em seus projetos.

Modificando o cabeçalho

Eu quero colocar um fundo para destacar o cabeçalho do restante da página, mas não tenho um elemento para me apoiar então vou criar uma div envolvendo todo o header do site para isso faremos o seguinte

Copie o arquivo header.phtml para dentro do tema
de app/design/frontend/rwd/default/template/page/html/header.hhtml
para app/design/frontend/rwd/red/template/page/html/header.hhtml

Abra o arquivo e localize o nó <header id=”header” class=”page-header”> e antes dele insira uma div como esta <div id=”header-container”> e depois de fechar o nó </header> insira o fechamento da div ficando assim:

<div id="header-container">
    <header id="header" class="page-header">
      ...
    </header>
 </div>

Abra o arquivo style.css do seu tema e inclua uma regra próxima às regras do header

#header-container{
                 background:url("../images/bkg-header.png") repeat-x 0 100% #FFF;
                 border-bottom:1px solid #EE3300;
 }

Este é o arquivo usado no cabeçalho

bkg-header

Pronto veja como ficou

fundo do header alterado

Agora você sabe que modificar os arquivos de template do novo tema não tem mistério, praticamente não mudou,  mas é necessário conhecer os novos arquivos deste tema.

Cada alteração nos arquivos de template, os PHTML atende a uma necessidade específica que serão exploradas em artigos futuros, então para se manter atualizado, curta minha página no Facebook e se achar que este artigo possa ser interessante divulgue nas mídias sociais

Um grande abraço

23 respostas

  1. ao invés de :
    app/design/frontend/rwd/default/template/html/page/header.hhtml

    não seria:
    app/design/frontend/rwd/default/template/page/html/header.hhtml

    ?

    tenho outra pergunta, qual a modificação? era para aparecer essa imagem com quadrantes no cabeçalho da página? Se for, o meu não apareceu.

    Grato!

    1. Tem razão, já editei
      pode ser duas coisa, ou você não copiou a imagem pro seu diretório skin/frontend/rwd/red/images ou seu cache está ligado
      vlw e até +

  2. Olá, Bom Dia!

    Gostaria de saber se pode me tirar uma dúvida!

    Como posso fazer alguns componentes do header na pagina do checkout ou carrinho de compras ficar diferentes, ou colocar um header diferente do resto do site nesses locais!

    Parabéns pelo trabalho

    1. Depende dos modulos que estiver utilizando, mas por padrão a página do carrinho e do checkout são controladas pelo arquivo de layout checkout.xml, então voce altera dentro do nó que corresponda a página que deseja modificar, por exemplo <checkout_onepage_index> é o nó principal do checkout enquanto que <checkout_cart_index> é da página do carrinho.
      Sabendo disso basta incluir os blocos que deseja apresentar nessas páginas, talvez seja necessário modificar os arquivos dentro do template/checkout para incluir as chamadas $this->getChildHtml(‘seuBloco’); para seus blocos.

      1. Sim, entendo!

        Mas por exemplo eu tenho arquivo header aonde tem o menu com as categorias dos produtos, ou seja um menu normal, só que também tem itens que adicionei no header, mais acima desse menu, tais como: ícones de rede social, um gif e um menu no topo com links!
        Em fim, quero que carregue somente o menu normalmente, sem os icones sociais, gif e outro menu que criei.
        Nas paginas do carrinho e checkout para melhorar a finalização da compra e melhorar conversão

        1. Então vamos lá,
          Essas partes que você inseriu manualmente no header.phtml vão ter que sair e ficar em arquivos a parte veja se esse artigo ajuda a entender essa parte:
          https://www.ronaldodiniz.com.br/magento/inserir-bloco-estatico-via-xml-no-magento.html
          No caso pra que apareça em todas as páginas você vai incluir esses blocos no arquivo page.xml dentro do controlador default > header
          Para que não apareça no checkout vai seguir o que já falei antes, mas ao invés de incluir um bloco vai excluir usando o nó <remove name=”nomeDoBloco”>
          esse artigo tem um exemplo disso:
          https://www.ronaldodiniz.com.br/geral/como-criar-um-tema-magento-local-xml-em-5-passos.html
          No mais vai testando e boa sorte

          1. Obrigado!
            Fiz o seguinte peguei o codigo de do menu que criei, por exemplo, coloquei em um bloco estatico e com o widget, posicionei aonde eu queria nas paginas que eu queria!
            Uma vez tentei fazer isso e não tinha conseguido, agora tentei e foi!
            Muito Obrigado pela ajuda!

            Gostaria de sugerir duas coisas!
            1º – Gostaria de ver artigos sobre velocidade no magento, pois o que vejo muito muita gente reclamar da velocidade e hospedagem, que também influencia e muito também.

            2º – Teu menu ficou show de bola, mas pelo que tenho notado que na hora de ler seus artigos e tutoriais, ao rolar a pagina, ele cobre um pedaço da pagina, talvez seja minha forma de ver, mas em fim, gostaria de te passar talvez essa critica construtiva.

            Muito Obrigado!
            Sucesso

  3. Olá, parabéns pelos artigos. Tenho uma dúvida…

    Seria possível colocar a imagem da categoria que cadastramos no painel do magento (view.phtml) dentro do arquivo 2columns-left.phtml?

    Meu tema (catálogo) possui duas colunas, a imagem está aparecendo dentro da coluna central logo acima da listagem de produtos. Gostaria que essa imagem (cadastrada na categoria) aparecesse acima de tudo (das duas colunas) ocupando do o layout.

  4. Olá Ronaldo! Obrigado por compartilhar seu conhecimento! Segui suas dicas para editar a cor e inserir imagem no header Magento 1.9.3.8. Funcionou tudo quase perfeitamente mas, visualizo a home no celular toco no ícone do menu de categorias, o header muda e a fica sem a imagem quadriculada. Nas outras páginas, tudo normal (imagem quadriculada aparece). Poderia me ajudar na solução desse problema?

    1. isso é um problema bem específico do tema, debuga a página no computador (f12), coloca com a visualização simulando o celular

  5. Bom dia Ronaldo.
    Antes de tudo, gostaria de parabenizá-lo pelo seu trabalho. Simplesmente impecável.

    Amigo estou tentando aplicar a GTM do tags manager, porém sem sucesso.

    Saberia me informar como eu poderia proceder?

    1. os arquivos phtml são os arquivos do tema, mas não saber onde ficam indica que você não conhece temas no magento 1, então sugiro estudar como alterar temas pra evitar futuras dores de cabeça.

Deixe um comentário para Ronaldo Diniz Cancelar resposta

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

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.