app/code/core/Mage/GoogleAnalytics/Block/Ga.php

adicione essa linha

var _gaq = _gaq || [];

por volta da linha 179.

O arquivo original pode ser visto aqui.

http://svn.magentocommerce.com/source/branches/1.4-trunk/app/code/core/Mage/GoogleAnalytics/Block/Ga.php

Sugiro que em vez de editar o arquivo dentro do core , faça uma copia exata dele em /app/code/local/Mage/GoogleAnalytics/Block/Ga.php , assim mesmo com todos os diretórios. Assim o Magento ira usar o arquivo no diretorio local em vez do que esta no diretório core.

No seu servidor antigo termos que fazer as seguintes tarefas.

1 – Fazer o Backup do Banco de Dados (TODAS AS TABELAS e CONTEUDOS)

Nada melhor que o phpmyadmin para essa tarefa, lembrando que esse arquivo sql do banco presa conter as seguintes opções ativadas.

Disable foreign key checks (Desabilitar Verificação de chave estrangeira)
Adicionar IF NOT EXIST (no grupo de opções sobre a estrutura do banco), ou seja antes de criar a tabela no novo banco de dados ele vai verificar se a mesma existe. Isso vai ajudar se por exemplo ao importar o arquivo no banco de destino acontecer algum problema no tempo de execução do PHP (ou qualquer outro problema) assim você pode continuar o processo com o mesmo arquivo.

Guarde seu arquivo a parte e vamos aos diretorios de FTP.

Gravando os arquivos necessários do servidor antigo :
1 ) Gravar todos os arquivos do diretorio media
2) Gravar os arquivos do seu tema atual.

- Esses arquivos estão em:
app/design/frontend/{pacote selecionado}/{tema selecionado}/*
skin/frontend/{pacote selecionado}/{tema selecionado}/*

*** Idioma PT_BR você tambem pode baixar direto do Magento Connect ou fazer o mesmo procedimento de backup.
Os arquivos de tradução e emails geralmente ficam todos em app/locale/pt_BR/*

3) Gravar o seus modulos atuais.
app/code/communinty/*
app/code/local/*

4) Gravar os arquivos de configuração
app/etc/modules/*

Nesse caso você vai gravar todos os arquivos de configuração em xml menos os que começam com Mage_ .

Caso você tenha acesso ssh do seu servidor aqui vão as linhas de comando.
Naveque para seu diretorio da loja e digite as seguintes linhas

mkdir backup
tar -cvf backup/media.tar media/*
tar -cvf backup/local.tar app/code/local/*
tar -cvf backup/community.tar app/code/community/*
tar -cvf backup/etc.tar app/etc/modules/*
tar -cvf backup/app.tar app/design/frontend/{interface}/{tema}/*
tar -cvf backup/skin.tar skin/frontend/{interface}/{tema}/*
tar -cvf backup/pt_BR.tar app/locale/pt_BR/*

Agora no servidor novo , você ira seguir os seguintes passos

1) Agora que estamos no novo servidor de hospedagem , primeira coisa será criar um banco de dados para sua nova loja, após disso o primeiro passo será importar o seu banco de dados antigo.

2) Agora instale o magento, (pode ser até uma versão mais nova) e utilize o banco de dados recem criado no qual você ja importou o banco de dados antigo, o Magento irá sobreescrever os arquivos de configuração mas não apagará os dados da sua loja. Finalizada a Instalação você perceberá que os produtos, clientes, pedidos estão lá , mas faltam os modulos, temas e tudo mais.

3) Agora comece a fazer o upload dos arquivos compactados (ou não) da sua antiga instalação do magento exatamente no mesmo lugar onde você os achou no servidor antigo. Com excessão dos arquivos MAGE_*.xml que estao no diretorio etc/modules ou no etc.tar.

4) Depois de tudo isso você precisa agora configurar sua URL que provavelmente esta com o endereço alternativo.
Vá no seu Admin e entre em Sistema -> Configuração -> Web -> Seguro e Inseguro e mude somente o endereço da primeira linha das duas caixas, deixa as outras do jeito que estão. Não se esqueça de escolher o idioma Portugues do Brasil novamente caso você tenha esquecido dessa opção na hora da instalação do seu novo MAgento.

5) Bom Trabalho

Para mais informações de novos cursos, entre aqui. http://www.cursodeecommerce.com.br/curso-magento.html

Alguns dos Tweets.

@leomangione Parabéns pelo curso! #cursomagento #magento
@leomangione: Muito bom teu curso, Leo, vamos começar a Magentar!!!
@leomangione Show de bola o #cursomagento somos os primeimos magentistas de Campinas hehehe…

Muito Obrigado a todos. Agora!! Vamos Magentar!!!!!!!

Ele deve voltar ao normal.

Você pode tambem se deparar com o erro : “There has been an error processing your request” “#760190343”, esse erro aconteceu comigo quando quiz comentar aquele array de configuração de sessões e cookies do arquivo varien.php. Nessa versão não foi preciso (pelo menos para mim) fazer isso. Basta apacar o cache e as sessões.

Abraço.

Na verdade isso não é um problema, e sim uma solução. O uso da biblioteca ZEN na verdade facilita as coisas. Em vez de usar aquelas SQLs complicadas cheia de JOINS, basta usar as COLLECTIONS do Magento.

O BASICO

Para o nosso teste, vamos fazer o seguinte, criaremos o arquivo block.phtml dentro do diretorio template do seu tema atual. Ex : app/frontend/design/default/SEU_TEMA/template/test/block.phtml.  Dentro do arquivo colaremos o seguinte codigo em PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php 
        /* Chama o model , essa linha na verdade é uma forma diferente de falar $model = new Mage_Catalog_Model Product();*/
	$model = Mage::getModel('catalog/product');
 
        /* Prepara a coleção que será chamada do modelo  CATALOG */
	$collection = $model->getCollection();
 
        /* Escolhe quais atributos vão ser chamados (Como se fossem as colunas de uma tabela sql comum) */
	$collection->addAttributeToSelect('name');
        $collection->addAttributeToSelect('price');
	$collection->addAttributeToSelect('image_url');
        $collection->setPage(1,3);	
 
        /* Carrega a Coleção (Collection) */
	$collection->load();
