Novo site, totalmente feito em drupal 6.15.

Feito em 5 dias!!!!! O layout em PSD ja estava pronto.

Antes de começar: Esse guia serve para todos os dreamweavers desde o 4 até o 10(CS4) tanto no Windows XP/Vista como no MAC OS X. Durante o guia se você estiver usando um Dreamweaver mais velho que o CS3 por favor substitua o nome “ADOBE” por “Macromedia” na localização dos arquivos . Algums espaços  tambem foram removidos para manter as referencias em uma só linha.

* Usuarios do Dreamweaver 4 só precisam fazer o Primeiro Passo.

* Se você estiver usando o Windows vista talvez precise editar alguns arquivos usando o Notepad como Adminstrador do sistema.  Basta clicar no Notepad com o botão direito e abrir o aplicativo como um administrador. Depois abrir os arquivos mostrados no guia para editar.

* Não se esqueça de clicar nos links dos anuncios ao lado. Obrigado

Primeiro passo : Adicionar a extenção .phtml ao arquivo extension.txt no seu “Application Data”

Abra o seguinte arquivo de configuração de extenção no Bloco de Notas e mude as linhas especificadas abaixo.

XP: Documents and Settings > [nome_do_usuario] > Dados do Aplicativo > Adobe Dreamweaver > Configuration > extensions.txt

XP DREAMWEAVER CS4 : Documents and Settings > [nome_do_usuario] > Dados do Aplicativo > Adobe -> Dreamweaver > [idioma] > Configuration > extensions.txt

ATENÇÃO: Se você não conseguir ver o diretório Dados de Aplicativos / Application Data, vá no menu Ferramentas, Opções de Pasta, Modos de Visualização e encontre a opção “Mostrar Pastas e Arquivos Ocultos” e marque-a.

Vista: Usuarios > [user] > AppData > Roaming > Adobe > Dreamweaver  > Configuration > Extensions.txt

Mac OS X: Usuarios > [Home Folder] >Library > Application Support > Adobe > Dreamweaver [Your Version] > [en_US ou outra linguagem (somente no CS4)] > Configuration > Extensions.txt

Na primeira linha coloque o PHTML como abaixo

HTM,HTML,SHTM,SHTML, … ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, … ,MASTER:All Documents

Na linha de arquivos PHP faça o mesmo como abaixo.

PHP,PHP3,PHP4,PHP5,TPL,PHTML:PHP Files

Passo dois > Adicione .phtml para o arquivo de configuração extension.txt.

Esse arquivo é praticamente o mesmo que acabamos de editar no diretorio dos Dados de Aplicativos, exceto que ele está no diretorio dos arquivos de programas do Dreamweaver.  Assim como no primeiro passo ache e edite as linhas como especificado abaixo.

XP, Vista: Arqvivos de Programas > Adobe (ou Macromedia) > Dreamweaver [Sua Versão] > configuration > Extensions.txt

Mac OS X: Applications > Adobe Dreamweaver [Sua Versão] > configuration > Extensions.txt

Na primeira linha faça a seguinte modificação

HTM,HTML,SHTM,SHTML, … ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, … ,MASTER:All Documents

Na linha de arquivos PHP faz a seguinte modificação.

PHP,PHP3,PHP4,PHP5,TPL,PHTML:PHP Files

Passo três : Adicione PHTML ao MMDocumentTypes.xml

Esse arquivo é um XML e esta localizado em:

XP, Vista: Arquivos de Progamas > Adobe > Dreamweaver [Sua Versão] > configuration > DocumentTypes > MMDocumentTypes.xml

Mac OS X: Aplicativos > Adobe Dreamweaver [Sua Versão] > configuration > DocumentTypes > MMDocumentTypes.XML

Atenção: Usuarios do Dreamweaver 8 no windows podem tambem precisar fazer essas alterações no arquivo : C:Documents and Settings > [user name] > Dados do Aplicativo > Macromedia > Dreamweaver 8 > Configuration > Document Types > MMDocumentTypes.xml

Adicione PHTML a essa linha (aproximadamente numero 75) duas vezes, como abaixo:

<documenttype id="PHP_MySQL" servermodel="PHP MySQL" 
internaltype="Dynamic" winfileextension="php,php3,php4,php5,phtml"
macfileextension="php,php3,php4,php5,phtml" file="Default.php" 
writebyteordermark="false">;
</documenttype>

Achei que isso poderia ser interessante para todos e resolvi colocar no meu BLOG.

Tudo que você precisa fazer é escolher um template que será chamado no layout e colocar o seguinte snippet no seu arquivo .phtml escolhido.

Somente funciona colocando em um arquivo de template da estrutura de arquivos de templates. Não tente colocar isso em alguma pagina do CMS pois não vai funcionar.

<ul>
<?php
$channel = new Zend_Feed_Rss('http://www.leomangione.com.br/feed'); // O endereço  do Feed
$limit_result = 3; // Quantidade de itens a serem mostrados
$i = 0;
foreach ($channel as $item):
if ($i < $limit_result) {
echo '<li>';
echo '<a href="' . $item->link . '">' . $item->title . '</a><br />';
echo $item->description . '<br /><br />';
echo '</li>';
$i++;
}
endforeach; ?>
</ul>

Agora basta trocar o feed que coloquei do meu BLOG para um feed de sua preferencia (provavelmente o blog da sua loja).

De qualquer jeito o MAGENTO pode ter um BLOG. Existe uma extensão que achei bem legal, não é um wordpress mas funciona direitinho, tem categorias, tags e tudo mais.

http://www.magentocommerce.com/extension/1516/blog

And it is FREEE!!!!

Trabalho de 3 horas somente.
Criei o Layout, Design, logo.

Alguns prêmios de CMS do ano da PacktPub ja foram encaminhados. Já temos três vencedores de categorias já anunciados e mais estão por vir. Os prêmios desse ano pertecem a umas figurinhas repitidas mas algumas novidades aparecem na lista.

