Sequência dos artigos
- Como criar um ambiente de trabalho para cirar temas Magento 1.9
- Como fazer a estrutura básica
- Como manipular o CSS
- Como lidar com imagens
- Como trabalhar com arquivos de layout (XML)
- Como trabalhar com arquivos de template (PHTML)
- Como personalizar a tradução dentro do tema
- BÔNUS: Como manipular o slideshow nativo do Magento 1.9
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
Pronto veja como ficou
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
Respostas de 23
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!
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é +
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
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.
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
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
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
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.
talvez seja melhor ver no arquivo de layout (xml), descobrir que bloco é esse e muda-lo de posição
Otima materia! Só algum tempo, que comecei estudar magento e todo ainda muito confuso.
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?
isso é um problema bem específico do tema, debuga a página no computador (f12), coloca com a visualização simulando o celular
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?
faltou informar como trabalhar com o arquivo phtml.
Ou seja, onde fica e como editá-lo.
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.