Magento – Home Customizada

22/02/2017

Neste post, vamos aprender a como trabalhar com categorias e links de categorias na home page do Magento e fazer uma customização para ficar mais visual.

Para esse tutorial, estou utilizando a versão 1.9.1.0 do Magento com o sample data.

1.) Criando diretório no nosso tema

Acesse o diretório que contém os arquivos de tempalte do seu tema e crie o diretório cms

É importante que você sempre crie um diretório e arquivos que sejam sugestivos para aquilo que você está trabalhando. No nosso caso, como trabalharemos com o CMS –> Page do Magento, criamos o diretório cms.

No diretório cms, crie o arquivo home.phtml.

 

2.) Alterando a Home

Acesse o admin do Magento, vá em CMS –> Page e abra o arquivo responsável pela home da sua loja virtual. Clique em Content (Conteúdo) e ponha o seguinte script:

Explicando:

block type=”core/template” -> indica qual o tipo do seu bloco. No nosso caso, o tipo é core/template. Isso quer dizer que usaremos os métodos de Mage/Template

name=”homeCustom” -> apenas um identificador para o nosso bloco

template=”cms/home.phtml” -> nessa marcação informamos qual o arquivo que ele deverá chamar. Nesse caso, o arquivo  home.phtml que está no diretório cms.

Para saber se está funcionando, adicione um texto qualquer no seu home.phtml e atualize a sua home.

 

3.) Trabalhando com o PHP

Nós vamos pegar todas as nossas categorias, não as subcategorias, e exibir como uma listagem:

 

4.) Adicionando as nossas imagens no skin do nosso tema:

Conforme visto acima, adicionei as imagens que vamos utilizar na exibição de nossas categorias no diretório skin do meu tema. Criei o diretório home em /images e movi as imagens para ele.

 

5.) Criando o CSS

Em /css do seu tema, crie  o arquivo home.css:

 

6.) Carregando o CSS:

Acessei o diretório /layout do seu tema. Abra o arquivo page.xml e adicione o script:

 

Atualizando a home:

 

Pronto, as categorias são exibidas na sua home e a sua home foi customizada!

Dúvidas, posta aí!!!

Espero ter ajudado!!!

 

Um abraço.

2 Comentários

  • Dimas 22/02/2017em14:40

    Parabéns meu amigo, sucesso! Muito bom o vídeo.

Deixe uma resposta

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