Drupal mais uma vez encabeça a lista na categoria MELHOR CMS OPEN SOURCE EM PHP onde tambem foi ganhador no ano passado. Em seguida vem o Wordpress que começou como uma ferramenta de blog, mas deu uma reviravolta e se tornou um CMS em PHP excepcional. Depois veio o Joomla que não é nenhuma novidade na lista. O drupal foi premiado com o valor de US$ 2000,00 e os outros dois com prêmios de US$ 500,00.

Na categoria de CMS OPEN SOURCE mais promissor nós temos o ImpressCMS no topo da lista. Ano passado ele ficou empatado em primeiro lugar com o MiaCMS. Pixie fica em segundo como “pequeno, simples” CMS e Pligg logo aós. Pligg e Pixie entraram na lista pela primeira vez esse ano. ImpressCMS ganhará US$ 2000,00 pela vitória e os outros dois um prêmio de US$ 1000,00 para ajudar nos esforços.

Duas categorias ainda estão a serem anunciadas, elas são MELHOR CMS de 2009 (Geral) e o prêmio de Hall da Fama. Será que o Drupal irá ter sua segunda vitória consecutiva?

Vamos supor que você quer colocar em alguma pagina especifica a listagem de alguns produtos. Pode ser na primeira pagina ou em qualquer outra pagina criada por você. O ideal para usar essa técnica seria ter uma categoria isolada para “PRODUTOS EM DESTAQUE” por exemplo, assim você escolhe os produtos que você vai querer na primeira pagina, simplesmente adionando os produtos na categoria que você criou. (IMPORTANTE : PRECISA SER UMA SUB-CATEGORIA da CATEGORIA DEFAULT)

Primeiro Passo: (Para colocar uma lista de produtos de uma categoria na pagina HOME)

Abra a camada CMS do seu adminstrador e escolha a pagina que você quer modificar e adicione a seguinte linha .

{{block type="catalog/product_list" category_id="YOUR_CATEGORY" template="catalog/product/list.phtml"}}

Mude o item YOUR_CATEGORY para o ID da categoria que você quer trazer.

Grave a pagina e vá para pagina modificada no seu frontend.

Você ira notar tambem que ele trouxe duas coisas que não ficaram legal, especialmente se a pagina em questão for a pagina principal. O Paginador e o menu de categorias. Agora para esconder esses detalhes desagradáveis basta abrir o arquivos styles.css que fica no diretorio /skin/frontend/default/default/css/styles.css e adicionar as seguintes linhas no final do arquivo.

.cms-home .pager, .cms-home .sorter {
        display: none;
}

Pronto!! em breve mais dicas.

Aposto que já passaram por isso alguma vez da sua vida.

Se algum dia você precisar alterar a senha do usuario ‘Super Admin’ da sua instalação do Drupal, tudo que você precisa fazer é entrar no console do MYSQL do servidor do Banco de Dados do seu site  (pode ser tambem pelo PHPMYADMIN que a maioria dos servidores de hospedagem que se preze).

Como o formato de senha do drupal usa a codificação MD5 você precisará essa função na linha de SQL.

UPDATE `users` SET `pass` = MD5('senha_nova') WHERE `uid` =1;

Apenas substitua o ’senha_nova’ pela a senha que você deseja.

Espero ter ajudado.

Texto Original em Ingles em : http://www.magentocommerce.com/design_guide

Tradução feito em quatro partes.
Como fiz essa tradução sozinho e meu ingles é infinitamente melhor que meu português, me avisem de erros de gramatica por favor via email.
leomangione@me.com
Deixem a area de comentários para dúvidas ou sugestões.

Terminologias de Desgin do Magento – Parte 1
Trabalhando com os Temas do magento – Parte 2
Criando um Tema – Parte 3
Introdução a Layouts – Parte 4 (Você está aqui!)

Introdução a Layouts

Layout, pela aparência de seus componentes, pode facilmente faze-lo acreditar que para trabalhar com ele,  você deve estar armado com um extenso conhecimento de lógica de programação. Nada pode ser tão distante da verdade.  Layout é contruido com um pequeno conjunto de tags XML que são facéis e divertidas de se aprender. Conhecendo alguns conceitos e comandos chaves sobre layout, você em breve estará armado com a confiança e conhecimento para facilmente modificar o design da sua loja para as especificações que deseja.

Como os layouts funcionam

Layout é um componente virtual do Magento. Modificando os componentes do layout, você pode facilmente contruir uma pagina da loja de uma maneira atualizada e compativel. (Diagram 1)

O Layout é composto de um layout padrão (default) e atualizações de layout que são feitos de XML TAGS fáceis de se aprender. Com esses comandos de layout você pode modificar/atribuir relaçoes entre bloco extrutural e bloco de contendu e ainda pode controlar funcionalidades da pagina principal da sua loja , tais como carregar e descarregar blocos javascripts específicos de blocos em um pagina.

Arquivos de layouts são separados em um nivel  modular, todo módulo, traz seus próprios arquivos de layout (por exemplo ‘catalog.xml’ é um arquivo de layout para o módulo ‘catalog’, ‘customer.xml’ é para o módulo customer… etc.) Esses arquivos de layouts estão localizados em
app/design/frontend/your_interface/
your_theme/layout/ e cada arquivo e mais tarde separado por  alças  ou containers (’handles’ veja diagrama 1), cada alça (com e exceção do <default>) atribui suas atualizações inclusas para a pagina especifica da loja correspondente.

Alguns arquivos de layouts podem conter a alça <default>, Quando o Magento lê os arquivos de layouts, ele primeiro pega os updates de layouts atribuidos a alça <default> de quase todos arquivos de layouts, lendo-as na ordem que foi atribuida no no arquivo app/etc/modules/Mage_All.xml. Depois disso ele lê as atualizações de layout de cada pagina específica, finalizando a construção da pagina da loja. O sistema foi construido dessa maneira para poder permitir facilmente  a adição e remoção dos módulos sem afetar outros módulos no sistema.

Anatomia de um Layout

Um Layout contem um pequeno conjunto de tags XML que atuam como instruções detalhadas para aplicação em como construir uma pagina, o que construir com ela e o comportamento de cada bloco dessa construção. A melhor maneira de entender o layout é simplesmente mergulhar na sua estrutura e ataca-lo por todos os angulos. Para que você faça isso, aqui está algumas propriedades de comportamento de cada XML tag do layout.

