Certificação Magento – Básico de Design e Frontend

Olá pessoal,

Dando continuidade a nossa saga para entender magento e de quebrar se certificar, este é o primeiro post que falará efetivamente e somente daquilo que o usuário realmente vê, o layout.

Neste post iremos falar sobre quais arquivos estão diretamente envolvidos com a renderização das páginas no magento e um pouco do que você precisa saber sobre a customização do template de sua loja!

magento-frontend-imagem-01

MVC

Nunca é demais lembrar que o Magento roda em cima de uma estrutura especial de MVC, separando a camada de negócios, da lógica dos processos daquilo que o usuário vê, portanto em tese você não precisa se preocupar com outras coisas enquanto estiver construindo seus temas se não em construir o seu tema.

Antes de começar quero salientar que este post teve como base um bom blog americano/indiano sobre magento devjunkyard.com/

Antes de falar sobre os modelos e arquivos de layout, eu vou dar um resumo sobre as regras de localização destes arquivos

Localização dos arquivos

No diretório design dentro de app, estão localizadas duas pasta: base e default, em base está o template padrão do magento, em default existem outras pastas, cada uma guarda um tema, o magento já trás alguns temas junto com o tema padrão dentro desta pasta e quando você quiser criar um novo tema, basta você abrir mais uma pasta dessa com o nome do tema.

Dentro desta pasta também tem outra pasta default que não é um tema propriamente, mas uma pasta onde você insere templates que não existem no magento mas que também não existem a criação de um novo tema do zero, como por exemplo a criação de um slide ou uma galeria de fotos.

De qualquer forma ao criar um tema do zero sempre de preferência em abrir um novo diretório em default porém se você por exemplo estiver construindo um módulo e precisar de páginas customizadas para este módulo pode inserir dentro de default e base, este ultimo não é recomendável pois irá se misturar aos padrões do magento

Normalmente os arquivos se localizam em app/default/tema ou em app/default/default/tema pasta é como um conjunto de temas e cada conjunto pode ter temas individuais. Cada conjunto deve ter um tema padrão, que é onde todos os arquivos iniciais são carregados. Você também pode criar temas adicionais (chamados de não-padrão temas) que, se um arquivo não é encontrado em sua pasta, o magento redireciona para seu tema padrão.

Esta será apenas uma visão geral. Se você precisa de algo mais avançado, ou quer saber tudo o que há para saber sobre layouts, confira no site do Magento.

Hierarquia de Frontend

Para entender melhor a estrutura de layout do magento, é importante você conhecer a hierarquia de arquivos existente no magento, já foi comentado isso antes, mas como é importante aqui: O magento primeiro procura alguma customização de sua estrutura padrão (dentro de alguma pasta de tema ou em defaul/default) e monta aquilo que encontrou, o que ele não encontrou ele pega na sua instalação padrão (pasta base ou temas pré-existentes em default ) e completa a página e a lógica, dando bem menos trabalho para o desenvolvedor, que não precisará fazer um trabalho que o magento já fez e que não é de suma importância para o projeto.

Uma página no magento não é um arquivo único, é um conjunto de blocos, você vai entender melhor ao mostrar uma página normal do magento.

magento-frontend-imagem-02

E depois mostrar a mesma página debugada para você

magento-frontend-imagem-03

Você pode clicar nela para ver melhor a questão dos blocos, mas como você vê é assim que são construídas as páginas no Magento.

Agora você deve estar se perguntando como o Magento sabe que são estes arquivos e como ele posiciona:

Bom primeiro vamos ver os arquivos que estão envolvidos nesta história toda e falar um pouco sobre cada um deles: Templates phtml, layout xml, blocos php, arquivos js e skins css e js.

Templates phtml

Passada a experiência minha com Magento julgo que será melhor explicar na ordem que vejo ser a mais fácil compreender e que facilitou mais para mim.

Templates são arquivos que misturam HTML com tags php e se tornam phtml (nunca vi esta extensão ser usada fora do Magento) como na imagem abaixo:

magento-frontend-imagem-04

Eles mostram o código da view, e o HTML será exibido no codigo fonte com os outputs vindos dos blocos php, você pode inserir a chamada de uma função no seu phtml como abaixo, esta funçã oestará no bloco php correspondente a este template.

Agora veremos mais sobre os blocos php

Blocks

Estes arquivos ficam dentro da pasta Block no code do módulo como na figura abaixo que exibe o caminho e um exemplo de código php deste arquivo.

magento-frontend-imagem-05