?>
<ul>
<?php foreach($collection as $product) : ?>
	<li><img src="<?php echo $product->getImageUrl(); ?>" /><a href="<?php echo $product->getProductUrl() ?>"><?php echo $product->getName() ?></a>- <?php echo number_format($product->getPrice(),2,",","."); ?></li>		
<?php endforeach; ?>
</ul>

Agora vamos criar uma chamada do nosso bloco em uma nova pagina CMS, Esse bloco tem o tipo mais basico do magento que é o modulo core/template.

1

{{block type="core/template" template="test/block.phtml"}}

Ao rodar a pagina CMS recém criada você vera a lista completa de produtos do seu catalogo.

Vamos entender a ultima parte do codigo onde nós fazemos um foreach e listamos nossos produtos. Você pode reparar que usamos os metodos que começam com “get” .
no href do link e chamamos pelo metodo getProductUrl(), e na ancora usamos o termo getName.

Esses métodos que começam com get, na verdade, são metodos mágicos do Magento, para usa-los basta escolher o atributo que você quer usar e tirar o underscore (se tiver) e colocarm em maiúscula toda primeira letra. Se você quiser por exemplo o preço do produto você escreve. getPrice(); se quiser o preço especial você colocar getSpecialPrice(); Mas tem que colocar esses atributos na lista da Collection, senão você estará tentando pegar atributos que não foram selecionados anteriormente.

No final da lista de Atributos a serem selecionados eu coloquei um Metodo de paginação que limita a quantidade de itens a serem chamados pela collection. O primeiro parametro diz a quantidade de paginas que você quer que tenha sua lista e no segundo você coloca a quantidade de itens que você quer em cada pagina.

Essa foi uma explicação bem breve, mas tenho certeza que vai ajudar muitas pessoas na hora de colocarem produtos na pagina principal ou em blocos por todo o site. Vou voltar a falar sobre esse Collection em um futuro bem próximo, pois ainda falta muito a ser discutido.

Abraço a todos

* 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>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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!!!!

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 .

1

{{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.

1
2
3

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

Pronto!! em breve mais dicas.

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.