Alça ou Container (’Handle’) Alça  (diagrama 1)  é um identificador pelo qual a aplicação determina o que fazer os as atualizações aninhadas a ela. Se o nome do container for <default>, então a aplicação sabe que sua atualizações aninhadas devem ser carregadas em quase todas as paginas da loja, antes de carregar layouts especificos da pagina (Nós dizemos, ‘quase todos’, porque algumas paginas excepcionais como popup da imagem do produto não carrega o layout no container <default>).

Se magento encontrar alças diferentes que <default>, ele ira atribuir suas atualizações aninhadas dentro da alça a aquela pagina específica correspondente pela alça. Por exemplo, <catalog_product_view) contem as atualização de layout para a pagina de visualização de produto, enquanto <catalog_product_compare_index> contem atualizações para a pagina de comparação de produto. Alças (Handles) são identificadores de nome ÚNICO que como um designer seu um entendimento da programaçao do Magento, nunca precisará  ser mudada.

<block>

Magento determina o comportamento e a apresentaçao visual de cada bloco de contrução via tag <block> . Nós já mencionamos os dois tipos de blocos que o Magento agrega – blocos estruturais e blocos de conteudo. A melhor maneira de distinguir entre os dois é examinando o comportamento atribuído a ele através dos atributos da tag. Um bloco estrutural geralmente contem o atributo ‘as’, através dele a aplicação é capaz de se comunicar com a area designada (pelo metodo getChildHtml ) em um template.

Você irá notar varias ocorrências desse atributo ‘as’ no lauout ‘default’, porque por natureza o layout ‘default’ é aquele que constrói a base no qual layouts específicos de cada pagina podem adicionar conteudo.  Por exemplo, no layout ‘default’ , existem blocos estruturais tais como, ‘left’, ‘right’ , ‘content’ , ‘footer’ sendo apresentados. Não estou dizendo que esses blocos não podem existir em atualizações de layout normais, mas por quê não configurar primeiramente blocos de estrutura recorrentes no layout ‘default’, e depois começar adicionando conteudo página por página? Vamos ver mais a fundo os atributos disponiveis para a tag <block> .

• type – Esse é o identificador para a classe ‘module’ que define a funcionalidade desse bloco. Esse attributo não pode ser modificado.
• name – Esse é o nome pelo qual outros blocos podem fazer referencia ao bloco no qual esse atributo está atribuido.   (veja  diagrama 3).
• before (e) after – Esses dois são duas maneiras de posicionar um bloco de conteudo dentro de um bloco de estrutura. before=”-” e after=”-” são comandos usados para posicionar um bloco de conteudo no topo ou na base do bloco de extrutura.
• template – Esse atributo determina que o template que ira representar a funcionalidade do bloco no qual esse atributo esta atribuido. Por exemplo, se esse atributo for usado :  ‘catalog/category/view.phtml’, a aplicação irá carregar o arquivo de template ‘app/design/frontend/template/catalog/category/view.phtml’ .Para aprender como os layouts trabalham com os templates para trazer marcação para sua loja, leia Passo a passo para construir um tema.
• action – <action> é usado para controlar funcionalidades para a parte frontal da loja, tais como carregamento ou descarregamento de um Javascript. Uma lista completa de métodos para ação estará em breve disponivel, mas por enquanto a melhor maneira de aprender os diferentes métodos para as ações é brincando com elas nas atuais atualizações de layouts disponíveis.
• as – Esse é o nome pelo qual um templete chama o bloco em que esse atributo esta atribuido. Quando você ver o método PHP getChildHtml(’block_name’) sendo chamado por um template, você pode ter certeza que ele está se referindo ao bloco no qual o atributo  ’as’  está atribuido com o  nome ‘block_name’ . (Exemplo rápido : O método <?=$this->getChildHtml(’header’)?> no esqueleto do template tem relação com <block as=“header”> )

<reference>
<reference> é usado para fazer referencia a outro bloco. Fazendo uma referencia a outro bloco, as atualizações dentro da tag <reference> irão se aplicar ao <bloco> corelato.  (veja diagrama 3).

Todas as tags precisam ser fechadas

Parametro "name"

Para que você possa fazer a referencia, você precisa apontar a referencia a um bloco usando o atributo ‘name’ .

Regras de XML

Se você não estiver familiarizado com ela. Ao se encontrar com as atualizações de Layouts do Magento baseadas em XML, você pode ter algumas perguntas sobre as regras que se deve seguir quando você quiser modificar um arquivo XML. O unico conjunto de regras que você precisa se lembrar com relação a XML é, quando se abre uma TAG, ela ou ser seguida de uma tag que fecha. Ou você precisa fechar a propria tag. Exatamente como funciona as tags do (X)HTML.

Quick Exercises to Get You Started

Exatamente como qualquer outro novo conceito, nós sabemos que sem sujar as mãos, você nunca irá absorver o que lhe foi explicado com palavras, por isso, Aqui estão dois exercicios para sentir como funciona trabalhar com layouts.  Para acompanhar esses exercicios você deve ter o tema ‘default’ do Magento pronto e acessivel.

Exercício #1: Na pagina de categoria, mova a caixa “My Cart” da coluna da direita para a coluna da esquerda.

1. Ligue as Dicas de Caminho do template indo em Sistema -> Configuração, selecione a loja que irá trabalhar usando o seletor no canto superior esquerdo da pagina. Espere a pagina recarregar, selecione a aba ‘Desenvolvedor’ , Selecione ‘Sim’ na caixa que indica ‘ Dicas do Caminho de Template’ , Clique em Gravar Configuração , e volte para o Frontend da sua loja e recarregue-a.

2. Quando a página recarregar, olhe para o caminho do template do bloco ‘My Cart’ – ele vai provavelmente dizer ‘frontend/default/default/template/checkout/cart/sidebar.phtml’. Ao olhar para o caminho, você já sabe que esse template está sendo apresentado através do módulo ‘checkout’ . Como você sabe disso? ‘contend/default/default/template/checkout/cart/sidebar.phtml’ . Está escrito no caminho do template. O nome que vem exatamente depois do diretório chamado ‘template’ é o nome do módulo no qual o template é apresentado.