O modulo da imagem getEnderecos pode ser chamado pelo template relacionado a URL, agora como fazer para relacionar a URL da página com os blocos a serem chamados e os templates a serem exibidos;

Aí que entram em cena os layouts XML

Layout

São arquivos XML de configuração dos temas eles dizem ao magento que templates e blocos exibir por URL, como no exemplo abaixo:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<layout version=”1.0″>

<default>
<reference name=”head”>
<action method=”addCss”><stylesheet>css/bobby.css</stylesheet></action>
<action method=”addJs”><script>bobby/jquery-1.6.2.min.js</script></action>
</reference>
</default>

<cep_index_index>

<label>Consulta de CEP</label>
<reference name=”root”>
<action method=”setTemplate”>
<template>page/1column.phtml</template>
</action>
</reference>
<reference name=”content”>
<block type=”bobby_cep/range” name=”bobby_cep_form” template=”bobby/cep/form.phtml” />
</reference>
</cep_index_index>

</layout>

A tag é direcionada em exibir a ação padrão ao ser invocado o namespace no caso CEP, como por exemplo o caminho dos arquivos JS e CSS que estão sendo usados no tema, ou que vão customizar o design de alguma coisa no frontend.
A  brincadeira começa em <cep_index_index> invocado quando é chamada a página /cep se fosse <cep_search_searchcep> seria invocado ao chamar /cep/search/searchcep/ somente para lembrar cep é o nome do módulo, search do controller e searchcep da action deste controller. Esta logica rodará simultaneamente ao carregamento da página.

Em <reference name=”root”> o magento fica sabendo como encaixar o template desta página na estrutura padrão do magento, no esqueleto do magento, no exemplo acima estamos dizendo a ele que queremos exibir no template padrão de 1 coluna nossos blocos.

Em <reference name=”content”> estaremos referenciando os blocos e templates que farão parte desta página, aí vale a pena comentar que existem dois tipos de blocos:

Estáticos: abertos com a tag que é o bloco que será exibido na pagina e possibilitará aquela separação vista na imagem da página debugada

Dinâmicos: invocados com o atributo type= da tag block que chamará o arquivo PHP da pasta Block do code que terá os métodos que serão chamados no template como getCep dos exemplos acima.

O template em si é invocado pelo atributo template= da tag block que retornará o caminho do arquivo phtml que será exibido ao usuário.

Como você pode perceber, nunca é fornecido o caminho completo do arquivo, pois o magento entende que se não encontrar o arquivo no caminho app/default/tema ele irá procurar no tema padrão app/base/default o que por sua vez elimina muito trabalho do designer pois o mesmo não precisa customizar o template para mudar todas as páginas padrão do magento, somente aquelas que ele realmente quer mudar, o magento se encarrega de ir atrás das páginas e blocos que estão faltando que fazem parte do template padrão e completa a página.

E por fim para o estilo da sua página você tem o CSS e JS que irá poderá carregar:

Skins

Na pasta skin, irmã da pasta app ficam todas os códigos de js e css que irá usar na página que também são invocados no arquivo de layuot xml, deixando este arquivo como uma central de todo o processo.

No exemplo abaixo:

<default>
<reference name=”head”>
<action method=”addCss”><stylesheet>css/bobby.css</stylesheet></action>
<action method=”addJs”><script>bobby/jquery-1.6.2.min.js</script></action>
</reference>
</default>

Este arquivo bobby.css deve estar dentro da pasta skin dentro de alguma pasta css de algum diretório base ou default, no caso de você estar construindo um tema você deve colocá-lo dentro da pasta do seu tema dentro de default como você fez na pasta design de app.

O segundo arquivo jquery-1.6.2.min.js está na pasta js também no mesmo nível de app que por sua vez não contém diretórios base e default e o arquivo invocado deve estar lá, porém não inseri-lo não ocasionará em erro de execução, somente gerará um erro que poderá ser verificado nos consoles webkit disponíveis nos navegadores modernos.

Como foi declarado na <reference name=”head”> o magento criará automaticamente linhas HTML para invocar estes arquivos, sejam eles css ou js no head da página.

<link href=”http://bobbystore.th1010917.cloudth.com.br/bobby/skin/frontend/base/default/css/bobby.css” rel=”stylesheet” media=”all” type=”text/css” />
<script type=”text/javascript” src=”http://bobbystore.th1010917.cloudth.com.br/bobby/js/mage/cookies.js”></script>

Bom isso é tudo o que você precisa saber para entrar neste mundo de Design Magento, até a próxima!!

2017-01-24T20:24:39+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x