3. Abra o arquivo layout/checkout.xml – porque agora você está lidando com o modulo ‘checkout’

4. Procure por  ’checkout/cart/sidebar.phtml’ (o nome do template no block ‘My cart’) nas atualizações do layout. Você vai achar uma area que se parece com isso.

<reference name=”right”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” before=”-” template=”checkout/cart/sidebar.phtml”/”>
</reference”>

Mude o para dizer o seguinte  (Note que tudo que está fazendo aqui é mudando  <referencename=”right”> para  <reference name=”left”>).

<reference name=”left”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” before=”-” template=”checkout/cart/sidebar.phtml”/”>
</reference”>

5. Recarregue o frontend da loja para ver a mudança refletida.

Observação : Pelo menos na minha instalação para que aparecesse o carrinho, eu tive que cadastrar um produto e adicion-alo na mesma. Só assim consegui fazer o exercicio.

Exercício #2 : Separe os links de SEO da area do Rodapé.  Em vez de ter o links dos items em uma lista. Isole o ‘Advanced Search’ para estar no cabeçalho.

1. Você pode presumir que os links de SEO devem estar atribuido em algum lugar do layout a baixo do footer, porque está sendo chamado através do método ‘<?=$this->getChildHtml()?>’ do template ‘template/page/html/footer.phtml’. (Você precisará das Dicas dos Caminhos do template ligados para ver por que isso é óbvio.)

2. Abra o arquivo layout/page.xml e procure pela lista de filhos debaixo do block ‘footer’ para localizar um bloco que chama os links do ‘footer’ Você vai achar <block name=’footer_links’> que [e o que chama os links de SEO. Agora que você sabe que as atualização de layouts referenciam os links de SEO pelo nome “footer_links”, agora você irá fazer uma busca em todos os arquivos XML por  <reference name=”footer_links”>.Você irá achar referencias pelos links de ‘footer’ no arquivo catalog.xml (que chama o ‘Mapa do Site’), catalogsearch.xml (Que chama ‘Termos de Busca’ e ‘ Busca Avançada’) e contacts.xml (que chama ‘Contact Us’).

3. Agora que você encontrou a area dos items dos links indiviuais, você irá agora começar os passos para isolar ‘Busca Avançada’ dos outros para ter seu próprio espaço no cabeçalho. Primeiro vá para a pagina. page.xml e crie um novo bloco. Now that you’ve located the area of the individual SEO link items, you will now begin the steps to isolate ‘Advanced Search’ from the bunch and make it it’s own thing in the header.

<block type=”page/template_links” name=”header_links” as=”header_links” template=”page/html/top.links.phtml”/>

e coloqueo dentro de

<block name=”header”>.

Agora você  fez as atualizaçnoes necessaris para esperar esse link em header.phtml. Abra o arquivo em questão template/page/html/header.phtml, e digite <?=$this->getChildHtml(’header_links’)?> onde você quer que morem os links.

4. Agora vá em catalogsearch.xml e corte isso. (CTRL + X) ou (Command + X : MAC)

<action method=”addLink” translate=”label title” module=”catalogsearch”>
<label>Advanced Search</label>
<url helper=”catalogsearch/getAdvancedSearchUrl” />
<title>Advanced Search</title></action>

Que vai estar dentro desse Bloco <reference name=”footer_links”>.

Eu criei novas linhas para referenciar o novo bloco ‘header_links’ que criei. E colei o codigo que foi cortado acima para dentro dele.

<reference name=”header_links”>
<action method=”addLink” translate=”label title” module=”catalogsearch”>
<label>Advanced Search</label><url helper=”catalogsearch/getAdvancedSearchUrl” />
<title>Advanced Search</title></action></reference>

5. Agora eu tenho o link de Busca Avançada no cabeçalho em vez do Footer.

E esse é o fim da tradução do nosso tutorial, espero que tenham gostado e conseguido acompanhar. Gostaria muito que me ajudassem para que essa tradução ficasse muito melhor. Eu sei que devo ter errado alguma coisa no meu portugues e toda hora eu arrumo aqui e ali. Um abraço a todos da comunidade Magento.

Texto Original em Ingles em : http://www.magentocommerce.com/design_guide

Tradução feito em quatro partes.
Como fiz essa tradução sozinho e meu ingles é infinitamente melhor que meu português, me avisem de erros de gramatica por favor via email.
leomangione@me.com
Deixem a area de comentários para dúvidas ou sugestões.

Terminologias de Desgin do Magento – Parte 1
Trabalhando com os Temas do magento – Parte 2
Criando um Tema – Parte 3  (Você está aqui!)
Introdução a Layouts – Parte 4 (traduzindo) – 01/11/2009

Criando um tema

Magento foi construido em um modelo totalmente modular que transfere sua loja a uma escalabilidade e flexibilidade infinita. Por natureza da aplicação, esse ponto de vista da programação é copiado na forma em que você vai desenvolver temas para sua loja. Nesse capítulo , nós iremos explorar o que isso quer dizer para você e como começar a desenvolver um tema para sua loja no Magento.

Introdução a blocos e layouts

Você provavelmente trabalhou com outra aplicação eCommerce antes de chegar no Magento –  com essa experiência, nós sabemos que você tem um conjunto de coisas que já viraram uma segunda natureza para você ao desenvolver um tema para sua loja. Antes de começar nessa documentação, nós gostariamos de assugurar que você junte todas essas espectativas e jogue-as  sem perdão janela a fora.  Não , isso não siginifica que você tem que aprender uma linguagem totalmente nova. Nem ao mesmo significa que muito do seu fluxo de trabalho irá mudar. Na verdade, tudo isso realmente significa que existem alguns novos truques que você precisará aprender e junto com eles, nós gostariamos de apresentar para você algumas novas ferramentas. Case-se com essas ferramentas, mantenha-nas ao seu lado durante todo o tempo e tenha certeza de dar a elas muita atenção. Se você fizer tudo isso, nós prometemos que você irá se amar por causa disso. Você esta pronto? Aqui estão elas.

1. Blocos Estruturais
2. Blocos de Conteudo
3. Layout

Criando uma nota mental

Para que nós possamos passar  uma clara explicação do que são os blocos e layouts, aqui está uma imagem mental que você mesmo pode desenhar

1. Imagine o contorno de alguns blocos  (como no Diagrama 1 — Não tente usa-los como referencia o tempo todo. Imagine e acompanhe com o texto)
2. Agora imagine o contorno preenchido com um bloco.
3. Agora imagine dois blocos e o contorno crescendo com os blocos.
4. Agora imagine tres blocos e o contorno crescendo com os blocos.
5. Agora imagine quatro blocos e o controno crescendo com os blocos.

6. Agora de uma olhada nessa landing page para uma categoria.

Diagrama 2

7. Agora preste atenção na descrição de cada area da tela acima.

Diagrama 3 e Diagrama 4

A imagem mental que você acabou de criar serve para dar a você uma comparação em paralelo entre conceito e atual realização dos blocos.  Eu sei que provavelmente você esta completamente perdido. Deixe-nos explicar.  Em conceito, os contornos no diagrama 2 são os blocos estruturais. Eles são os blocos pais dos blocos de conteudo e na realidade, serve para posicionar o blocos de conteudo no contexto da página. (como no Diagrama 3)

Esses blocos estruturais existem nas formas de area de cabeçalho (header) , coluna da esquerda e direita (left column e right column)  e etc.. que servem para criar a estrutura visual da pagina da loja.  Um bloco de conteudo, por sua vez, em conceito, é cada bloco individual colorido que completa o bloco estrutural.  Em um contexto de loja, eles são o verdadeiro recheio da pagina da loja. Eles são as representação de cada uma das funcionalidades destacadas em uma pagina (como uma lista de categorias, propagandas, caixa de preços e etc…) e chama os arquivos de templates para gerarem o (X)HTML a serem inseridos em seu bloco estrutural pai.

Layout é a ferramenta na qual você atribui os blocos de conteudo em cada um dos blocos de estrutura que você cria. O layout existe em arquivos de texto em formato XML e ao modifica o layout você é capaz de mover blocos em uma pagina e atribuir templates para os blocos de conteudo para produzier marcações para os blocos de estrutura.  De fato, com a ajuda de somente alguns arquivos de layouts, você é capaz de modificar o layout visual de todas as paginas da sua loja. Leia mais sobre layouts em Introdução a layouts.

Com Magento, você não vai mais ter um arquivo com o nome ‘left_colunb.ext’ e dentro dele o espagueti infinito de tags que devem ser adminstradas manualmente dependendo de cada uma das funcionalidades necessarias para a pagina.  Em vez disso, suas templates são administradas por base em sua funcionalidade e você pode ligar e desligar essas funcionalidades para sua loja pela virtude de um par de comandos em seu layout.

Step by Step Guide to Building a Theme

Aqui está a lista completa de ferramentas que o Magento disponibiliza para você construir seus próprios temas:

1. Templates
2. Layouts
3. Blocos
4. Skins (imagems, CSS e Javascripts especificos para cada bloco)

Para que você construa seu tema para sua loja, seu fluxo de trabalho consistirá dos seguintes passos.

UM : Desabilite o cache do seu sistema

Para que você prepare seu Magento para produção , você primeiro precisa desabilitar o cache do sitema indo no seu Painel Adminstrativo (http://seudominio.com.br/admin) e navegando para Sistema -> Gerenciador de Cache, na caixa de dropdown  Todo o Cache selecione Desabilitar e clique em ‘Salvar Configuração de Cache’ . Fazendo isso você tem a certeza que verá as mudanças fiéis em sua loja enquanto as faz.

DOIS: Determine todas as possibilidades dos tipos de estruturas da sua loja.

Antes mesmo de começar a criação do código para a loja, você precisará se perguntar que tipo de estrutura de página você gostaria de ter para cada página da sua loja. Faça uma lista que se pareça com essa.

• Home usará uma estrutura de três colunas.
• Lista de categorias irá usar uma estrutura de duas colunas que inclue uma coluna a direita.
• As paginas do cliente irão usar a estrutura de duas colunas que inclue uma coluna a esquerda.

Esqueleto do template

Uma vez que sua lista está completa, você irá criar o código (X)HTML para cada tipo de estrutura e salva-las como um esqueleto de template no diretorio  app/design/frontend/your_interface/your_theme/template/page/. Um esqueleto de template tem esse nome devido a natureza de seu propósito .

Tudo que ele realmente contém (sem contar com os elementos <head>) , é a presença dos códigos que servem para posicionar cada um dos blocos estruturais nas areas codificadas de concordância.

Exemplo de um esqueleto de template

Ao visualizar o esqueleto do template acima, você irá notar um método em PHP chamado <?=$this->getChildHtml()?> dentro de cada uma das tags de apresentação. É dessa maneira que o Magento carrega blocos estruturais no esqueleto do template  e enfatizando, é capaz de posicionar cada conteudo dos blocos estruturais dentro de uma pagina da loja.

Cada chamada getChildHtml chama o nome do bloco estrutural como parametro , e esses nomes são a maneiras pelo qual cada bloco estrutural é indentificado no layout.

Três : Cortar o seu (X)Html de acordo com as funcionalidades

Uma vez que você criou os esqueletos das templates, você agora criará o template para cada bloco de conteudo.

Magento gosta de templates com significados

Você terá que cortar as tags (X)HTML construidas para sua pagina e fornecer as tags em questão para cada funcionalidade da página, Por exemplo, se você tem uma area para um mini carrinho de compras, as tags para somente essa funcionalidade terão seu próprio arquivo de template. O mesmo para as etiquetas de preço dos seus produtos, assinatura de newsletter, etc… Todas essas funcionalidades já vem com o Magento, então você pode usa-las como referencia ao construir a lógica das suas tags.

Onde salvar nossas templates

A totalidade das tags para qualquer página da sua loja é introduzida através de um vetor de templates, onde cada um representa uma funcionalidade de um módulo. Para descobrir que templates estão sendo chamadas em uma pagina que você gostaria de modificar, você pode ligar as dicas de caminho do template. Para habilita-los.

1. Vá na pagina de Adminstração do site e navegue para Sistema -> Configuração.
2. Selecione sua loja no seletor no quanto superior esquerdo da página.
3. Quado a página reiniciar, selecione a aba ‘Desenvolvedor’ (ultima aba) e selecione ‘Sim’ para ‘Dicas de Caminho de Modelo’ , essa opção está sob o menu DEBUG, Salve a configuração

Quando terminar, volte para o frontend da sua loja, recarregue a pagina e você verá o caminho para todos os templates listados conforme os blocos. Para modificar o código , tudo que você precisa fazer é seguir o caminho descrito no bloco e modificar o template em questão.

QUATRO: Mude seu Layout para refletir o seu design

Já que você distribuiu algums códigos de marcação, você provavelmente gostaria de mudar a posição das templates na página para  ver como está seu progresso.

Onde estão os layouts?

Para acessar os arquivos de layouts , vá para  app/design/frontend/your_interface/your_theme/layout/. Assim como os templates, os layouts são gravados modularmente , assim, você pode facilmente localizar um arquivo de layout para modifica-lo com a ajuda das dicas do Template. Primeiro, habilite as dicas de template, recarregue a página que você quer modificar, e veja o caminho desse arquivo de template que foi disponibilizado para você através das dicas.

Se você quiser (por exemplo) mover o mini-carrinho, veja o caminho de template (ex:app/design/frontend/default/default/checkout/cart/sidebar.phtml) , use o primeiro diretório dentro do diretorio do tema (indicado em negrito, que é o nome do modulo) para achar o arquivo de layout em questão. Então no caso do mini-carrinho, você sabe que tem que procurar por ‘checkout.xml’ para modificar a posição do mesmo. Cada arquivo de layout (caso ele seja necessário) , mais tarde tem seções em comandos de layouts baseados por página.  Cada area do layout por página está claramente marcado com comentarios que refletem seu uso, mas a aplicação em si reconhece a separação do layout e lida com cada um deles.

Layouts padrão versus atualizações de layout

Existem dois tipos de layouts, padrão (default) e atualizações. Um layout default (page.xml) é um layout que por padrão é aplicada em quase todas as paginas da loja. Todas os outros são atualizações de layout, que simplesmente atualizam o layout padrão em uma base por pagina.

Vamos pegar por exemplo o esqueleto do seu template.

No layout padrão, você o tem em um conjunto de três colunas, que significa por padrão que a maioria das paginas na sua loja vão ter a estrutura de três colunas. Mas não é a estrutura de três colunas que você quer para sua pagina de produto, para isso, você quer a estrutura de duas colunas que inclui a coluna da direita. Para acomodar essa mudança, você não vai mecher no layout padrão e abrir o arquivo catalog.xml no qual você pode colocar alguns comandos de layouts que dizem a sua aplicação para carregar a estrutura de duas colinas para sua pagina de produtos em vez do padrão que são 3.  Para isso que damos o nome de atualizando um layout.

Maneira exemplo de atribuir um esqueleto de template

Vamos pegar um outro exemplo.
Digamos que por padrão, você quer a caixa de assinatura de newsletter na sua coluna da direita. Mas na pagina de conta do cliente, você não quer que ela apareça. Nesse caso, você não deveria mecher no seu default, e abrir o arquivo customer.xml . Nele você vai colocar o comando que desliga o bloco de conteudo da newsletter, excluindo a funcionalidade daquela pagina.

Texto Original em Ingles em : http://www.magentocommerce.com/design_guide

Tradução feito em quatro partes.
Como fiz essa tradução sozinho e meu ingles é infinitamente melhor que meu português, me avisem de erros de gramatica por favor via email.
leomangione@me.com
Deixem a area de comentários para dúvidas ou sugestões.

Terminologias de Desgin do Magento – Parte 1
Trabalhando com os Temas do magento – Parte 2 (Você está aqui!)
Criando um Tema – Parte 3
Introdução a Layouts – Parte 4 (traduzindo) – 01/11/2009

Trabalhando com os Temas do Magento – Parte 2

Como o Magento faz os temas tão diferentes dos outros.

O termo “tema” provavelmente lembra a você um som familiar. Tanto com espectador, um criador, ou ambos, você ja teve a experiencia de visitar um mar de aplicações na web através de seus temas. Um tema tem amplamente dois tipos de usuários, primeiramente, o tipo-espectador que vivencia o tema a partir de um ponto de vista estético e de usabilidade ao manusear uma loja. O outro, o tipo criador, que vai em uma camada adicional da experiencia de um tema ao fazer parte da crianção de um tema.

No primeiro tipo de usuario, a experiencia na loja é definida pela habilidade de uma loja de preencher seu ou sua demanda tática e emocional. Para o segundo tipo de ususario que precisa fazer parte da criação, é a eficiência na qual ele/ela é capaz de completar um conjunto de tarefas de desenvolvimento que determinam a experiencia na loja.

Nós reconhecemos que é o acumulo de experiencias em ambos os tipos que determinam a rentabilidade de uma loja, no entanto nenhuma das experiencias de usuário devem ser ignorada. Porque sabemos que, como designer, você  já tem os fims graficos das coisas bem definidos. (servindo para os tipos de audiencias), Nós entendemos que somente o ajudaremos na construção de uma administração de tema espetácular para maximizar seu eficiencia no fluxo de trabalho e levar a sua criativa a um nivel superior. Aqui estão algumas coisas que imaginaos que modem deixar você babando.

1 . Total poder de customização

• Com Magento voce pode atualizar o visual e a experiencia de sua loja em nivel de categoria e produto, dando a você grande poder de marketing e promoção assim como uma loja com um design unico sem fim. Já imaginou apresentar um produto em sua propria e customizada pagina? Magento lhe da esse poder para fazer exatamente isso e mais, disponibilizando um jeito rapido de customizar a apresentação de seu produto e um modo por produto ou por categoria.

2. Multiplos temas.

• MAgento disponibiliza a habilidade de carregar multiplos temas de uma só vez, deixando você trocar entre tema padrão (default) e um tema para um evento temporal/sazonal .

3. Fluxo de trabalho.

• Com a programação totalmente orientada a objeto, todos os modulos são imediatamente acessiveis via tags de templates a partir de qualquer arquivo de template. E porque Magento já vem rico em caracterisitcas desde a sua instalação basica, você nunca mais terá que depender de um programador para finalizar as tarefas mais basicas para você.
  Magento tambem prospera em uma extensiva rede de conhecimento através de membros da comunidade (incluindo o time Magento), então você nunca precisa pensar duas vezes onde adquirir conhecimento caso precise durante o processo.

4. Minimize tempo de debug

• Qualquer designer se recorda daquelas preciosas horas e minutos que foram disperdiçadas procurando por aquela tag que não foi fechada, examidada pelo seu validador. O validador pode falar o que está acontecendo de errado, mas ele nunca fala a você onde esta acontecendo. O backend modular do Magento traz com ele, um sistema modular de template que minimiza a quantidade de (X)HTML que você precisa lidar de uma só vez. Menos bagunça significa menos estresse e mais sanidade para as coisas realmente importantes da vida.

Realmente, a melhor parte do que o Magento tem a oferecer, é uma aplicação que prospera em sua flexibilidade, deixando você  com nada mais com que se preocupar, exceto na elaboração de seu brilhante plano de seu novo front-end ‘WOW”.  O céu é o limite para essa aplicação, e esperamos que você se divirta aplicando-a a sua loja.

Como criar um tema

Vamos primeiramente desvendar alguns diretórios para ambienta-lo. Abra os seguintes diretorios a partir do diretorio raiz da sua instalação do magento e seja xereta.

● Diretório 1 : app/design/frontend/default/default/ — Esse diretorio contem o layout, tradução (locale) e os materias de template.

● Diretório 2: skin/frontend/default/default/ — Esse diretório contem as imagens, arquivos de Css e javascripts específicos de blocos.

Quando se trabalha com temas, esses dois diretorios serão sempre seu ponto de partida.

Como você deve ter notado, nós setorizamos os arquivos de temas em duas partes. Separando os arquivos que precisam ser acessado pela web (como imagens e javascripts) daqueles que devem ser escondidos dela. Nós tivemos a certeza que magento ofereça a medida de segurança maximo para sua loja em todas as arestas.

Vamos seguir em frente e examinar os dois diretórios.

Uma visão rápida você irá notar o uso dos nomes de diretorios “default/default” em ambos os diretorios 1 e 2, então:

● Diretório 1: app/design/frontend/default/default/
● Diretório 2: skin/frontend/default/default/

Então se você tivesse um tema chamado “my_theme” em uma interface chamada “my_interface” você estaria trabalhando em “app/design/frontend/my_interface/my_theme . Você pode gravar quantos temas você quiser em sua interface. Mas até a data de escrita desse documento sua loja só pode carregar o tema chamado de default e um tema adicional de sua escolha para sua loja.
You can save as many themes into your interface directory as you’d like, but at the time of writing, your store
can only handle loading the theme called ‘default’ and one additional theme of your choice to your store. (Nota : Capacidade de carregar um numero ilimitado de temas será disbonibilizado nos proximos releases, para aprender como Magento adminstra o carregamento de multiplos temas de uma vez, leia Hierarquia de Temas) Isso da a você dois temas para você trabalhar, então você pode deixar seu tema default para o cotidiano e usar um tema adicional para ser o tema sazonal e para eventos específicos. (Para ler sobre como multiplos temas funcionam e como você pode se beneficiar com eles, leia Diga oi a multiplos temas)

Creating a new default theme.

Para criarmos um novo tema “default” , primeiro você deve copiar um tema “default” existente no qual você vai se basear como seu novo tema “default” . Crie uma cópia  de app/design/frontend/default/default e renomeie seu novo diretório para o nome que desejar (O nome de uma interface e tema devem ser uma palavra com caracteres alfa-numéricos que comece com uma letra do alfabeto [a-z]. Por exemplo “My new Theme” and “02123_my_theme” esta errado, “my_new_theme” está certo).  O nome do diretorio do seu tema é o nome pelo qual a aplicação vai reconhecer seu tema. Agora faça o mesmo para skin/frontend/default/default. E pronto! Você acabou de criar com sucesso o seu novo tema “default”.  Para aprender como selecionar esse tema para sua loja, leia Selecionando umnovo tema, abaixo.

Criando um novo tema não-default.

Quando crianos um novo tema não default, você não precisa duplicar nenhum diretorio de tema default existente.  Provavelmente você esta somente fazendo mudanças em arquivos específicos Muito provavelmente você está apenas fazendo alterações em arquivos específicos e, portanto, só terá de duplicar os arquivos de acordo como ponto de partida do seu novo tema. No entanto, uma regra que você deve sempre se lembrar de seguir é de se certificar que você preservará as convenções estruturais dos diretórios do Magento.

Por exemplo, se na  totalidade de seu tema não default contem apenas o arquivo template ‘home.phtml’ do modulo catalog que reside em app/design/frontend/your_interface/your_non_default_theme/ você deverá criar os diretorios  ‘template/catalog’ no qual você irá salvar o seu arquivo de template.  Quando você abrir um diretório de um tema ‘default’ do Magento (Diagrama 1), você verá como os diretórios estão estruturados , tenha certeza de ter como referencia essa convenção de diretorio para que você carregue seu tema com sucesso.

Selecionando uma interface e um tema para sua loja.

Agora que você criou seu proprio tema. (como default ou não default), você precisará seleciona-lo para seu website ou loja para que as modificações façam efeito. Navegue para o painel adiminstrativo do Magento ( ex : www.minhaloja.com.br/admin), então vá para a aba de configuração de design. (Sistema -> Configuração -> Aba Design )

Diagrama 2

No canto superior esquerdo do Diagrama 2, você pode ver uma caixa com o nome “Escopo da configuração atual”.

• Para administrar o design da sua loja em um nivel website, selecione o nome do seu website no menu dropdown dessa caixa e aplique os passos a seguir.

• Para administrar o design em um nivel de loja, selecione o nome da visualização da sua loja e aplique os passos a seguir.

Passo 1

Da aba design, na caixa “nome do pacote atual” , entre com o nome da interface no qual seu novo tema reside. Magento irá carregar a interface “default” automaticamente caso não tenha nada escrito nessa caixa.

Passo 2

Na caixa “Padrão” , abaixo do cabeçalho Temas, entre com o nome do seu novo tema, o qual você quer que seja carregado para seu website ou visualização de loja. Se você deixar essa caixa vazia, Magento irá automaticamente carregar somente o tema chamado ‘default’ . (Lembre-se , não importa como você configura a aba de design, Magento ira automaticamente carregar o tema chamado ‘default’) Se você selecionar um tema na administração, esse tema irá simplesmente carregar em um nivel mais alto na hierarquia ,  mas será carregado junto com o tema  ‘default. Isso irá mudar nas próximas releases do magento assim dando a você total controle sobre que temas estão sendo carregados na sua loja.  Se você escolhesse para carregar o tema separadamente dependendo do tipo de arquivo (layouts, templates, skins ou arquivos de traduções), entre com o nome do tema no qual você quer pegar os tipos de arquivos de concordancia.

Passo 3

Quando terminar, click no botão ’salvar configuração’ e recarrega o frontend da sua loja. Voila! Você agora ve seu novo tema refletido no frontend da sua loja.

Agora que você já tem o ‘Como fazer’ sobre a criação e adminstração de temas, vamos seguir em frente para saber como o magento manuseia esses temas.

Say Hello to Multiple Themes

Nota : Capacidade para um numero ilimitado de temas estará disponivel nos próximos releases.  Apesar de que no momento que foi escrito esse documento somente dois temas podem ser lidos de uma só vez.  As funcionalidades dos bastidores permanecem as mesmas e você se beneficiará ao ler essa documentação.
As festividade de final de ano , são de longe a oportunidade de aumentar as vendas mais extensiva para qualquer loja eCommerce. Clientes fazem filas para comprar presentes de natal para seus familiares e amigos, e mães fazem filas para comprar roupas de Halloween naquela noite especial de doces ou truques.  Para vestir a roupa para esses compradores sazonais, sua loja tem que refletir fielmente a ocasião para inspirar seus compradores a explorar sua loja. Uma loja como o Diagrama 3 não vai funcionar durante o Natal – o que essa loja precisa é de alguns vermelhos, flocos de neves e um Papai Noel. Exatamente como está a loja do Diagrama 4!

Com Magento, nós criamos a capacidade de sua loja para suportar multiplos temas de sua escolha, exatamente para aquelas horas quando um toque extra é mais preciso. Carregando multiplos temas para sua loja, você preserva seu design não sazonal, enquanto o incrementa com um tema de Natal Uma examinação mais proxima dos dois designs acima, você notará similaridades na base do design.  A fachada ficou natalina no diagrama 4 , mas por debaixo, você ainda pode ver a estrutura não sazonal da loja .

A única real diferença entre os dois designs da loja, são alguns CSSs e arquivos de imagens e algumas mudanças no codigo nos arquivos de template. Já que as mudanças são na verdade bem pequenas, você não precisa de um novo tema default para acomodar seu tema de Natal. O que voce precisa é de algums arquivos substitutos, e você estará no caminho certo para uma loja muito mais feliz e apimentada.

A funcionalidade de multi temas do Magento foi criada para acomodar exatamente essa necessidade, colocando o poder na ponta dos seus dedos para ligar e desligar temas sazonais enquanto preserva seu tema padrão.

Magento suporta o carregamento de multiplos temas atribuindo a uma coisa chamada Hierarquia de Temas que é simplesmente um cancelamento no carregamento de arquivos redundantes , carregando somente os arquivos que estiverem mais alto na hierarquia. A hierarquia é determinada por você na aba design do painel administrativo e sua habilidade para faze-lo ficará totalmente funcional na proxima versão estável. No momento da escrita do documento, a hierarquia do tema já esta decidido para você, já que o Magento carrega primeiro o tema default (colocando-o no nivel mais baixo da hierarquia), então carrega o segundo tema atribuido no painel administrativo (colocando-o no lugar mais alto da hierarquia).

Hierarquia dos temas.

Quando você atribui multiplos temas para sua loja, você simplesmente está tomando vantagem do fato que enquanto seu objetivo principal ao construir um tema é criar o mais usável e visualmente prazerosa interface gráfica, o objetivo do Magento é de assegurar que a aplicação é capaz de localizar todos os arquivos requeridos pelo tema para manter a aplicação funcionando sem erros.

Por exemplo, se sua pagina que lista categorias chama o arquivo ‘view.phtml’ (nesse caso esse template se trasforma em um arquivo requerido), mas a aplicação não foi capaz de achar o arquivo no nivel mais alto da hierarquia,  ele vai procurar em um nivel imediatamente mais baixo da hierarquia para achar o arquivo, se falhar ele continuará nesse processo até achar-lo . Achando, a aplicação irá carregar o arquivo e terminar a busca.  Esse método de criar designs é chamado de fallbacks.  Porque a aplicação “cai para traz” procurando a próxima fonte possível de arquivos requeridos até que possa acha-los  e carrega-los.
Digamos que nós temos tres temas atribuidos a nossa loja e cada um desses temas contem os seguintes arquivos.

Tabela 1

Vamos tambem assumir que os tres temas estão atribuidos nessa hierarquia.

Tabela 2

Observando mais de perto, você verá que existem alguns arquivos redundantes como  templates/3-col-layout.phtml e css/base.css na  Tabela 1. Agora vamos arrumar a tabela para que os arquivos redundantes fiquem arrumados paralelamentes entre si.

Tabela 3

‘Ok, legal. Mas o que isso quer dizer? ‘ Você pergunta. 
Bem, deixe-nos lembrar-lo que na Tabela 3 é como você vê os arquivos em cada diretório de cada tema e não como o Magento os vê.

Agora vamos ver como o Magento ver os mesmos arquivos na Tabela 4.

Tabela 4

Você notará como o Magento ignora a versão dos arquivos redundantes mais baixos na hierarquia e reconhece somente as verões mais alta da hierarquia. Isso porque ele já achou o arquivo requerido e não precisa mais procurar por ele, assim sendo, terminando a busca por aquele arquivo específico e continuando a busca por outros arquivos requeridos que ainda não foram encontrados.